[JavaScript-BOM] 倒计时效果

最新推荐文章于 2023-05-22 19:58:32 发布

君独酱

最新推荐文章于 2023-05-22 19:58:32 发布

阅读量511

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/chen_ousong/article/details/104309225

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

setInterval()定时器

语法

window.setInterval(回调函数，[间隔的毫秒数])；

重复调用一个函数，每隔这个间隔时间，就调用一次

注意

window可以省略
书写方式一，直接写函数 setInterval( function() {} , 2000);
书写方式二，写函数名 setInterval( fn , 2000); 需要定义好的函数 function fn () {}
书写方式三，写字符串 ‘函数名()’ setInterval( ‘fn()’ , 2000); 同样需要定义好的函数不推荐
毫秒数可以省略，默认是0

代码

<style>        
  	div {            
  		width: 200px;
   		margin: 100px auto;        
  	}
        span {            
          	display: inline-block;            
          	width: 40px;            
          	height: 40px;            
          	background-color: #333;            
          	color: #fff;            
          	font-size: 20px;            
          	font-weight: 700;            
          	line-height: 40px;            
          	text-align: center;        
         }    
</style>

<body>    
	<div>        
		<span class="hour">1</span>        
		<span class="minute">2</span>        
		<span class="second">3</span>    
	</div>    
	<script>        
		// 获取元素        
		var hour = document.querySelector('.hour');        
		var minute = document.querySelector('.minute');        
		var second = document.querySelector('.second');        
		// 获得当前设定时间的总毫秒数        
		var inputTime = +new Date('2020-2-14 18:00:00');        
		// 定时器        
		countDown();  //先调用一次是为了让页面一刷新就有时间显示        
		setInterval(countDown, 1000);  //这里是刷新页面一秒后才会执行函数        
		// 创建时间函数        
		function countDown() {
			// 获得当前时间的总毫秒数            
			var nowTime = +new Date();
			// 剩余时间数            
			var times = (inputTime - nowTime) / 1000;
			// 剩余小时            
			var h = parseInt(times / 60 / 60 % 24);            
			h = h < 10 ? '0' + h : h;
			// 得到的时间赋值给 hour元素的内容，显示到页面上            
			hour.innerHTML = h;            
			// 剩余分钟
			var m = parseInt(times / 60 % 60);            
			m = m < 10 ? '0' + m : m;            
			minute.innerHTML = m;            
			// 剩余秒
			var s = parseInt(times % 60);  // 这里不用parseInt（）转换，显示精确到小数点后两位            
			s = s < 10 ? '0' + s : s;            
			second.innerHTML = s;        
		}    
	</script>
</body>

呃。。参考小米首页闪购倒计时。。还有，米10真好看

忽然想到，如果时间到了就应该停止在 00：00：00，要不然会变成下面这样
在这里插入图片描述
于是乎，我把时间函数的代码做了以下修改，这样就能停住了，nice！

function countDown() {            
	var nowTime = +new Date();            
	var times = (inputTime - nowTime) / 1000;            
	if (times <= 0) {                
		h = 0;                
		m = 0;                
		s = 0;            
	} else {                
		h = parseInt(times / 60 / 60 % 24);                
		m = parseInt(times / 60 % 60);                
		s = parseInt(times % 60);            
	}            
	h = h < 10 ? '0' + h : h;            
	m = m < 10 ? '0' + m : m;            
	s = s < 10 ? '0' + s : s;            
	hour.innerHTML = h;            
	minute.innerHTML = m;            
	second.innerHTML = s;        
}

君独酱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript-BOM] 倒计时效果

setInterval()定时器语法window.setInterval(回调函数，[间隔的毫秒数])；重复调用一个函数，每隔这个间隔时间，就调用一次注意window可以省略书写方式一，直接写函数 setInterval( function() {} , 2000);书写方式二，写函数名 setInterval( fn , 2000); 需要定义好的函数 function f...
复制链接

扫一扫