This example shares the specific implementation code of js through the start-end control timer for your reference. The specific content is as follows
TimestampThe use of the use of the multiple click events can cancel the accumulation of the effects of multiple click events. For example, the use of timestamps ensures that the time in setInterval() will not be superimposed after multiple click events.
Begin and endUse addEventlistener() to control the beginning and end.
Real-time displayThe text content you want to display is placed in setInterval() to achieve real-time display effect.
The time set by the setInterval() method cannot be guaranteed to be 1 second, and there is an error, but it can only be executed within a certain range through the different controls of the previous and subsequent Date(). However, this is not set here for the time being, and you will make up for it if you have time.
<!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>Simple timer</title>
<style type="text/css">
input{
border: 1px solid black;
text-align: right;
font-size:20px;
}
</style>
</head>
<body>
<input type="text" value="0" >Second
<br>
<input type="button" value="Start timing" >
<input type="button" value="Stop timing" >
<script type="text/javascript">
var time = 0;
var seconde=0;
var btn1 = ("btn1");
var btn2 = ("btn2");
var text = ("text");
function getStyle(elem, prop) {
if () {
return (elem, null)[prop];
} else {
return [prop];
}
}
var count = 1;//Set the timestamp ("click",showTime)
function showTime(e) {
if(count){
time = setInterval(function () {
seconde++;
= seconde;
}, 1000)
count =0;
}
}
("click",stopTime)
function stopTime(){
clearInterval(time);
count =1;
}
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.