浏览器网页小工具----计时器

CsDn.FF

已于 2023-07-09 17:08:14 修改

阅读量2k

点赞数 2

分类专栏： html基础小作业文章标签： servlet html 前端

于 2022-09-20 16:22:55 首次发布

本文链接：https://blog.csdn.net/weixin_56800176/article/details/126955815

版权

html基础小作业专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个小小的计时器，按秒计时，点击开始开始计时，点击停止，则停止计时，点击复位，则重置计时器并停止计时

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<style type="text/css">
			#d1{
				position: absolute;
				left: 40%;
				top: 18%;
				background-color: #C52916;
			}
			#textc{
				text-align: center;
			}
			#d2{
				position: relative;
				left: 50px;
				top: 25px;
			}
			#sp1{
				color: white;
				text-align: center;
				position: relative;
				left: 125px;
			}
			#sp2{
				color: white;
				position: relative;
				left: 100px;
				text-align: center;
			}
			
		</style>
		<script type="text/javascript">
		function add(){
					var a =document.getElementById("textc");
					a.value = eval(a.value+"+1");
	
				}
			function startc(){
				j=setInterval("add()",1000);
				var d = document.getElementById("k");
				d.disabled="disabled"
				
			}
			function stopc(){
				clearInterval(j);
				var d = document.getElementById("k");
				d.disabled=""
			}
			function resetc(){
				var a =document.getElementById("textc");
				a.value = 0;
				clearInterval(j);
				var d = document.getElementById("k");
				d.disabled=""
			}
		</script>
	</head>
	<body><div id="d1" style="width: 300px;height: 180px;">
		<div style="width: 200px;height: 100px;background-color: #FBC240;" id="d2">
			
			<table border="1" cellspacing="0" cellpadding="0" width="200px" height="100px">
				<tr><td colspan="3" align="center">
                <input type="text" id="textc" value="0"/>
				</td></tr>
				<tr><td align="center"><input type="button"  id="k" value="开始" onclick="startc()"/></td>
				  <td align="center"><input type="button"  id="f" value="复位" onclick="resetc()"/></td>
				<td align="center"><input type="button"  id="t" value="停止" onclick="stopc()"/></td>
				</tr>
			</table>
		</div>
		<span ></span><br>
		<span ></span><hr >
			<span id="sp1">计数器</span><br>
		<span id="sp2">Made  By  WF</span>
		
		</div>
		
	</div>
		
	</body>
</html>