js实现倒计时

最新推荐文章于 2023-03-23 21:06:49 发布

柠檬布丁^O^

最新推荐文章于 2023-03-23 21:06:49 发布

阅读量135

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41805715/article/details/85101994

版权

JavaScript 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#box{
	width: 400px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	background: pink;
	}
</style>
</head>
<body>
<div id="box">
距离2019.1.1还有&nbsp;&nbsp;&nbsp;&nbsp;<span id="time"></span>
<button id="btn">||</button>
</div>
<script>
var span=document.getElementById("time");
function task(){
	var now=new Date();
	var target=new Date("2019/01/01");
	var s=parseInt((target-now)/1000);//得到的是毫秒/1000得秒
	var days=parseInt(s/3600/24);//天数
	var hs=parseInt(s/3600%24);//小时数
	var ms=parseInt(s/60%60);//分钟数
	var ss=s%60;//秒数
	span.innerHTML=`${days}天${hs}小时${ms}分${ss}秒`;
}
task();
var timer=setInterval(task,1000);
document.getElementById("btn").onclick=function(){
	if (this.innerHTML=="||") {
		clearInterval(timer);
		this.innerHTML="|&gt;";
	}else{
		timer=setInterval(task,1000);
		this.innerHTML="||";
	}
}
</script>
</body>
</html>

柠檬布丁^O^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现倒计时

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;style&gt; #box{ width: 400px; height: 80px; line-
复制链接

扫一扫