js制作简单倒计时

た入场券 2023-06-16 08:29 7阅读 0赞

**效果图**  
![20191125203010489.gif][]

**具体思路：**  
        通过计算目标时间到目前时间的时间差，然后将时间差转化为时分秒，具体转化在代码中体现。

*  天 ：`seconds/60/60/24`
 *  小时：`seconds/60/60%24`
 *  分钟：`seconds/60%60`
 *  秒：`seconds%60`

**代码部分**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>倒计时</title>
    		<style type="text/css">
    			*{ 
    				margin: 0;
    				padding: 0;
    			}
    			#djs{ 
    				width: 600px;
    				display: block;
    				margin: 0 auto;
    				color: red;
    				border: 1px solid red;
    				text-align: center;
    				font-size: 24px;
    				
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function(){ 
    				setInterval(function(){ 
    					//获取当前时间的毫秒数
    					var nowTime = new Date();
    					var lastTime = new Date("2020-1-1 00:00:00");
    					//计算时间差
    					var ms = lastTime.getTime() - nowTime.getTime();
    					var seconds = parseInt(ms/1000);
    					//计算天
    					var day = parseInt(seconds/60/60/24);
    					//计算小时
    					var hour = parseInt(seconds/60/60%24);
    					//计算分钟
    					var min = parseInt(seconds/60%60);
    					//计算秒数
    					var miao = parseInt(seconds%60);
    					var djs = document.getElementById("djs");
    					djs.innerHTML = "距元旦还有 "+day + " 天 " + hour + " 小时" + min +" 分钟 " + miao + "秒";
    				},1000)
    			}
    		</script>
    	</head>
    	<body>
    		<p id="djs"></p>
    	</body>
    </html>

[20191125203010489.gif]: https://img-blog.csdnimg.cn/20191125203010489.gif