4/25/2016

Create a Stopwatch in JavaScript

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.

stopwatch using javascript with start pause and reset button

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

beautiful stopwatch by html and javascript with counter timing

No comments:

Post a Comment