您的位置：首页 > 其它

5.计时器实现计时功能

2017-04-07 23:27 148 查看

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>计时器</title>

<script>

onload = function(){

var Gtext = document.getElementById("box");

var Ga = document.getElementById("box1");

var Gb = document.getElementById("box2");

var Gc = document.getElementById("box3");

var n = 0; // 计时初始值

var timm = 0; // 全局变量保存计时器

Ga.onclick = function () { // 第一个点击事件

clearInterval(timm);
// timm 永远都等于按钮按下的最新的计时器，所以每次都要在计时器开始时清除计时器

timm = setInterval(function () { // 计时器

n++;

var h = parseInt((n/3600))>=10?parseInt((n/3600)):"0"+parseInt((n/3600));
// 获取小时数

var f = parseInt((n/60%60))>=10?parseInt((n/60%60)):"0"+parseInt((n/60%60)); // 获取分钟

var s = parseInt((n%60))>=10?parseInt((n%60)):"0"+parseInt((n%60)); // 秒钟

Gtext.value = h+":"+f+":"+s; // 拼接

},10);

};

Gb.onclick = function () {

clearInterval(timm); // 永远停止最新的计时器。

}

Gc.onclick = function () {

Gtext.value = "00:00:00";

n=0;

}

};

</script>

<style>

div{

width: 1100px;

height: 1100px;

position: fixed;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

body{

background: black;

}

#box{

height: 100px;

width: 200px;

border: 0;

font-weight: 700;

font-size: 30px;

text-align: center;

border-radius: 20px;

}

#box1,#box2,#box3{

width: 200px;

height: 100px;

border: 0;

font-size: 30px;

font-family: "微软雅黑";

font-weight: 700;

border-radius: 50%;

outline: 0;

}

</style>

</head>

<body>

<div>

<input id="box" type="text" value="00:00:00">

<input id="box1" type="button" value="开始">

<input id="box2" type="button" value="暂停">

<input id="box3" type="button" value="重置">

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航