JS短信倒计时实现（简单代码）

倾心*

已于 2022-02-19 15:39:26 修改

阅读量661

点赞数 1

文章标签： HTML CSS JavaScript 事件处理计时器

于 2022-02-18 18:17:51 首次发布

本文链接：https://blog.csdn.net/weixin_53056046/article/details/123009060

版权

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			#btn {
				background-color: skyblue;
				position: relative;
				left: 800px;
				top: 30px;
				border: 1px solid skyblue;
				border-radius: 10px;
				width: 300px;
				height: 40px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn" onclick="fun()">点击我倒计时</button>
		<script type="text/javascript">
		var a ;
		var i = 10;
			function fun(){
				a= setInterval(function(){
					if(i>0){
						btn.disabled = true;
						btn.innerText = ("倒计时"+(i < 10 ? "0" + i : i)+"s");
						i--;
					}else{
						clearInterval(a);
						btn.disabled = false;
						btn.innerText = "刷新页面重新计时";						
					}					
				},1000);
				
			}
		</script>
	</body>
</html>