简易计时器

最新推荐文章于 2024-10-02 05:39:15 发布

gjx_spider

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量204

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42982682/article/details/104313358

版权

利用JavaScript编写简易计时器

<!DOCTYPE html>
<html>
	<meta charset="utf-8"/>
	<title>JavaScript--实例</title>
	<head>
		<body>
			<center>
			<h3>JavaScript实例--计时器</h3>
			<form name="myform">
				<input type="text" size="4" name="h"/>时
				<input type="text" size="4" name="m"/>分
				<input type="text" size="4" name="s"/>秒<br/><br/>
				<input type="button" onclick="Start()" value="计时开始"/>
				<input type="button" onclick="Stop()" value="暂停"/>
				<input type="button" onclick="Running()" value="继续"/>
			</form>
			<br/>
			<div style="font-size: 80px;color: red" id="timeid">00:00:00</div>
			<script type="text/javascript">
				var hh=mm=ss=0;
				var mytime=null;

				function Start(){
					if(mytime==null){
						//获取时分秒
						hh = parseInt(document.myform.h.value);
						mm = parseInt(document.myform.m.value);
						ss = parseInt(document.myform.s.value);

						Running();
					}
				}

				function Stop(){
					if(mytime!=null){
						clearTimeout(mytime);
						mytime=null;
					}
				}

				function Running(){
					//拼装时间信息，放置到div中
					document.getElementById("timeid").innerHTML = hh+":"+mm+":"+ss;
					ss--;
					if(ss<0){
						ss=59;
						mm--;
						if(mm<0){
							mm=59;
							hh--;
							if(hh<0){
								alert("倒计时结束！");
								return;
							}
						}
					}
					//定时1000毫秒即1秒后调用Running函数
					mytime = setTimeout("Running()",1000);
				}
			</script>
		</center>
		</body>
	</head>
</html>

注释：
setTimeout（）方法为单次定时执行指定函数
clearTimeout() 方法为取消定时