第三十三天：JS写的一个倒计时的计时器;

迷失的夜行者

于 2017-06-08 22:41:08 发布

阅读量439

点赞数

分类专栏： javaScript技术

本文链接：https://blog.csdn.net/java_wht/article/details/72938823

版权

javaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客展示了如何用JavaScript编写一个简单的倒计时计时器。通过HTML和CSS创建了计时器的界面，包括一个显示时间的输入框和一个开始/暂停按钮。JavaScript函数`start()`和`start1()`分别用于启动和更新计时器，最大时间设置为10分钟减1秒，倒计时结束后会自动重置。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.all{
				margin-left:33% ;
				width:300px;
				height:250px;
				background-color: palevioletred;
			}
			.point{
				border-color: #000000;
				margin-left:20% ;
				padding-top: 50px;
			}
			.input{
				 width:180px;
				 font-size: 24px;
				 color: red;
				 text-align: center;
			}
			.point1{
				margin-left: 20%;
				padding-top: 15px;
				background-color: palevioletred;
				font-size: 22px;
			}
			.input1{
				 width:150px;
				 margin-left: 15px;
				 margin-top: 30px;
				 font-size: 24px;
				 color: red;
				 background-color: palevioletred;
				 text-align: center;
				border-color: black;
			}
			
		</style>
		<script>
   			var maxtime= -(60*10-1);
			function start(){
				maxtime=maxtime*-1;
				if(maxtime<0){
					document.getElementById("start").value="开始";
					clearInterval(stop);
				}else{
					document.getElementById("start").value="暂停";
					stop=setInterval("start1()",1000);
				}
				
			}
			
			function start1(){
					if(maxtime>=0){
						minutes=Math.floor(maxtime/60);
						seconds=Math.floor(maxtime%60);
						msg=minutes+":"+seconds;
						document.getElementById("time").value=msg;
						--maxtime;
					}
			}
		</script>
	</head>
	<body>
			<div class="all">
				<div class="point1">
					<input class="input1"  id="time" value="10:00"/>					
				</div>
				<div class="point" >
					<input  class="input"  οnclick="start()" id="start"  value="开始" />
				</div>
			</div>
	</body>
</html>

迷失的夜行者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第三十三天：JS写的一个倒计时的计时器;

.all{ margin-left:33% ; width:300px; height:250px; background-color: palevioletred; } .point{ border-color: #000000; margin-left:20% ; padding-top: 50px; } .inp
复制链接

扫一扫

专栏目录