时间倒计时

最新推荐文章于 2024-10-09 23:14:56 发布

allWords

最新推荐文章于 2024-10-09 23:14:56 发布

阅读量517

点赞数

CC 4.0 BY-SA版权

分类专栏： ui js 文章标签： javascript 时间倒计时 html

本文链接：https://blog.youkuaiyun.com/allWords/article/details/79132859

ui 同时被 2 个专栏收录

19 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的倒计时功能及当前时间和未来时间的显示方法。该示例通过设定特定日期和时间来展示倒计时效果，并实时更新页面上的时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要注意的是
一个页面上使用多个倒计时在有些浏览器会出现秒隔两秒才跳一次,所以一个页面尽量一个倒计时

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	.myGod{
		width:600px;
		height:300px;
		margin:150px auto;
		box-shadow:5px 5px 9px #e3e3e3;
	}
	#today{
		width:600px;
		height:100px;
		text-align:center;
		color:#f00;
		line-height:100px;
		font-size:28px;
		font-weight:600;
		box-shadow:0 0 9px #e3e3e3;
	}
	#time{
		width:600px;
		height:100px;
		text-align:center;
		color:#f00;
		line-height:100px;
		font-size:28px;
		font-weight:600;
		box-shadow:0 0 9px #e3e3e3;
	}
	#endTimes{
		width:600px;
		height:100px;
		text-align:center;
		color:#f00;
		line-height:100px;
		font-size:28px;
		font-weight:600;
		box-shadow:0 0 9px #e3e3e3;
	}
  </style>
 </head>
 <body>
	<div class='myGod'>
		<div id='today'></div>
		<div id='time'></div>
		<div id='endTimes'></div>
	</div>
 </body>
 <script>

	window.onload = function(){

		var endTime = new Date("2018/2/9 00:00:00"); //定义最终时间
		var today = document.getElementById('today');
		var time = document.getElementById('time');
		var endTimes = document.getElementById('endTimes');
				
		var date = new Date();
		var endTime1 = date.getTime()/1000 + 3600;

		//倒计时一个小时
		setInterval(getEndTimes,1000);

		function getEndTimes(){

			var date = new Date();

			var s = endTime1 - date.getTime()/1000; //累计毫秒差
			//var s = parseInt(ms/1000); //累计秒差
			
			//var hour = parseInt(s / 60 / 60); //得到小时然后取余24得到不够一天的那些小时数
			var minute = parseInt(s / 60); //秒除60得到分，然后分取余60得到不够小时的分
			var second = parseInt(s % 60); //秒取余60得到不够分钟的秒数
			

			endTimes.innerHTML = '距离考试结束时间还有:'+'00'+':'+minute+':'+second;

		}
		
		//今天的时间
		//setInterval(autoToday,1000);
		function autoToday(){
			
			var date = new Date();

			var s = date.getTime() / 1000;

			var year = date.getFullYear();
			var month = date.getMonth()+1;
			var day = date.getDate();
			var hour = date.getHours();
			var minute = date.getMinutes();
			var second = date.getSeconds();
			
			today.innerHTML = '今天的时间是:'+year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
			
		}
		
		//距离放假时间
		setInterval(autoPlay,1000);
		
		function autoPlay(){

			var date = new Date();

			var ms = endTime.getTime() - date.getTime(); //累计毫秒差
			var s = parseInt(ms/1000); //累计秒差
			
			var day = parseInt(s / 60 / 60 / 24); //天
			var hour = parseInt(s / 60 / 60 % 24); //得到小时然后取余24得到不够一天的那些小时数
			var minute = parseInt(s / 60 % 60); //秒除60得到分，然后分取余60得到不够小时的分
			var second = parseInt(s % 60); //秒取余60得到不够分钟的秒数

			time.innerHTML = '距离放假时间还有:'+day+'天'+hour+'小时'+minute+'分'+second+'秒';

		}

	}

 </script>
</html>