Stopwatch Timer is slower than normal time

Stopwatch Timer is slower than normal time - javascript

I want to make a stopwatch in JavaScript that could count milliseconds, seconds, minutes, and hours. The problem is that it seems to not go at the proper speed, meaning that when I compare it to other timers, it gradually becomes slower than them (i.e the speed at which the timer is counting slows down over time). So suddenly, there are 5-second differences, then it becomes 7-second differences, and so on. Any help would be appreciated.
My code for Stopwatch.
var hr = 0;
var min = 0;
var sec = 0;
var count = 0;
var Startbutton = document.getElementById("Start");
var timer = false;
function start() {
Startbutton.disabled = true; //this wil help to avoid multiple clicking on function
timer = true;
stopwatch();
}
function stop() {
timer = false;
Startbutton.disabled = false;
}
function reset() {
timer = false;
Startbutton.disabled = false;
min = 0;
hr = 0;
sec = 0;
count = 0;
document.getElementById("hr").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("count").innerHTML = "00";
}
function stopwatch() {
if (timer) {
++count;
if (count > 99) {
++sec;
count = 0;
}
if (sec > 59) {
min++;
sec = 0;
}
if (min > 59) {
hr++;
min = 0;
sec = 0;
}
if (hr > 23) {
hr = 0;
sec = 0;
min = 0;
}
var hrString = hr;
var minString = min;
var secString = sec;
var countString = count;
if (hr < 10) {
hrString = "0" + hrString;
}
if (min < 10) {
minString = "0" + minString;
}
if (sec < 10) {
secString = "0" + secString;
}
if (count < 10) {
countString = "0" + countString;
}
document.getElementById("hr").innerHTML = hrString;
document.getElementById("min").innerHTML = minString;
document.getElementById("sec").innerHTML = secString;
document.getElementById("count").innerHTML = countString;
console.log("hello");
setTimeout(stopwatch, 10);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="time">
<span class="digit" id="hr">00</span>
<span class="txt">Hr</span>
<span class="digit" id="min">00</span>
<span class="txt">Min</span>
<span class="digit" id="sec">00</span>
<span class="txt">Sec</span>
<span class="digit" id="count">00</span>
</div>
<div id="btn-container">
<button class="btn" id="Start" onclick="start()">Start</button>
<button class="btn" id="Stop" onclick="stop()">Stop</button>
<button class="btn" id="Reset" onclick="reset()">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Because you don't take into account the time it takes for it to draw the html. Need to re-design to use system clock. See my example.
var hr = 0;
var min = 0;
var sec = 0;
var count = 0;
var Startbutton = document.getElementById("Start");
var timer = false;
var start_time;
function start() {
Startbutton.disabled = true; //this wil help to avoid multiple clicking on function
timer = true;
start_time = (new Date()).getTime();
stopwatch();
}
function stop() {
timer = false;
start_time = null;
Startbutton.disabled = false;
}
function reset() {
timer = false;
start_time = null;
Startbutton.disabled = false;
min = 0;
hr = 0;
sec = 0;
count = 0;
document.getElementById("hr").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("count").innerHTML = "00";
}
function stopwatch() {
var now = (new Date()).getTime();
var diff = now - start_time;
if (timer) {
var str_time = (new Date(diff).toISOString().slice(11, 23)); // 👉️ 15:00:00.000
var hrString = ""+str_time.substring(0,2);
var minString = ""+str_time.substring(3,5);
var secString = ""+str_time.substring(6,8);
var countString =""+ str_time.substring(9,11);
document.getElementById("hr").innerHTML = hrString;
document.getElementById("min").innerHTML = minString;
document.getElementById("sec").innerHTML = secString;
document.getElementById("count").innerHTML = countString;
//console.log("hello");
requestAnimationFrame(stopwatch)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="time">
<span class="digit" id="hr">00</span>
<span class="txt">Hr</span>
<span class="digit" id="min">00</span>
<span class="txt">Min</span>
<span class="digit" id="sec">00</span>
<span class="txt">Sec</span>
<span class="digit" id="count">00</span>
</div>
<div id="btn-container">
<button class="btn" id="Start" onclick="start()">Start</button>
<button class="btn" id="Stop" onclick="stop()">Stop</button>
<button class="btn" id="Reset" onclick="reset()">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

You should take time from system clock. Otherwise time will be relative in your code :)
The code below you can inspect.
var hr = 0;
var min = 0;
var sec = 0;
var count = 0;
var Startbutton = document.getElementById("Start");
var startTime = Date.now();
var timer = false;
function start() {
Startbutton.disabled = true; //this wil help to avoid multiple clicking on function
timer = true;
startTime = Date.now();
stopwatch();
}
function stop() {
timer = false;
Startbutton.disabled = false;
}
function reset() {
timer = false;
Startbutton.disabled = false;
min = 0;
hr = 0;
sec = 0;
count = 0;
document.getElementById("hr").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("count").innerHTML = "00";
}
function stopwatch() {
if (timer) {
var elapsedTime = Date.now() - startTime;
var hr = Math.floor(elapsedTime / (60 * 60 * 1000) % 24).toString().padStart(2, '0');
var min = Math.floor(elapsedTime / (60 * 1000) % 60).toString().padStart(2, '0');
var sec = Math.floor(elapsedTime / 1000 % 60).toString().padStart(2, '0');
var msec = Math.floor(elapsedTime % 1000).toString().padStart(2, '0');
document.getElementById("hr").innerHTML = hr;
document.getElementById("min").innerHTML = min;
document.getElementById("sec").innerHTML = sec;
document.getElementById("count").innerHTML = msec;
setTimeout(stopwatch, 10);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="time">
<span class="digit" id="hr">00</span>
<span class="txt">Hr</span>
<span class="digit" id="min">00</span>
<span class="txt">Min</span>
<span class="digit" id="sec">00</span>
<span class="txt">Sec</span>
<span class="digit" id="count">00</span>
</div>
<div id="btn-container">
<button class="btn" id="Start" onclick="start()">Start</button>
<button class="btn" id="Stop" onclick="stop()">Stop</button>
<button class="btn" id="Reset" onclick="reset()">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Related

Why does using "const data = require("./data.json");" make the startStop function stop working?

I am making a stopwatch app that takes in some data such as your name and Id number before it starts:
//define vars to hold time values
let seconds = 0;
let minutes = 0;
let hours = 0;
//define vars to hold display value
let displayseconds = 0;
let displayminutes = 0;
let displayhours = 0;
let interval = null;
let status = "stopped";
//stopwatch function (logic to detiermine when to increment value)
function stopWatch(){
seconds++;
//Logic to determien when to inciment next value
if(seconds/60 === 1){
seconds = 0;
minutes++;
if(minutes/60 === 1){
minutes = 0;
hours++;
}
}
if(seconds < 10){
displayseconds = "0" +seconds.toString();
}
else{
displayseconds = seconds;
}
if(minutes < 10){
displayminutes = "0" +minutes.toString();
}
else{
displayminutes = minutes;
}
if(hours < 10){
displayhours = "0" +hours.toString();
}
else{
displayhours = hours;
}
//Display updated time value
document.getElementById("display").innerHTML = displayhours + ":" + displayminutes + ":" + displayseconds
}
function startStop(){
if(status === "stopped"){
interval = window.setInterval(stopWatch, 1000);
document.getElementById("startStop").innerHTML = "Stop";
status = "started"
}
else{
first.value = "";
last.value = "";
id.value = "";
window.clearInterval(interval);
document.getElementById("startStop").innerHTML = "Start";
status = "stopped"
reset()
}
}
function reset(){
window.clearInterval(interval);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("display").innerHTML = "00:00:00";
document.getElementById("startStop").innerHTML = "Start";
}
function dbwrite(){
let user = {
first: "Thatcher",
last: "Pacholl",
id: 730626
};
// STEP 2: Adding new data to users object
users.push(user);
// STEP 3: Writing to a file
fs.writeFile("data.json", JSON.stringify(data), err => {
// Checking for errors
if (err) throw err;
console.log("Done writing"); // Success
});
}
but when I add:
const data = require("./data.json");
to the top so that I can acess and write data this function stops working:
function startStop(){
if(status === "stopped"){
interval = window.setInterval(stopWatch, 1000);
document.getElementById("startStop").innerHTML = "Stop";
status = "started"
}
else{
first.value = "";
last.value = "";
id.value = "";
window.clearInterval(interval);
document.getElementById("startStop").innerHTML = "Start";
status = "stopped"
reset()
}
}
in my HTML code this is what starts and stops the stopwatch so I need it but I also need to be able to retrieve that data from the entry fields, what can I do to fix this? For reference here is the HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stopwatch</title>
<link rel="stylesheet" href="styles.css">
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<div class="topnav">
<a><img src="images/C.png" id="logo" width="180" height=auto></a>
<n>Home</n>
News
Contact
About
</div>
<div class="time" id="display">
00:00:00
</div>
<div class="buttons">
<input id="first" class="input" type="text" placeholder="First Name:">
<input id="last" class="input" type="text" placeholder="Last Name:">
<input id="id" class="input" type="password" placeholder="Id Number:" style="width: 150px" >
<button id="startStop" onclick="startStop()">Start</button>
</div>
</div>
</body>
</html>

Trying to compare value of string that are programmatically added with javascript

I'm trying to prevent my laps from counting the same second. So I'm trying to take the current value and evaluate it as != not equal to the previous value before appending it.
Here is the function, and my HTML. Not sure if I can do anything with the ids I set up. I have jquery set up to run in my javascript, so if you have any ideas with that I would be open to listening. There are a couple of things that probably don't have a use that I have not removed yet.
Javascript Function
let seconds = 0;
let minutes = null;
let hours = null;
let startTimer = null;
let time = null;
let isRunning = (false);
let lapContainer = [];
let x;
let outputseconds;
let outputminutes;
let outputhours;
//connection to button
document.getElementById("start").addEventListener("click", start);
document.getElementById("stop").addEventListener("click", stop);
document.getElementById("reset").addEventListener("click", reset);
document.getElementById("lap").addEventListener("click", lap);
document.getElementById("resetLaps").addEventListener("click", resetLaps);
//functions
function start() {
if (isRunning === false) {
isRunning = true;
//interval
startTimer = setInterval(function () {
seconds++;
if (seconds <= 9) {
outputseconds = "0" + seconds;
document.getElementById("seconds").innerHTML = outputseconds;
} else if (seconds <= 60) {
outputseconds = seconds;
document.getElementById("seconds").innerHTML = outputseconds;
} else if (seconds >= 60) {
minutes++;
outputseconds = "00";
outputminutes = "0" + minutes;
document.getElementById("seconds").innerHTML = outputseconds;
document.getElementById("minutes").innerHTML = outputminutes;
seconds = 0;
} else if (minutes >= 9) {
outputminutes = minutes;
document.getElementById("minutes").innerHTML = outputminutes;
} else if (minutes >= 60) {
hours++;
outputminutes = "00";
outputhours = "0" + hours;
document.getElementById("minutes").innerHTML = outputminutes;
document.getElementById("hours").innerHTML = outputhours;
minutes = 0;
} else if (hours > 9) {
outputhours = hours;
document.getElementById("hours").innerHTML = outputhours;
}
}, 1000); //end of interval
} // end of if check
// should this be seperated out as a function???
let startTime = "00";
if (outputseconds > 0) {
if (outputminutes > 0) {
if (outputhours > 0) {
return outputhours + ":" + outputminutes + ":" + outputseconds;
} else {
return startTime + ":" + outputminutes + ":" + outputseconds;
} // hours
} else {
return startTime + ":" + startTime + ":" + outputseconds;
} //minutes
} else {
return startTime + ":" + startTime + ":" + startTime;
} // end of nested if seconds
} //end of start function
function stop() {
clearInterval(startTimer);
isRunning = false;
}
function reset() {
clearInterval(startTimer);
document.getElementById("seconds").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
document.getElementById("hours").innerHTML = "00";
seconds = 0;
minutes = 0;
hours = 0;
isRunning = false;
}
function lap() {
if (isRunning === true) {
//initialize time
let lapTime = start();
//create connection to div
lapContainer = document.getElementById("lapContainer");
// how to check if they equal each other
//create element
const para = document.createElement("p");
//how many laps have been created
let i = document.getElementById("lapContainer").childElementCount;
let index = [i];
//create an index that will add an id to paragraph
para.id = index;
//add the lap to text
para.innerText = lapTime;
let laps = [];
laps = document.getElementById("lapContainer").childNodes[1].textContent;
let lastItem = laps[laps.length - 1];
let currentItem = laps[laps.length];
document.getElementById("test").innerHTML = laps;
if (currentItem !== lastItem) {
lapContainer.appendChild(para);
}
}
}
function resetLaps() {
$(lapContainer).empty();
isRunning = false;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stopwatch</title>
<meta name="description" content="A simple stopwatch application" />
<meta name="author" content="****" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- your content here... -->
<div class="menu">
Timer
Alarm
</div>
<div class="stopwatch-container">
<div class="stopwatch-wrapper">
<div class="stopwatch-button-container">
<button type="button" id="start">START</button>
<button type="button" id="stop">STOP</button>
<button type="button" id="reset">RESET</button>
<button type="button" id="lap">LAP</button>
<button type="button" id="resetLaps">RESET LAPS</button>
</div>
<div class="rectangle-container">
<div class="rectangle">
<p id="textWrapper">
<span id="hours">00</span>:<span id="minutes">00</span>:<span
id="seconds"
>00</span
>
</p>
</div>
</div>
</div>
</div>
<div class="lineBreak"></div>
<div id="lapContainer" class="lap-container"></div>
<p id="test"></p>
<script src="./scripts/scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>

Few things you might need to do:
1.When you set the laps array you need to get the array of texts of the all nodes, not just a text of the first node:
//laps = document.getElementById("lapContainer").childNodes[1].textContent;
laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);
2.When you set currentItem you can not use laps[laps.length] because your new value not in the array yet and so it will return undefined. Instead you can just use your lapTime value:
let lastItem = laps[laps.length - 1];
//let currentItem = laps[laps.length];
let currentItem = lapTime;
Example:
let isRunning = Boolean(true);
let lapContainer = [];
document.querySelector('#lap').addEventListener('click', () => lap());
function lap() {
if (isRunning === true) {
//initialize time
let lapTime = start();
//create connection to div
lapContainer = document.getElementById("lapContainer");
// how to check if they equal each other
//create element
const para = document.createElement("p");
//how many laps have been created
let i = document.getElementById("lapContainer").childElementCount;
let index = [i];
//create an index that will add an id to paragraph
para.id = index;
//add the lap to text
para.innerText = lapTime;
let laps = [];
//laps = document.getElementById("lapContainer").childNodes[1].textContent;
laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);
let lastItem = laps[laps.length - 1];
//let currentItem = laps[laps.length];
let currentItem = lapTime;
document.getElementById("test").innerHTML = laps;
if (currentItem !== lastItem) {
lapContainer.appendChild(para);
}
}
}
const start = () => new Date().toString();
<body>
<!-- your content here... -->
<div class="menu">
Timer
Alarm
</div>
<div class="stopwatch-container">
<div class="stopwatch-wrapper">
<div class="stopwatch-button-container">
<button type="button" id="start">START</button>
<button type="button" id="stop">STOP</button>
<button type="button" id="reset">RESET</button>
<button type="button" id="lap">LAP</button>
<button type="button" id="resetLaps">RESET LAPS</button>
</div>
<div class="rectangle-container">
<div class="rectangle">
<p id="textWrapper">
<span id="hours">00</span>:<span id="minutes">00</span>:<span
id="seconds"
>00</span
>
</p>
</div>
</div>
</div>
</div>
<div class="lineBreak"></div>
<div id="lapContainer" class="lap-container"></div>
<p id="test"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

Another stopwatch using JS?

The code is creating a responsive page. But every time I press stop and then start again the countdown speeds up. Seconds pass like milliseconds and mins pass like seconds after about 10 or so stops and starts. What might be the issue here?
P.S. I haven't written code for the reset button.
let ms = 0;
let secs = 0;
let mins =0;
let flag = true;
var setIntID;
watchFunction =()=> {
if(flag){
ms +=4 ;
document.getElementById('msecs').innerText = `${ms}`;
if(ms == 1000){
ms =0;
secs++
document.getElementById('secs').innerText = `${secs}:`
if(secs == 60){
mins++;
document.getElementById('min').innerText = `${mins}:`;
secs = 0;
}
}}}
document.getElementById("start").addEventListener('click', function(){
flag = true;
var setIntID = setInterval(watchFunction,1);
console.log(flag) //tracker
})
document.getElementById("stop").addEventListener('click', function(){
flag = false;
console.log(flag); //tracker
clearInterval(setIntID);
})
<div id="mainDiv">
<div>
<span id="min">0:</span>
<span id="secs">0:</span>
<span id="msecs">0</span>
<div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
</div>
</div>
</div>

You have declared setIntID as a local variable in click for the start button, and therefore it isn't cleared in the click function for the stopbutton.
let ms = 0;
let secs = 0;
let mins =0;
let flag = false;
var setIntID;
watchFunction =()=> {
if(flag){
ms +=4 ;
document.getElementById('msecs').innerText = `${ms}`;
if(ms == 1000){
ms =0;
secs++
document.getElementById('secs').innerText = `${secs}:`
if(secs == 60){
mins++;
document.getElementById('min').innerText = `${mins}:`;
secs = 0;
}
}}}
document.getElementById("start").addEventListener('click', function(){
if (flag) return;
flag = true;
setIntID = setInterval(watchFunction,1);
console.log(flag) //tracker
})
document.getElementById("stop").addEventListener('click', function(){
flag = false;
console.log(flag); //tracker
clearInterval(setIntID);
})
<div id="mainDiv">
<div>
<span id="min">0:</span>
<span id="secs">0:</span>
<span id="msecs">0</span>
<div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
</div>
</div>
</div>

I think that solves the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="mainDiv">
<div>
<span id="min">0:</span>
<span id="secs">0:</span>
<span id="msecs">0</span>
<div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
</div>
</div>
</div>
<script>
let ms = 0;
let secs = 0;
let mins =0;
let flag = true;
var setIntID;
var running_instance_count = 0;
watchFunction =()=> {
if(flag){
ms +=4 ;
document.getElementById('msecs').innerText = `${ms}`;
if(ms == 1000){
ms =0;
secs++
document.getElementById('secs').innerText = `${secs}:`
if(secs == 60){
mins++;
document.getElementById('min').innerText = `${mins}:`;
secs = 0;
}
}}}
document.getElementById("start").addEventListener('click', function(){
flag = true;
running_instance_count++;
if(running_instance_count == 1){
setIntID = setInterval(watchFunction,1);}
console.log(flag) //tracker
})
document.getElementById("stop").addEventListener('click', function(){
flag = false;
running_instance_count = 0;
console.log(flag); //tracker
clearInterval(setIntID);
})
document.getElementById('reset').addEventListener('click', function(){
flag = false;
ms=0; secs=0; mins=0;
running_instance_count = 0;
clearInterval(setIntID);
document.getElementById('msecs').innerText = `${0}`;
document.getElementById('secs').innerText = `${0}:`;
document.getElementById('min').innerText = `${0}:`;
})
</script>
</body>
</html>

I see a time boost now, but on it's it's first click it's actually slow at ms +=4 so I changed it to ms +=10. Also, there's no usage of the flag on the event handler which would help control the setInterval() and clearInterval() so that there is only one existing at a time. Everytime the "start" button was clicked in OP code there was another setInterval() added, therefore the time intervals combined accelerated. In the example, there's only one event handler that toggles between setInterval() and clearInterval().
let mil = 0;
let sec = 0;
let min = 0;
let flag = false;
let setIntID;
const form = document.forms.stopWatch;
const fc = form.elements;
const timer = () => {
if (flag) {
fc.milliseconds.value = mil += 10;
if (mil == 1000) {
mil = 0;
sec++;
if (sec < 10) sec = '0' + sec;
fc.seconds.value = sec + ' :';
if (sec == 60) {
min++;
if (min < 10) min = '0' + min;
fc.minutes.value = min + ' :';
sec = 0;
}
}
}
}
fc.toggle.addEventListener('click', function() {
if (!flag) {
flag = true;
setIntID = setInterval(timer, 1);
return
}
clearInterval(setIntID);
flag = false;
});
form.onreset = e => {
mil = 0;
sec = 0;
min = 0;
clearInterval(setIntID);
flag = false;
}
<form id="stopWatch">
<fieldset>
<output id="minutes">00 :</output>
<output id="seconds">00 :</output>
<output id="milliseconds">000</output><br>
<button id="toggle" type='button'>Start/Stop</button>
<button type="reset">Reset</button>
</fieldset>
</form>

how i am going to clearInterval when i press stop btn?

i am truly new with programing with javaScript so i just start to learn it, it will be good you are going to reply using a simple js code
my code does'nt stop when i press stop i want to clear the interval that i named with myTimer if i didn't put setInterval inside the function it just work directly and if there is any way to make my code more short please mentiot it.
const // my variable
myHour = document.getElementById("hours"),
myMin = document.getElementById("min"),
mySecond = document.getElementById("second"),
myMiliSecond = document.getElementById("dsecond"),
startchrono = document.getElementById("start"),
getLap = document.getElementById("lap"),
stopchrono = document.getElementById("stop"),
resetchrono = document.getElementById("reset"),
result = document.getElementById("result");
let // variable
milisecond = 0,
second = 0,
minute = 0,
hour = 0,
chronoRun = false,
round = 0;
function decoration(item) // this function is for add 0 if second or minute less than 10
{
if (String(item).length < 2) {
item = "0" + item;
}
return item;
}
function lapset() // function that create a new row in the table to save rounds
{
round++;
let // decoration add 0 if number under 10
ds = decoration(milisecond),
s = decoration(second),
m = decoration(minute),
h = decoration(hour);
if (round <= 10) {
const // insert the row in table
tr = result.insertRow(-1);
tr.insertCell(0).innerHTML = round;
tr.insertCell(-1).innerHTML = h + ":" + m + ":" + s + ":" + ds;
} else if (round <= 11) {
tr = result.insertRow(-1);
tr.insertCell(-0).innerHTML = "-";
tr.insertCell(-1).innerHTML = "you can't add any more laps";
getLap.setAttribute("disabled", "true");
}
}
function chrono() //chrono start
{
// chrono
milisecond++;
// make sure that minute, second have to be less than 60
if (milisecond > 10) {
milisecond = 0;
second++;
}
if (second > 59) {
second = 0;
minute++;
}
if (minute > 59) {
minute = 0;
hour++;
}
let // decoration add 0 if number under 10
ds = decoration(milisecond),
s = decoration(second),
m = decoration(minute),
h = decoration(hour);
myMiliSecond.innerHTML = ds;
mySecond.innerHTML = s;
myMin.innerHTML = m;
myHour.innerHTML = h;
startchrono.setAttribute("disabled", "true");
}
// function chronoStarts() {}
const myTimer = () => {
setInterval(chrono, 100);
};
const test = () => {
return clearInterval(myTimer);
};
startchrono.addEventListener("click", myTimer);
getLap.addEventListener("click", lapset);
stopchrono.addEventListener("click", test);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="chrono">
<div id="timer">
<span id="hours" class="time">00</span>
<span class="sep">:</span>
<span id="min" class="time">00</span>
<span class="sep">:</span>
<span id="second" class="time">00</span>
<span class="sep">:</span>
<span id="dsecond" class="time">00</span>
</div>
<div id="btnarea">
<button id="start" class="btnevent">start</button>
<button id="lap" class="btnevent">lap</button>
<button id="stop" class="btnevent">stop</button>
<button id="reset" class="btnevent">reset</button>
</div>
<table id="result">
<caption>saved lap</caption>
<tbody>
<tr>
<th class="round">round</th>
<th class="laptime">time</th>
</tr>
</tbody>
</table>
</div>
<script src="newpagescript.js"></script>
</body>
</html>
and that is my html code i think every is ok with my code but if there any issue i am looking for adives

You need to get the return value of the setInterval function and then pass that value as a parameter in the clearInterval function. For example, see below:
`// function chronoStarts() {}
let intervalId = 0;
const myTimer = () => {intervalId = setInterval(chrono, 100);};
const test = () => {
clearInterval(intervalId);
};
startchrono.addEventListener("click", myTimer);
getLap.addEventListener("click", lapset);
stopchrono.addEventListener("click", test);`

how to add a save button in timer

i have no idea how to save and show out put next to stopwatch:
00:01:30 , 00:01:30 something like this.
its not important but can i make stopwatch to stop on some time like 45 min
i created a button "save" was playing whit code but i have no idea how to make it save output and show
i was trying to find in internet but could not find
I appreciate any help.
var ss = document.getElementsByClassName('stopwatch');
[].forEach.call(ss, function(s) {
var currentTimer = 0,
interval = 0,
lastUpdateTime = new Date().getTime(),
start = s.querySelector('button.start'),
stop = s.querySelector('button.stop'),
reset = s.querySelector('button.reset'),
mins = s.querySelector('span.minutes'),
secs = s.querySelector('span.seconds'),
cents = s.querySelector('span.centiseconds');
start.addEventListener('click', startTimer);
stop.addEventListener('click', stopTimer);
reset.addEventListener('click', resetTimer);
function pad(n) {
return ('00' + n).substr(-2);
}
function update() {
var now = new Date().getTime(),
dt = now - lastUpdateTime;
currentTimer += dt;
var time = new Date(currentTimer);
mins.innerHTML = pad(time.getMinutes());
secs.innerHTML = pad(time.getSeconds());
cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));
lastUpdateTime = now;
}
function startTimer() {
if (!interval) {
lastUpdateTime = new Date().getTime();
interval = setInterval(update, 1);
}
}
function stopTimer() {
clearInterval(interval);
interval = 0;
}
function resetTimer() {
stopTimer();
currentTimer = 0;
mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stopwatch</title>
</head>
<body>
<h1>Stopwatch</h1>
<div class="stopwatch">
<div class="controls">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
<button class="save">save</button>
</div>
<div class="display">
<span class="minutes">00</span>:<span class="seconds">00</span>:<span class="centiseconds">00</span>
</div>
</div>
<script src="stopwatch.js"></script>
</body>
</html>

if i correct understand - here is solution. You still need some validations on input fields, checks on current timer and ithers, but it's worked version if user takes into account all these nuances himself.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stopwatch</title>
</head>
<body>
<h1>Stopwatch</h1>
<div class="stopwatch">
<div class="controls">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
||stop on:
<input class="min" placeholder="min" type="text" style="width: 30px" />:
<input class="sec" placeholder="sec" type="text" style="width: 30px" />:
<input class="ms" placeholder="ms" type="text" style="width: 30px" />
<button class="save">save</button>
<div class="savedTimeBlock" style="display: none">
saved time:
<div style="display: inline-block" class="time"></div>
</div>
</div>
<div class="display">
<span class="minutes">00</span>:<span class="seconds">00</span>:<span
class="centiseconds"
>00</span
>
</div>
</div>
<script src="stopwatch.js"></script>
</body>
</html>
stopwatch.js
var ss = document.getElementsByClassName("stopwatch");
[].forEach.call(ss, function(s) {
var currentTimer = 0,
interval = 0,
lastUpdateTime = new Date().getTime(),
timeToStop = {
min:null,
sec:null,
ms:null
},
start = s.querySelector("button.start"),
stop = s.querySelector("button.stop"),
reset = s.querySelector("button.reset"),
mins = s.querySelector("span.minutes"),
secs = s.querySelector("span.seconds"),
cents = s.querySelector("span.centiseconds"),
minutes = s.querySelector(".min"),
seconds = s.querySelector(".sec"),
milliseconds = s.querySelector(".ms"),
savedTimeBlock = s.querySelector(".savedTimeBlock"),
time = s.querySelector(".time"),
save = s.querySelector(".save");
start.addEventListener("click", startTimer);
stop.addEventListener("click", stopTimer);
save.addEventListener("click", saveStopTime);
reset.addEventListener("click", resetTimer);
function pad(n) {
return ("00" + n).substr(-2);
}
function saveStopTime() {
let min = timeToStop.min = pad(+minutes.value),
sec = timeToStop.sec = pad(+seconds.value),
ms = timeToStop.ms = pad(+milliseconds.value);
if (+min || +sec || +ms) {
showSavedTimeBlock(min, sec, ms)
} else {
killSavedTimeBlock()
}
}
const showSavedTimeBlock = (min, sec, ms) => {
savedTimeBlock.style.display = 'inline-block';
time.innerText = `${min}:${sec}:${ms}:`
};
const killSavedTimeBlock = () => {
savedTimeBlock.style.display = 'none';
timeToStop.min = null;
timeToStop.sec = null;
timeToStop.ms = null;
time.innerText = ''
};
function update() {
var now = new Date().getTime(),
dt = now - lastUpdateTime;
currentTimer += dt;
var time = new Date(currentTimer);
let min = pad(time.getMinutes());
let sec = pad(time.getSeconds());
let ms = pad(Math.floor(time.getMilliseconds() / 10));
mins.innerHTML = min;
secs.innerHTML = sec;
cents.innerHTML = ms;
let ts = timeToStop;
if (ts.min === min && ts.sec === sec && ts.ms === ms) {
stopTimer()
} else {
lastUpdateTime = now;
}
}
function startTimer() {
if (!interval) {
lastUpdateTime = new Date().getTime();
interval = setInterval(update, 1);
}
}
function stopTimer() {
clearInterval(interval);
interval = 0;
}
function resetTimer() {
stopTimer();
killSavedTimeBlock()
currentTimer = 0;
mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
}
});

We Keep Coding

JavaScript is the programming language of the Web.

Stopwatch Timer is slower than normal time - javascript

Related

Why does using "const data = require("./data.json");" make the startStop function stop working?

Trying to compare value of string that are programmatically added with javascript

Another stopwatch using JS?

how i am going to clearInterval when i press stop btn?

how to add a save button in timer

Categories

Resources