HTML+CSS+JS一个简易的计时器

一个粗糙的计时器,

HTML部分:

00 : 00 : 00

CSS部分:

*{
	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部分:

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);
	}
}

 

你可能感兴趣的:(js,HTML+CSS)