按秒计时,点击开始开始计时,点击停止,则停止计时,点击复位,则重置计时器并停止计时
代码:
<!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>