杨老师课堂之JavaScript定时器限时抢购秒杀商品案例-低调大师

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例

2018-05-16 606

预览效果图：

使用到的知识点：

　　定时器 setInterval(函数，毫秒)：在指定的毫秒数后调用函数或执行一段代码

　　取消定时器 clearInterval：取消由setInterval设置的定时器

　　函数(日期函数、parseInt函数)

　　　　parseInt()函数 ：可解析一个字符串,并返回一个整数

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    <!--
        需求：
        电子商务网站中，商家为了促销商品而策划一些活动，刺激消费者进行盲目消费  限时秒杀就是其中一种手段。
　　　　　本次我们模拟的商品是 农夫山泉限时秒杀抢购
    -->
        <title>农夫山泉限时秒杀</title>
        <!--CSS代码：-->
        <style type="text/css">
            .box{        /*外围的大盒子样式*/
                width: 702px;/*宽度702像素*/
                height: 378px;/*高度378像素*/
                background: url(../img/flash_sale.png);/*背景图片*/
                margin: 0 auto;/*上下为0  水平居中*/
            }
            .box div{    /*外围的大盒子内部的小盒子样式*/
                width: 50px; /*宽度50像素*/
                height: 50px;/*高度50像素*/
                border: 1px solid darkgray;/*边界线1像素 实线 浅灰色*/
                position: relative; /*使用相对定位*/
                top: 260px;            /*相对定位顶部距离260像素*/
                float: left;        /*使小盒子左浮动*/
                left:305px ;        /*相对定位左侧距离305像素*/
                margin-left: 5px;    /*两个小盒子之间空出5px*/
                color: red;            /*字体颜色为红色*/
                text-align: center;    /*字体居中显示*/
                line-height: 50px;    /*字体行高50像素*/
            }
        </style>
    </head>
    <body>
        <!--外围的大盒子-->
        <div class="box">
            <!--剩余的天数-->
            <div id="d"></div>
            <!--剩余的小时-->
            <div id="h"></div>
            <!--剩余的分钟-->
            <div id="m"></div>
            <!--剩余的秒数-->
            <div id="s"></div>
        </div>
    </body>
</html>
<!--JavaScript代码:-->
<script type="text/javascript">
        //设置秒杀结束时间
    var endTime = new Date("2018-05-18 09:29:00");
    //把年月日时分秒的时间转换成为毫秒数
    endSeconds = endTime.getTime();//结束时间的毫秒数
    //定义变量  天数 小时 分钟  秒数  
    var d = h = m = s =  0;
    //设置定时器  实现一个秒杀效果
    var timer = setInterval(qiang,1000);
    
    function qiang(){
        // 获取当前系统时间
        var nowTime = new Date();
        // 获取当前时间差---nowTime.getTime()现在时间的毫秒数
        var remain = parseInt((endSeconds-nowTime.getTime())/1000);
        //判断秒杀是否过期
        if(remain>0){
            //1.计算剩余天数  （除以60*60*24  取整数  获取剩余天数）
            d = parseInt(remain/86400)
            //2.计算剩余小时（除以60*60 转换成为小时了  与24进行取模   获取剩余小时）
            h = parseInt((remain/3600) % 24);
            //3.计算剩余分钟（除以60  转换成为分钟了  与60进行取模   获取剩余分钟）
            m = parseInt((remain/60) % 60);
            //4.计算剩余秒数（与60进行取模   获取剩余秒数）
            s = parseInt((remain) % 60);
            
            //统一利用两位数 表示 剩余的天、小时、分钟、秒
            d= d < 10 ? '0' + d:d;
            h= h < 10 ? '0' + h:h;
            m= m < 10 ? '0' + m:m;
            s= s < 10 ? '0' + s:s;
            
        }else{
            // 秒杀过期  取消定时器
            clearInterval(timer);
            d = h = m = s = '00' 
        }
        //将剩余的天数、小时、分钟、秒  小时到指定网页中去
        document.getElementById("d").innerHTML = d + '天';
        document.getElementById("h").innerHTML = h + '时';
        document.getElementById("m").innerHTML = m + '分';
        document.getElementById("s").innerHTML = s + '秒';
    }
</script>

图片素材

作者：杨校

出处： https://blog.csdn.net/kese7952

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题，可邮件（397583050@qq.com）咨询。

微信关注我们

原文链接：https://yq.aliyun.com/articles/675147

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例

预览效果图：使用到的知识点：定时器 setInterval(函数，毫秒)：在指定的毫秒数后调用函数或执行一段代码取消定时器 clearInterval：取消由setInterval设置的定时器函数(日期函数、parseInt函数) parseInt()函数：可解析一个字符串,并返回一个整数示例代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <title>农夫山泉限时秒杀</title>  <style type="text/css"> .box{ /*外围的大盒子样式*/ width: 702px;/*宽度702像素*/ height: 378px;/*高度378像素*/ background: url(.....

2018-05-17

591

引言对Excel表格设置分页对我们预览、打印文档时是很方便的，特别是一些包含很多复杂数据的、不规则的表格，为保证打印时每一页的排版美观性或者数据的前后连接的完整性，此时的分页符就发挥了极大的作用。因此，本文将介绍C#设置Excel分页的方法。当然，对于Excel表格中已有的分页符，如果我们也可以根据需要自行删除分页。示例要点梳理 1. 插入分页 1.1 插入横向分页 1.2 插入纵向分页 2. 删除分页 2.1 删除全部分页 2.2 删除指定分页代码操作及效果 1.插入Excel分页 C# using Spire.Xls; namespace ExcelPageBreak_XLS { class Program { static void Main(string[] args) { //实例化一个Wordbook类对象，并加载需要设置分页的Excel文档 Workbook workbook = new Workbook(); workbook.LoadFromFile("Sample.xlsx"); //获取第一个工作表 Worksheet sheet = workboo...

2018-05-17

606

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。