JavaScript倒计时及倒计时发送信息

余月初贰

于 2022-07-09 14:06:57 发布

阅读量419

点赞数 4

文章标签： javascript 前端 servlet

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125692910

版权

JavaScript 倒计时定时器实时更新消息触发

关键词由CSDN通过智能技术生成

1.js倒计时效果

<!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 type="text/javascript">
			function showTime(){
				var spans = document.querySelectorAll('span');
				var endTime = new Date('2022-10-1 10:01:01').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>

2.倒计时发送信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<input type="button" name="" id="btn" value="点击发送" />
		<script type="text/javascript">
			var btn = document.querySelector('#btn');
			btn.onclick = function(){
				var time = 10;
				var setTime = setInterval(function(){
					if(time==0){
						clearInterval(setTime);
						btn.disable = false;
						btn.value = '发送信息';
					}else{
						btn.disable = true;
						btn.value = time;
						time--;
					}
				},1000)
			}
		</script>
	</body>
</html>