zoukankan      html  css  js  c++  java
  • 杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例

    预览效果图:

     

    使用到的知识点:

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

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

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

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

    示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
        <!--
            需求:
            电子商务网站中,商家为了促销商品而策划一些活动,刺激消费者进行盲目消费  限时秒杀就是其中一种手段。
         本次我们模拟的商品是 农夫山泉限时秒杀抢购
    --> <title>农夫山泉限时秒杀</title> <!--CSS代码:--> <style type="text/css"> .box{ /*外围的大盒子样式*/ 702px;/*宽度702像素*/ height: 378px;/*高度378像素*/ background: url(../img/flash_sale.png);/*背景图片*/ margin: 0 auto;/*上下为0 水平居中*/ } .box div{ /*外围的大盒子内部的小盒子样式*/ 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://www.cnblogs.com/xiaoxiao5016/

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

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

  • 相关阅读:
    POJ 2723 Get Luffy Out(2-SAT)
    ZOJ 3613 Wormhole Transport
    HDU 4085 Peach Blossom Spring
    NBUT 1221 Intermediary
    NBUT 1223 Friends number
    NBUT 1220 SPY
    NBUT 1218 You are my brother
    PAT 1131. Subway Map (30)
    ZSTU OJ 4273 玩具
    ZSTU OJ 4272 最佳淘汰算法
  • 原文地址:https://www.cnblogs.com/xiaoxiao5016/p/9049424.html
Copyright © 2011-2022 走看看