html中加入一个计时器,HTML+CSS+JS一个简易的计时器

一个粗糙的计时器，javascript

HTML部分：css

00

:

00

:

00

开始

暂停

CSS部分：html

*{

margin:0;

padding:0;

}

.wrap{

width:300px;

height:300px;

border-radius:50%;

position:absolute;

top:calc(50% - 150px);

left:calc(50% - 150px);

box-shadow: 0 0 9px red;

}

#timer{

position:absolute;

top:90px;

left:60px;

font-size:38px;

}

#btn{

position:absolute;

top:180px;

left:70px;

font-size:30px;

}

#btn button{

width:80px;

font-size:28px;

text-align: center;

cursor: pointer;

}

JS部分：java

window.onload = function(){

var hours = document.getElementById("hours"),

minute = document.getElementById("minute"),

second = document.getElementById("second"),

begin = document.getElementById("begin"),

pause = document.getElementById("pause"),

timer = null,

Hours = 0,

Minute = 0,

Second = 0;

begin.onclick = function(){

timer = setInterval(function(){

Second++;

if(Second > 59){

Second = 0;

Minute++;

if(Minute >59){

Minute = 0;

Hours++;

}

}

if(Second < 10){

second.innerText = "0" + Second;

}else{

second.innerText = Second;

}

if(Minute < 10){

minute.innerText = "0" + Minute;

}else{

minute.innerText = Minute;

}

if(Hours < 10){

hours.innerText = "0" + Hours;

}else{

hours.innerText = Hours;

}

},1000)

}

pause.onclick = function(){

clearInterval(timer);

}

}