2021-06-04

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Html 同时被 3 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

计时器

1 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript编写一个倒计时计时器，具体到某个日期，例如6·18活动的倒计时。通过获取当前时间和目标时间的差值，计算并显示剩余的天数、小时、分钟和秒数。代码中还包含了一个检查位数的辅助函数，确保显示的数字始终为两位数。

如何用JavaScript写出一个计时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
/**
			 *  常用方法
			 */
			var today=new Date(); 
			var year=today.getFullYear();
			var month=today.getMonth()+1;
			var date=today.getDate();
			var hour=today.getHours();
			var minute=today.getMinutes();
			var second=today.getSeconds();
			var milliSecond=today.getMilliseconds();
			var day=today.getDay();
			var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			var time=today.getTime(); // 返回从1970-01-01 00:00:00至今的毫秒数
			
			console.log(year+'年'+month+'月'+date+'日 '+hour+':'+minute+':'+second+' '+milliSecond+' '+weekday[day]); 
            function showTime(){
				
			var today=new Date();
			var duoHand=new Date(2021,5,18);//时间
			var seconds=Math.floor((duoHand.getTime()-today.getTime())/1000);
			if(seconds<=0){
				document.getElementById('time').innerHTML='可以开始剁手了！';
				return;
			}
			
			var day=Math.floor(seconds/60/60/24);
			var hour=checkNum(Math.floor(seconds/60/60%24));
			var minute=checkNum(Math.floor(seconds/60%60));
			var second=checkNum(seconds%60);

			
			var time='距离6·18还有：'+day+'天 '+hour+'小时'+minute+'分'+second+'秒';//判断时间
			
			document.getElementById('time').innerHTML=time;
			
			setTimeout(showTime,1000);
			}
			
			
			function checkNum(num){
				if(num<10){
					return '0'+num;
				}
				return num;
			}
			
			window.onload=function(){
				showTime();
			}
		
			
		</script>
		
	</head>
	<body>
		<div id="time"></div>
	</body>
</html>