JS 模仿京东秒杀倒计时

最新推荐文章于 2024-05-13 04:15:45 发布

凌冰_

最新推荐文章于 2024-05-13 04:15:45 发布

阅读量783

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/hlx20080808/article/details/108001306

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用定时器

页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				height: 300px;
				width: 200px;
				background-color: red;
			}
			.box2{
				padding-top: 10px;
			}
			h2{
				color: white;
				text-align: center;
			}
			img{
				margin-left: 70px;
			}
			p{
				color: white;
				text-align: center;
			}
			li{
				font-family: "微软雅黑";
			    font-size:20px;
				margin-left: 5px;
				list-style: none;
				display: inline-block;
			}
			li:nth-child(odd){
				background-color: black;
				color: white;
			}
			li:nth-child(even){
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="box2">
		 <h2>京东秒杀</h2>	
			<img src="img/jd.PNG">
		<p>16:00点场倒计时</p>
			<ul>
				<li id="hh">16</li>
				<li>:</li>
				<li id="mm">10</li>
				<li>:</li>
				<li id="ss">00</li>
			</ul>
		</div>
	</body>
</html>

<script src="js/lzl.js" type="text/javascript" charset="utf-8"></script>

JS：

function times(){
	//1.日期
	var date =new Date();
	//现在距离1970年的毫秒数
	var startTime = date.getTime();
	
	//2.设置时间
	var newDate=new Date("2020/8/14 12:00:00");
	//2019年距离1970年的毫秒数
	var endTime = newDate.getTime();
	
	//3.计算差-毫秒
	var minTime=Math.floor((endTime-startTime)/1000);
	
	//4.分别计算秒，分，时
	var second=Math.floor(minTime%60);
	var minute=Math.floor((minTime/60)%60);
	var hour=Math.floor((minTime/60/60));

	//当剩余秒数为0时,就停止
	if(second<0){
		clearInterval(auto);
		return;
	}
	
	//5.显示
	document.getElementById("hh").innerHTML=zero(hour);
	document.getElementById("mm").innerHTML=zero(minute);
	document.getElementById("ss").innerHTML=zero(second);
	
}
//加载
times();

//每隔1秒显示
var auto=setInterval(times,1000);

//不足位数补零
function zero(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  }

凌冰_

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
JS 模仿京东秒杀倒计时

使用定时器页面：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ height: 300px; width: 200px; background-color: red; } .box2{ padding-top: 10px; .
复制链接

扫一扫

专栏目录