您现在的位置是：首页 > 文章详情

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

日期：2018-05-16点击：318收藏

预览效果图：

使用到的知识点：

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