用HTML写一个标准秒表,JavaScript写秒表

1、HTML部分

00

:

00

:

00

开始

复位

2、css部分

#div1 {

width: 100px;

height: 200px;

padding: 50px;

background-color: orange;

border: 1px solid #000000;

margin: auto;

}

span{

font-size: 20px;

}

#div1 button{

width: 100px;

height: 30px;

font-size: 16px;

margin-top: 20px;

background-color: black;

color: white;

}

3、JavaScript部分

function $(id) {

return document.getElementById(id);

}

var i = 0;

var timer = null;

var judge = true;

window.onload = function(){

//获取按钮

function startTime(){

timer = setInterval(function(){

i++;

$("sec").innerHTML = doubleNum(i % 60);

$("min").innerHTML = doubleNum(parseInt(i / 60) % 60);

$("hour").innerHTML = doubleNum(parseInt(i / 3600));

},1000);

}

function stopTime(){

clearInterval(timer);

}

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

if(judge){

$("start").innerHTML = "继续";

judge = false;

startTime();

}else{

$("start").innerHTML = "开始";

judge = true;

stopTime();

}

}

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

clearInterval(timer);

i = 0;

judge = true;

$("start").innerHTML = "开始";

$("sec").innerHTML = "00";

$("min").innerHTML = "00";

$("hour").innerHTML = "00";

}

}

function doubleNum(n){

if(n < 10){

return "0" + n;

}else{

return n;

}

}

标签：function,00,JavaScript,innerHTML,doubleNum,start,judge,秒表

来源： https://www.cnblogs.com/zorzhang/p/13801293.html