JS定时器

最新推荐文章于 2024-02-22 14:08:58 发布

北风吹画州

最新推荐文章于 2024-02-22 14:08:58 发布

阅读量251

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_59359854/article/details/125543864

版权

这篇博客展示了JavaScript在网页中实现定时器和倒计时的三种不同应用场景：1) 文本自动消失；2) 活动倒计时显示；3) 发送信息前的倒计时锁定按钮。通过这些实例，读者可以了解如何使用setTimeout和setInterval来控制页面动态效果，并掌握清除定时器的方法。

摘要由CSDN通过智能技术生成

定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>5s后自动消失</span>
		<script type="text/javascript">
			
			var span = document.querySelector('span');
			var time1 = setTimeout(function(){
				span.style.display = 'none';
			},5000)
			var time2 = setTimeout(function(){
				alert('5s到了');
			},5000)
			
           // 清除定时器
			var i=0;
			var myinterval =  setInterval(function(){
				i++;
				console.log(i);
			},1000)
			
			setTimeout(function(){
				clearInterval(myinterval);//清除定时器
			},5000)
			 
		</script>
	</body>
</html>

倒计时

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<!-- 活动倒计时 -->
	<p>距离活动还剩<span>0</span> 天<span>0</span> 时<span>0</span> 分<span>0</span> 秒</p>
	<script>

		function showTime() {
			var spans = document.querySelectorAll('span');
			//设置活动截至的时间 的毫秒数
			var endTime = new Date('2022-07-02 14:00:00').getTime();
			console.log(endTime);
			var newTime = new Date().getTime();
			//获得现在到活动截至时 相差的秒数
			var diffTime = (endTime - newTime) / 1000;
			console.log(diffTime);

			var day = parseInt(diffTime / 60 / 60 / 24);
			console.log(day);
			var hours = parseInt(diffTime / 60 / 60 % 24);
			var minutes = parseInt(diffTime / 60 % 60);
			var seconds = parseInt(diffTime % 60);
			spans[0].innerText = day;
			spans[1].innerText = hours;
			spans[2].innerText = minutes;
			spans[3].innerText = seconds;
		}

		//设置定时器
		setInterval(showTime, 1000);

	</script>

</body>

</html>

倒计时发送信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<input type="button" id="btn" value="发送信息">
		
		<script type="text/javascript">
			var btn = document.querySelector('#btn');
			btn.onclick = function(){
				//设置5秒倒计时
				var time = 5;
				var  setTime =  setInterval(function(){
					
					if(time==0){
						//清理定时器
						clearInterval(setTime);
						btn.disabled = false;
						btn.value = '发送信息';
					}else{
						//禁用按钮
						btn.disabled = true;
						// 将时间赋值给按钮
						btn.value = time;
						time--;
					}
					
				},1000)
			}
		</script>
	</body>
</html>