欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

如何轻松创建动态倒计时效果 - 用JavaScript在前端实现从3开始的计时器源码分享

最编程 2024-02-23 15:31:02
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>
		
		<script>
			var show=document.getElementById("show").getElementsByTagName("span");
			
			setInterval(function(){
			var timeing=new Date();
			var time=new Date(2020,0,1,0,0,0);
            var num=time.getTime()-timeing.getTime();
            
            var day=parseInt(num/(24*60*60*1000));			
            num=num%(24*60*60*1000);
            var hour=parseInt(num/(60*60*1000));            
            num=num%(60*60*1000);
            var minute=parseInt(num/(60*1000));
            num=num%(60*1000);
            var seconde=parseInt(num/1000);
             
              show[0].innerHTML=day;
              show[1].innerHTML=hour;
              show[2].innerHTML=minute;
              show[3].innerHTML=seconde;
            },100)
            
            
		</script>
	</body>
</html>