倒计时抢购（JS时间函数）

最新推荐文章于 2024-05-02 16:46:30 发布

wj_秦桑低绿枝

最新推荐文章于 2024-05-02 16:46:30 发布

阅读量999

点赞数 1

文章标签： js时间函数倒计时

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/88418196

版权

这里我将时间设置到了2019年3月25日
这里我模拟时间已经到了的时候
time.html

<!doctype html>
<html >
 <head>
 <meta charset="UTF-8">
  <title>京东倒计时抢购</title>
  <style>
  *{
  margin:0;
  padding:0;
  font-size:20px;
  
  }
  .box{
  text-align:center;
  margin:20px auto;
  width:300px;
  height:50px;
  line-height:50px;
  border:1px solid red;
  }
  .box span{
  color:yellow;
  font-weight:bold;
  }
  </style>
 </head>
 <body>
 <div class="box">距离开抢还有：<span id="timeBox">00:00:00</span></div>
  <script src="time.js" charset="utf-8"></script>
 </body>
</html>

time.js

var timeBox=document.getElementById('timeBox');
function computed(){
	var nowTime=new Date(),
		targetTime=new Date('2019/3/1 16:00:00');
	var spanTime=targetTime-nowTime;
	if(spanTime<=0){
		timeBox.innerHTML="开始抢购";
		window.clearInterval(timer);
		return;
	}
	var hour=Math.floor(spanTime/(1000*60*60));
	spanTime-=hour*1000*60*60;
	var minute=Math.floor(spanTime/(1000*60));
	spanTime-=minute*1000*60;
	var second=Math.floor(spanTime/1000);
	hour<10?hour="0"+hour:null;
	minute<10?minute="0"+minute:null;
	second<10?second="0"+second:null;
	timeBox.innerHTML=hour+":"+minute+":"+second;
}
computed();
var timer=window.setInterval(computed,1000);;