杨老师课堂之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>图片素材
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年05月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
