秒针计时器 html,JS实现一个秒表计时器

本文实例为大家分享了JS实现秒表计时器的具体代码，供大家参考，具体内容如下

秒表计时器的实现：

效果图如下：

附代码，已调试运行

Document

#div1 {

width: 300px;

height: 400px;

background: skyblue;

margin: 100px auto;

text-align: center;

}

#count {

width: 200px;

height: 150px;

line-height: 150px;

margin: auto;

font-size: 40px;

}

#div1 input {

width: 150px;

height: 40px;

background: orange;

font-size: 25px;

margin-top: 20px

}

00

00

00

//可以将查找标签节点的操作进行简化 var btn = getElementById('btn')

function $(id) {

return document.getElementById(id)

}

window.onload = function() {

//点击开始建 开始计数

var count = 0

var timer = null //timer变量记录定时器setInterval的返回值

$("start").onclick = function() {

timer = setInterval(function() {

count++;

console.log(count)

// 需要改变页面上时分秒的值

console.log($("id_S"))

$("id_S").innerHTML = showNum(count % 60)

$("id_M").innerHTML = showNum(parseInt(count / 60) % 60)

$("id_H").innerHTML = showNum(parseInt(count / 60 / 60))

}, 1000)

}

$("pause").onclick = function() {

//取消定时器

clearInterval(timer)

}

//停止记数 数据清零 页面展示数据清零

$("stop").onclick = function() {

//取消定时器

$("pause").onclick()

// clearInterval(timer)

//数据清零 总秒数清零

count = 0

//页面展示数据清零

$("id_S").innerHTML = "00"

$("id_M").innerHTML = "00"

$("id_H").innerHTML = "00"

}

//封装一个处理单位数字的函数

function showNum(num) {

if (num < 10) {

return '0' + num

}

return num

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。