Implementing a simple timer in JavaScript
|
This article example shares the specific code of JavaScript to implement a simple timer for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer</title>
<style>
.bigDiv {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
border-radius: 10px;
}
#showNum {
width: 200px;
height: 20px;
background-color: orange;
text-align-all: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="bigDiv">
<h2 align="center">Timer</h2>
<div id="showNum" align="center">
0
</div>
<br>
<br>
<div class="butDiv">    
<button type="button" id="start">Start</button>
 
<button type="button" id="stop">Stop</button>
 
<button type="button" id="reset">Reset</button>
 
</div>
</div>
<script>
//Define the displayed time let int = null;
/**
* Start click event */
document.getElementById("start").addEventListener('click', function () {
if (int == null) {
//Set the timer//Execute every 2 milliseconds parameter 1 int = setInterval(startNum, 1000);
}
});
/**
* Stop click event */
document.getElementById("stop").addEventListener('click', function () {
// Clear the timer,
clearInterval(int);
int = null;
});
/**
* Reset click event */
let num = 0;
document.getElementById("reset").addEventListener('click', function () {
if (int == null) {
num = 0;
//Change the time to 0
document.getElementById("showNum").innerHTML = num;
}
});
function startNum() {
num++;
//Continuously change time document.getElementById("showNum").innerHTML = num;
}
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Explanation of the usage of replace and replace into in MySQL
>>: Introduction to ApplicationHost.config (IIS storage configuration area file)
Recommend
A brief discussion on the efficiency of MySQL subquery union and in
Recent product testing found a problem that when ...
jQuery achieves the effect of advertisement scrolling up and down
This article shares the specific code of jQuery t...
Detailed tutorial on installing MySQL 5.7.19 decompressed version on Windows Server 2016
The installation tutorial of MySQL 5.7.19 winx64 ...
Analysis of SQL integrity constraint statements in database
Integrity constraints Integrity constraints are f...
Example of how to configure cross-domain failure repair in nginx
Nginx cross-domain configuration does not take ef...
Detailed explanation of where the image pulled by docker is stored
20200804Addendum: The article may be incorrect. Y...
What to do if the container started by docker run hangs and loses data
Scenario Description In a certain system, the fun...
How to solve the error "ERROR 1045 (28000)" when logging in to MySQL
Today, I logged into the server and prepared to m...
vue+node+socket io realizes multi-person interaction and releases the entire process
1. Background 1. The front end uses vue + vuex + ...
How to implement element floating and clear floating with CSS
Basic Introduction to Floating In the standard do...
MySQL select results to perform update example tutorial
1. Single table query -> update UPDATE table_n...
The principle and direction of JavaScript this
How to determine what this points to? ①When calle...
Bootstrap+Jquery to achieve calendar effect
This article shares the specific code of Bootstra...
Specific method to delete mysql service
MySQL prompts the following error I went to "...
A detailed introduction to seata docker high availability deployment
Version 1.4.2 Official Documentation dockerhub st...