javascript倒计时和即时时间显示

最新推荐文章于 2025-04-05 20:55:33 发布

在路上走着走着

最新推荐文章于 2025-04-05 20:55:33 发布

阅读量287

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/www_wo/article/details/126425828

版权

javascript 前端开发语言

前端专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>javascript计时器</title>
		<style>
			.box{
				position:absolute;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
				font-size:40px;
			}
			
			.font_size{
				font-size:40px;
			}
		</style>
	</head>
	<body>
			<div class="box">
				<div>
					<div><label>当前时间：</label></div>
					<div><span id="current"></span></div>
				</div>
				<div>
					<div>截至时间：</br>(截至时间需大于当前时间)</div>
					<div><input type="text" class="font_size" id="endDate" placeholder="请输入截至日期" style="border: none;outline: none;" /></div>
					<div style="margin-top: 10px;margin-left: 20px;">
						<button id="beginTime" class="font_size" >开始倒计时</button>
						<button id="endTime" class="font_size" >停止倒计时</button>
					</div>
					<div id="time" style="display: block;margin-top: 10px;margin-left: 25px;">
						<span id="_d">00</span>
						<span id="_h">00</span>
						<span id="_m">00</span>
						<span id="_s">00</span>
						<span id="_ms">00</span>
					</div>
				</div>
			</div>
		<script type="text/javascript">
			//初始化
			document.getElementById("endDate").value = getDateYMDH();
			document.getElementById("time").style.display="none";
			
			//开始倒计时
			document.getElementById("beginTime").onclick=function(){
				document.getElementById("time").style.display="block";
				countTime();
			}
			
			//停止倒计时
			document.getElementById("endTime").onclick=function(){
				document.getElementById("time").style.display="none";
				countTime();
			}
			
			//显示当前时间
			function getCurrent(){
				document.getElementById("current").innerHTML = getDateFormate();
				//递归每秒调用countTime方法，显示动态时间效果
				setTimeout(getCurrent, 100);
			}
			getCurrent();
			
			function countTime() {
				var date = new Date();
				var now = date.getTime();
				var endDateStr = document.getElementById("endDate").value;
				if(endDateStr == ""||document.getElementById("time").style.display=="none"||new Date(endDateStr)<new Date()) 
				{
					document.getElementById("time").style.display="none";
					return;
				}else{
					document.getElementById("time").style.display="block";
				}
				var endDate = new Date(endDateStr);//设置截止时间
				var end = endDate.getTime();
				var leftTime = end - now; //时间差                              
				var d, h, m, s, ms;
				if(leftTime >= 0) {
					d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					m = Math.floor(leftTime / 1000 / 60 % 60);
					s = Math.floor(leftTime / 1000 % 60);
					ms = Math.floor(leftTime % 1000);
					if(ms < 100) {
						ms = "0" + ms;
					}
					if(s < 10) {
						s = "0" + s;
					}
					if(m < 10) {
						m = "0" + m;
					}
					if(h < 10) {
						h = "0" + h;
					}
				} else {
					console.log('已截止')
				}
				//将倒计时赋值到div中
				document.getElementById("_d").innerHTML = d + "天";
				document.getElementById("_h").innerHTML = h + "时";
				document.getElementById("_m").innerHTML = m + "分";
				document.getElementById("_s").innerHTML = s + "秒";
				document.getElementById("_ms").innerHTML = ms + "毫秒";
				//递归每秒调用countTime方法，显示动态时间效果
				setTimeout(countTime, 100);
			}
			
			//获取当前时间
			function getDateFormate(){
				var now = new Date();                      
				return now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+"."+now.getMilliseconds();
			}
			
			//获取当前时间
			function getDateYMDH(){
				var now = new Date();                      
				return now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" 00:00:00";
			}
		</script>
	</body>
</html>