My goal is to create a stopwatch using JavaScript that can start and stop the timer. I want to store the time data in my MySQL database when the user presses the stop button. However, I am facing issues with the pause buttons not functioning properly.
function stopwatch(text) {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var ms = d.getMilliseconds();
document.stopwatchclock.stpwtch.value = +h + " : " + m + " : " + s + " : " + ms;
SD = window.setTimeout("stopwatch();", 100);
theResult = document.stopwatchclock.stpwtch.value;
}
function resetIt() {
if (document.stopwatchclock.stopreset.value == "Pause") {
stopResult = document.stopwatchclock.stpwtch.value;
window.clearTimeout(stopResult);
}
if (document.stopwatchclock.stopreset.value == "Pause") {
document.stopwatchclock.stopreset.value = "Restart";
}
}
.center {
width: 50%;
margin-left: 25%;
}
.mainblock {
background-color: #07c1cc;
}
.stopWatchClass {
background-color: #07c1cc;
display: block;
}
#stopwatchclock input {
margin-bottom: 10px;
width: 120px;
}
<html>
<head>
<title>Stopwatch Application ( Using JAVASCRIPT + HTML + CSS )</title>
</head>
<body>
<center>
<div class="mainblock">
<h1><b title="Stopwatch Application ( Using JAVASCRIPT + HTML + CSS )">Stopwatch Application</b></h1>
<form name="stopwatchclock" id="stopwatchclock">
<input type="text" size="16" class="" name="stpwtch" value=" 00 : 00 : 00 : 00" title="Initially blank" />
<input type="button" name="theButton" id="start" onClick="stopwatch();" value="Start" title="The 'START' button is start the stopwatch. An already started stopwatch cannot be started again." /><br />
<div id="morefeature">
<input type="button" name="stopreset" value="Pause" id="Pause" onClick="resetIt(this.value);" title="Once you will click on 'RESET' button will entirely reset the stopwatch so that it can be started again." />
<div>
</form>
</div>
<div id="stopwatchresult"></div>
</center>
</body>