您的位置：首页 > Web前端 > JavaScript
原生JS倒计时

2016-09-20 18:05 253 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>秒杀</title>
<!--这个是一个比较小的demo,大家可以相互讨论-->
<style>
body,div {
margin: 0;
padding: 0;
font-family: "微软雅黑";
-webkit-user-select: none;
}
#time {
width: 500px;
height: 50px;
margin: 40px auto 0;
line-height: 50px;
text-align: center;
font-size: 20px;
color: red;
background-color: aquamarine;
border: 2px dashed navy;
}
</style>
</head>
<div id="time"></div>
<body>
<script>

//这里要用构造函数去new一个时间,也就是我们期望的时间(目标时间)
var targetTime=new Date("2018/11/11 11:11:11");
var oDiv=document.getElementById("time");

//然后获取本地的时间,用我们目标时间-本地时间,就是需要多长时间,我们要做的就是对这个时间差进行操作,让他倒计时
//一说到倒计时,我们应该要想到的事定时器,
function secKill() {
var timer=null;
window.clearInterval(timer);

//这里是我们夺取的当地时间(也就是你这台电脑上的时间)
var nowTime=new Date();

//这个就是时间差
var diffTime=targetTime-nowTime;
//console.log(diffTime);//结果是毫秒数

//我们首先要思考怎么去把时间按年 月 日 分开??
//下面我给大家计算一下
//1年=12个月,1个月=30天,1天=24H,1H=60min,1min=60s,1s=1000ms
//打个比方:10里面有几个4 ? 是不是商2余5 ?那么这样就确定有2个4,但是余数就不能算
//同理我们用时间差这个时间除以换算过来的毫秒数,即1个月=(1000*60*60*24*30)ms
//这里要注意的是我们不能四舍五入,只取 "商",余数要继续往下取 "商",即月,日,时,分,秒
//大家可以好好理解一下,最好是拿个笔计算一下----->有助于理解

var months=Math.floor(diffTime/(1000*60*60*24*30));
var dates=Math.floor(diffTime%(1000*60*60*24*30)/(1000*60*60*24));
var hours=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)/(1000*60*60));
var minues=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)%(1000*60*60)/(1000*60));
var second=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)%(1000*60*60)%(1000*60)/1000);

//求出相应的时间后,我们进行字符串的拼接,让他更加形象
var s=months+"个月"+dates+"日"+hours+"小时"+minues+"分钟"+second+"秒";
//console.log(s);
oDiv.innerHTML="距离双十一还剩:["+ s+"]";

//这里就是作出判断,当目标时间于本地时间相差小于1s的时候,打开链接
if(diffTime<=1000){
oDiv.innerHTML="<a href='http://item.jd.com/2123282.html?cpdad=1DLSUE'>前往秒杀~</a>";
}
}
secKill();
timer=window.setInterval(secKill,1000);

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JS H5
相关文章推荐
新的分享
章节导航