stopwatch using javascript here is a simple example of stopwatch using javascript with start and pause button. Create a Stopwatch in JavaScript or make a stopwatch in javascript. This program is written in HTML5, CSS3, and most important Javascript. Now we are going to explain a complete code, firstly we took a form in HTML and in the form as you can see that we need three main field input text, button, and another button. HTML and CSS are very simple so I think I don't need to explain now come to the javascript. So basically creating a stopwatch we need four functions Start, Stop, Display, and Reset. we also know that time comes under date() function so we are using date() function.
Create an HTML page using javascript for stopwatch there should be one start and stop button and one reset button to reset a timer. we are using internal CSS and javascript for this problem, you can easily convert internal to external in just a few clicks or modification you need to create a .CSS(dot CSS extension) and .JS(dot js extension) and link them to HTML HEAD using <script> and <style> tag with locations of both CSS and JS file. if you feel any issue write for us we will rectify all the problems you faced or you can copy the following text and paste in any editor and save as.HTML or .html (dot HTML) and open with any browser, for example, Google Chrome.
we suggest saving the following program stopwatch.html
Stop Watch program in JavaScript
stopwatch.html
<!DOCTYPE html>
<html>
<head>
<title>Stop watch Using JavaScript</title>
<script language="JavaScript">
var ms = 0;
var state = 0;
function startstop()
{
if (state == 0)
{
state = 1;
then = new Date();
then.setTime(then.getTime() - ms);
}
else
{
state = 0;
now = new Date();
ms = now.getTime() - then.getTime();
document.stpw.time.value = ms;
}
}
function swreset()
{
state = 0;
ms = 0;
document.stpw.time.value = ms;
}
function display()
{
setTimeout("display();", 10);
if (state == 1)
{
now = new Date();
ms = now.getTime() - then.getTime();
document.stpw.time.value = ms;
}
}
</script>
<style>
body{
padding:10%;
background-color: #ddd;
}
.show{
background-color: #020202f5;
border: none;
color: white;
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
}
.button{
background-color: #ec1717;
border: none;
color: white;
margin-left:125px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
</style>
<title>Stopwatch Clock in Javascript</title>
</head>
<body onLoad="display()">
<form name="stpw">
<font size="40px">Time: </font>
<input type="text" Name="time" class="show"><br/><br/>
<input class="button" type="button" name="ssbutton" value="Start / Stop" onClick="startstop()" class="show">
<input class="button" type="button" name="reset" value="Reset" onClick="swreset()">
</form>
</body>
Output: Stop Watch in JavaScript
0 Comments: