Hello developers, today in this blog, you will learn how to create a Stopwatch using HTML, CSS & JavaScript.
A watch with a hand or a digital display that can be started and stopped at an exact time. In the stopwatch, there will be options such as start time, stop time and reset time. The start time is to start the time or count from zero, the stop time is used to stop or pause the time at which the count is being stopped and the reset time is to restart the time from the first that is from zero.
In this program (Stopwatch using HTML, CSS & JavaScript), on the webpage, there is a title at the center of the webpage as Stopwatch, below this, there is the number that starts the initial count. There are three buttons below the numerical number as Start, Stop and, Reset buttons. When you click on the start button, the number gets increases, which gets started from zero. When you click on the stop button, the time which is running will get stoped or pause immediately at which number or time it is. When you click on the Reset button, the time starts to run from the initial time that is from zero. This stopwatch can be used to calculate the time.
The source code of this Stopwatch is given below, if you want the source code of this program, you can copy it. You can use this Stopwatch code on your projects.
Stopwatch using HTML, CSS & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
background: #12192c;
font-family: "Montserret",sans-serif;
height: 100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
h1{
font-size: 50px;
}
#seconds, #tens{
font-size:2em;
}
button{
display: inline-block;
border-radius: 50%;
text-decoration:none;
cursor:pointer;
font-size: 30px;
padding:18px 10px;
width:130px;
height: 130px;
margin: 20px;
outline: none;
background: transparent;
border: 3px solid #21D4FD;
}
h1,p,button{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.credit{
text-align: center;
color: #fff;
margin-top: 100px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#21D4FD;
font-weight: bold;
}
window.onload = function () {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval;
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer () {
tens++;
if(tens <= 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
}
Thank you for reading our blog. If you face any problem in creating this Stopwatch using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team