- 定时器样式图:
- 代码块:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head><h1 class="heading">Timer</h1>
<style>
.heading{
position: relative;
text-align: center;
/* margin-right: 380px; */
}
.wrap{
background-color: darkcyan;
border: pink solid;
min-height: 350px;
width: 1000px;
padding: 10px;
text-align: center;
margin: 50px auto;
}
.time{
margin-bottom: 50px;
}
span{
color: white;
font-size: 100px;
font-family: Arial, Helvetica, sans-serif;
}
.control button {
width: 80px;
height: 40px;
border-radius: 7px;
border: 1px solid #333;
outline: none;
font-size: 20px;
}
.control button:nth-child(1){
font-size: 25px;
background-color: gold;
font-family: Arial, Helvetica, sans-serif;
position: relative;
margin-top: 10px;
margin-right: 20px;
}
.control button:nth-child(2){
font-size: 25px;
background-color:red;
font-family: Arial, Helvetica, sans-serif;
}
.control button:nth-child(3){
font-size: 25px;
background-color:blue;
font-family: Arial, Helvetica, sans-serif;
display: none;
margin-top: 10px;
margin-right: 20px;
}
.control button:nth-child(4){
font-size: 25px;
background-color:yellow;
font-family: Arial, Helvetica, sans-serif;
display: none;
}
#show{
color: white;
font-size: 18px;
margin: 20px;
}
p{
color: white;
}
</style>
<body>
<div class="wrap" id="wrap1">
<div class="time">
<span>00:</span>
<span>00:</span>
<span>00</span>
</div>
<div class="control">
<button>Start</button>
<button>Reset</button>
<button onclick="changeH()" id="count">Count</button>
<button>Pause</button>
</div>
<div id="Show"></div>
</div>
</head>
<script>
var num=document.querySelectorAll(".time span");
var start=document.querySelectorAll(".control button")[0];
var reset=document.querySelectorAll(".control button")[1];
var count=document.querySelectorAll(".control button")[2];
var pause=document.querySelectorAll(".control button")[3];
var show=document.getElementById("Show");
var hour = 0,
minutes = 0,
seconds = 0;
var timer;
function timerfun(){
timer=setInterval(function(){
seconds++;
if(seconds>0&&seconds<60){
if(seconds<10){
num[2].innerHTML = '0'+ seconds;
}
else{
num[2].innerHTML = seconds;
}
}
else {
minutes++;
seconds=0;
num[2].innerHTML = "00";
}
if(minutes>0&&minutes<60){
if(minutes<10){
num[1].innerHTML = '0'+minutes+':';
}
else {
num[1].innerHTML = minutes+':';
}
}
if(minutes>59){
minutes = 0;
num[1].innerHTML = "00";
hour++;
}
if(hour>0&&hour<24){
if(hour<10){
num[0].innerHTML = '0'+hour+':';
}
else {
num[0].innerHTML = hour+':';
}
}
},1)
}
var cnt=0;
function counter(){
var a = num[0].innerHTML;
var b = num[1].innerHTML;
var c = num[2].innerHTML;
cnt++;
var n = document.createElement("p");
n.innerHTML = cnt+'. ' + a + b + c;
show.appendChild(n);
}
function clear(){
clearInterval(timer);
}
start.onclick = function () {
start.style.display = "none";
reset.style.display = "none";
count.style.display = "inline-block";
pause.style.display = "inline-block";
timerfun();
}
function over(){
clearInterval(timer);
// 把时间重置
hour = 0;
seconds = 0;
minutes = 0;
// 页面元素赋值重置
num[0].innerHTML = '0' + hour + ':';
num[1].innerHTML = '0' + minutes + ':';
num[2].innerHTML = '0' + seconds;
}
pause.onclick = function(){
start.style.display ="inline-block";
reset.style.display ="inline-block";
pause.style.display ="none";
count.style.display ="none";
clear();
}
reset.onclick = function(){
over();
show.innerHTML='';
}
count.onclick = function(){
counter();
}
</script>
</body>
</html>