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

预览效果图:

使用到的知识点:

定时器 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>

图片素材

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【CSS进阶】原生JS getComputedStyle等方法解析

2345
来自专栏柠檬先生

jQuery 效果使用

.hide()   隐藏匹配的元素。   .hide()     这个方法不接受任何参数。   .hide([duration][,comp...

2119
来自专栏十月梦想

CSS3 动画Animation的8大属性

animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”,”隔开,适用于所有元素,包含伪对象:after和:before

1011
来自专栏coding for love

CSS入门8-三大特性之层叠特性与优先级

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1493
来自专栏海天一树

小朋友学Python(30):实现带UI的简易计算器(下)

一、最终效果 ? 8.png 二、完整程序 import tkinter #导入tkinter模块 #定义数值 w = 280 ...

42310
来自专栏向治洪

微信小程序之picker组件

作为移动端的分发入口,微信小程序虽然没有当初期望的那么火,但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说,微信小程序对于开发还是很方便的,特别...

86710
来自专栏java架构师

C#对图片文件的压缩、裁剪操作初探

在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便。毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件...

3296
来自专栏向治洪

微信小程序之picker组件

作为移动端的分发入口,微信小程序虽然没有当初期望的那么火,但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说,微信小程序对于开发还是很方便的,特别...

7995
来自专栏游戏开发那些事

【python游戏编程之旅】第一篇---初识pygame

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

1362
来自专栏章鱼的慢慢技术路

Go指南练习_切片

1693

扫码关注云+社区

领取腾讯云代金券