Articles address https://www.cnblogs.com/sandraryan/
Click to start the timer, you can count reps pause. Point pause may continue timing, total time, click Reset to empty.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
width: 90%;
margin: 50px auto;
background-color: #333333;
text-align: center;
padding: 50px 0;
}
.time {
margin-bottom: 50px;
}
span {
color: white;
font-size: 100px;
}
.control button {
width: 80px;
height: 40px;
border-radius: 7px;
border: 1px solid #333;
outline: none;
font-size: 20px;
color: white;
}
.control button:nth-child(1) {
background-color: #90f62b;
}
.control button:nth-child(2) {
background-color: #35b1f8;
}
.control button:nth-child(3) {
background-color: #f5a123;
display: none;
}
.control button:nth-child(4) {
background-color: #f75629;
display: none;
}
.time span:last-child {
display: inline-block;
width: 90px;
}
#show {
color: white;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="time">
<span>00:</span>
<span>00:</span>
<span>00:</span>
<span>000</span>
</div>
<div class="control">
<button>启动</button>
<button>复位</button>
<button>计次</button>
<button>暂停</button>
</div>
<div id="show"> </ div> varGet element//
<Script>
</ div>
num = document.querySelectorAll(".time span");
var start = document.querySelectorAll(".control button")[0];
var reset = document.querySelectorAll(".control button")[1];
var times = document.querySelectorAll(".control button")[2];
var pause = document.querySelectorAll(".control button")[3];
var show = document.getElementById("show");
// 初始化时间值
var hour = 0,
minutes = 0,
seconds = 0,
ms = 0 ;
// Create a timer variable
var Timer;
// create a time array
var timeArr = [hour, minutes, seconds The, MS];
function Fun () {
// set the timer
Timer = the setInterval ( function () {
/ / + last digit will change seconds = 11 + 10 = 0 is always the last bit
MS + = 11 ;
// if the number is greater than 0 and less than 999 milliseconds, or the position of the number of milliseconds milliseconds
// otherwise ( greater than 999), the position of the replacement number of milliseconds to 000 milliseconds is reset to 0, min ++
IF (MS> 0 && MS <999 ) {
NUM [ . 3] = .innerHTML MS;
}the else {
NUM [ . 3] .innerHTML = '000' ;
MS = 0 ;
seconds The ++ ;
}
// if greater than 0 seconds and less than 59
IF (seconds The> 0 && seconds The <59 ) {
// if less than 10 seconds , written as 0 seconds and the current second (01-09)
IF (seconds The <10 ) {
NUM [ 2] .innerHTML = '0' + + seconds The ':' ;
} the else {
// the number of seconds greater than 10, seconds the current value of the number
NUM [2] + seconds The .innerHTML = ':' ;
}
} The else {
// the number of seconds more than 59, is reset to 0, min ++ position becomes seconds 00
seconds The = 0 ;
minutes ++ ;
NUM [ 2] .innerHTML = "00" + ':' ;
}
IF (seconds The> 59 ) {
// if greater than 59 seconds, and less than 10 minutes, 0s, greater than 10 minutes, a display
IF (minutes <10 ) {
NUM [ . 1] .innerHTML = '0' + + minutes': ' ;
} the else {
NUM [. 1] .innerHTML minutes + = ':' ;
}
// seconds is greater than 59, + shows minutes minutes
minutes ++ ;
NUM [ . 1] .innerHTML minutes + = ':' ;
// if less than 59 seconds, the display 00 min
// min becomes 0, h ++
} the else {
NUM [ . 1] .innerHTML = '00' + ':' ;
minutes = 0 ;
hour ++ ;
}
// if the number is greater than 59 minutes, into the outer conditions
IF (minutes> 59 ) {
//If less than 10 hours, the content of complement hours at 0 hours +
IF (hour <10 ) {
NUM [ 0] .innerHTML = '0' + hour + ':' ;
} the else {
NUM [ 0] = hour .innerHTML + ':' ;
}
}
}, 10 );
}
// package a function of
// T as a counter, as a serial number for each time
var T = 0 ;
function counter () {
// with each acquired num array abcd subscript value
var A = NUM [0 ] .innerHTML;
var B = NUM [. 1] .innerHTML;
var C = NUM [2 ] .innerHTML;
var D = NUM [. 3 ] .innerHTML;
// function call timer ++ (d plus one time point)
T ++ ;
// Create a p element, additional a display area (a display for each event list)
var n-= document.createElement ( 'P' );
n.innerHTML = T + A + B + C + + '.' D;
show.appendChild (n-);
}
// Clear timer
function Clear () {
the clearInterval (timer);
}
// reset function
function rESET () {
// clear the timer
the clearInterval (Timer);
// the reset time
hour = 0 ;
seconds The = 0 ;
minutes = 0 ;
MS = 0 ;
// page elements assigned reset
num [0] .innerHTML = '0 ' + hour + ':' ;
NUM [ . 1] .innerText = '0' + minute + ':' ;
NUM [ '.' 2] .innerText = '0' + seconds The + ;
NUM [ . 3] .innerText = '00' + MS;
}
/ / start button click registration time, hide the start button reset, timing pause button appears
// call the function timer starts running the entire
= start.onclick function () {
start.style.display = "none" ;
reset.style.display = "none" ;
times.style.display = "inline-Block" ;
pause.style.display = "inline-Block " ;
Fun ();
}
// click stop button, hide and metering stop button to begin the reset button appears
pause.onclick = function () {
pause.style.display =" none " ;
times.style.display =" none " ;
start.style.display ="inline-block"inline-block";
reset.style.display = "inline-Block" ;
Clear ();
}
// count a click button, the current time value is placed in the display area preventing
times.onclick = function () {
counter ();
}
// click Reset button to reset the page elements, the reset time, empty the contents of the page
reset.onclick = function () {
rESET ();
show.innerHTML = '' ;
}
</ Script>
</ body>
</ HTML>
that‘s all ~~~