一分钟倒计时与日期倒计时实现-优快云博客

本文链接：https://blog.youkuaiyun.com/mu_Tchun/article/details/103836525

一分钟倒计时

		<script type="text/javascript">
			var time = [1,0,0];
			var timer = setInterval(function(){
				console.log("时间为"+time[0]+":"+time[1]+":"+time[2]);
				time[2]--;
				if(time[2]<0){
					time[1]--;
					time[2]=59;
					if(time[1]<0){
						time[0]--;
						time[1]=59;
						if(time[0]<0){
							clearInterval(timer);
						}
					}
				}
				
//				console.log("时间为"+time[0]+":"+time[1]+":"+time[2]);
			},1)
		</script>

效果图如下：
在这里插入图片描述
如需在页面指定地方输出则使用：innerHTML在网页中创建标签写入。

日期倒计时

js代码：

/*
时间倒计时插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
    //结束时间
    var endDate = new Date(endDateStr);
    //当前时间
    var nowDate = new Date();
    //相差的总秒数
    var totalSeconds = parseInt((endDate - nowDate) / 1000);
    //天数
    var days = Math.floor(totalSeconds / (60 * 60 * 24));
    //取模（余数）
    var modulo = totalSeconds % (60 * 60 * 24);
    //小时数
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分钟
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;
    //输出到页面
    document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    //延迟一秒执行自己
    setTimeout(function () {
        TimeDown(id, endDateStr);
    }, 1000)
}

html 代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时间倒计时</title>
    <script src="TimeDown.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="show">
        </div>
        <script type="text/javascript">
            TimeDown("show", "2020-01-13 8:00:45");
        </script>
    </form>
</body>
</html>