目前所写的计时器是点击开始之后从00秒开始计时,之后添加停止选项和暂停并显示在指定的区域,代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: aqua;" align="center">
<div id="show" style="width: 50px;height: 50px;"></div>
<input type="button" id="time" value="开始计时" />
</div>
<script type="text/javascript">
$("#time").on("click",function(){
var hour = 0;
var min = 0;
var sen = 0;
function showTime(){
sen++;
if(sen>=60){
min++;
sen = 0;
}
if(min>=60){
hour++;
min = 0;
}
if(hour>=12){
hour = 0;
}
var dataStr = (hour<10?("0"+hour):hour)+":"+(min<10?("0"+min):min)+":"+(sen<10?("0"+sen):sen);
$("#show").text(dataStr);
}
setInterval(function(){
showTime();
},1000);
});
</script>
</body>
</html>
运行之后的效果为:
如果感觉效果图不好看可自主更改ces样式,之后会添加更多功能