I wrote a code - a timer that measures the number of seconds entered. While the timer counts down the seconds when I lock the phone screen, after unlocking the screen after a long time, the timer stopped a few seconds after locking the screen. Is there any way to fix this?
document.getElementById('btn').addEventListener('click',function(){
var workSeconds = parseInt(document.getElementById('work-seconds').value);
var workSecondsCount = workSeconds;
var worktimer = setInterval(workSecCount,1000);
function workSecCount(){
workSecondsCount--;
workSecondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + workSecondsCount : document.getElementById('workSecs').textContent = workSecondsCount;
if(workSecondsCount == 0){
document.getElementById('workSecs').textContent = "DONE";
workSecondsCount = workSeconds;
clearInterval(worktimer);
}
};
});
<input type="number" id="work-seconds" placeholder="seconds" min="0">
<button id="btn">START</button>
<p>Work Timer : <span id="workSecs"></span></p>
instead of workSecondsCount you need to rely on current time, then you can compensate time gaps.
var worktimer = 0;
document.getElementById('btn').addEventListener('click',function(){
if (!worktimer) clearInterval(worktimer);
var workSeconds = parseInt(document.getElementById('work-seconds').value);
var workSecondsCount = new Date().getTime() + workSeconds * 1000;
function workSecCount(){
const secondsCount = Math.ceil((workSecondsCount - new Date().getTime()) / 1000);
secondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + secondsCount : document.getElementById('workSecs').textContent = secondsCount;
if(secondsCount <= 0){
document.getElementById('workSecs').textContent = "DONE";
if (worktimer) {
clearInterval(worktimer);
worktimer = 0;
}
}
};
workSecCount();
worktimer = setInterval(workSecCount,1000);
});
Related
I'm learning javascript and I want to create a simple clock. I want for user to be able to change minutes by entering a number in textbox and pressing a button, so when that number is displayed and when the seconds are counted to 60, that displayed number increase by 1, my code won't work, help pls:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
return seconds = 0;
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
return minutes2 = 0;
}
rezultat = (seconds + minutes2 + minutes);
el2.innerText = rezultat;
}
var cancel = setInterval(incrementMinutes, 60000);
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>
You have a few problems in your code. The main mistake is that your variable minutes is not defined in the function incrementMinutes() where you are trying to use it. You have to calculate it again.
Other improvements that you can make are:
Remove the return in your incrementSeconds and incrementMinutes function
Have only 1 setInterval, and call incrementMinutes when seconds reach 60.
You can see a snippet here below:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
incrementMinutes();
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
minutes2 = 0;
}
rezultat = (minutes2 + parseInt(document.querySelector("#value").value));
el2.innerText = rezultat;
}
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
To show here the behavior I made a minute to 5 seconds.
As a formatting improvement, if you want to show in result min:sec you can do this
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
To build the string with leading zeros.
I have removed the returns because they were not neccessary you can inside reset the value there is no need to return it.
var seconds = 0;
var min = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var secCounter = document.getElementById("seconds-counter");
var mintCounter = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
}
secCounter.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
function incrementMinutes() {
min += 1;
if (min === 60) {
min = 0;
}
tempMin = min;
tempSec = seconds;
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
rezultat = (min+":"+seconds);
mintCounter.innerText = rezultat;
min = tempMin;
seconds = tempSec;
}
// for debugging to 5 sec
var cancel = setInterval(incrementMinutes, 5000);
dugme.addEventListener("click", function() {
var inpMinutes = parseInt(document.querySelector("#value").value);
min = inpMinutes;
mintCounter.innerText = min;
})
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>
So i want to make a program that start countingdown from a value that you choose but the issue is when i try to bring the value to javascript it dosen't work but when i type the value in html it work
here is my html code
<body>
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>
<script src="lol.js"></script>
and here is my javascript code
var count = document.getElementById("count"),
seconds = document.getElementById("time").value ,
btn = document.getElementById("button"),
secondPass;
countDown = setInterval(function() {
secondPass()
} , 1000);
btn.onclick =
function secondPass(){
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}
The problem in your code was that you were trying to get the value before it was entered.
If I understood correctly, you wanted this:
var count = document.getElementById("count"),
btn = document.getElementById("button"),
secondPass;
btn.addEventListener("click", secondPass);
function secondPass() {
var seconds = document.getElementById("time").value
var countDown = setInterval(function () {
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
if (seconds > 0) {
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}, 1000);
}
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>
Main mistake - on time when you declare seconds variable - time input is empty.
I fixed your example, so you can figure out what was wrong
var count = document.getElementById("count"),
seconds,
btn = document.getElementById("button"),
countDown
btn.onclick = function() {
seconds = document.getElementById("time").value;
countDown = setInterval(function() {
secondPass()
}, 1000);
}
function secondPass(){
console.log('S', seconds)
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}
I'm creating an interval timer. I want the number to count down to 0 after entering the number and pressing the button, if it already counts down to 0 then the function starts from the beginning. In my code fukncja counts down to 0, but the next countdown doesn't end with 0, but it counts down to minus numbers. Why doesn't it work? Can you help?
var workI = 0;
var countDownI = 0;
document.getElementById('btn').addEventListener('click',function(){
var workValue = Math.ceil(document.getElementById('work-seconds').value);
if(!workI)clearInterval(workI);
function countDown(){
var workSec = new Date().getTime() + workValue * 1000;
countWorkSec();
workI = setInterval(countWorkSec,1000);
function countWorkSec(){
var countSec = Math.ceil((workSec - new Date().getTime()) / 1000);
countSec < 10 ? document.getElementById('workSecs').textContent = "0" + countSec : document.getElementById('workSecs').textContent = countSec;
if(countSec == 0){
clearInterval(workI);
workI = 0;
}
};
}
countDown();
countDownI = setInterval(countDown,workValue * 1000);
});
<p>Work</p>
<input type="number" id="work-seconds" placeholder="seconds" min="0">
<br>
<br>
<button id="btn">START</button>
<p>Work Timer : <span id="workSecs"></span></p>
var workI = 0;
var countDownI = 0;
document.getElementById('btn').addEventListener('click',function(){
var workValue = Math.ceil(document.getElementById('work-seconds').value);
function countDown(){
if(workI)clearInterval(workI); // Change - Clearinterval when countDown starts
var workSec = new Date().getTime() + workValue * 1000;
countWorkSec();
workI = setInterval(countWorkSec,1000);
function countWorkSec(){
var countSec = Math.ceil((workSec - new Date().getTime()) / 1000);
countSec < 10 ? document.getElementById('workSecs').textContent = "0" + countSec : document.getElementById('workSecs').textContent = countSec;
if(countSec == 0){
clearInterval(workI);
workI = 0;
}
};
}
countDown();
countDownI = setInterval(countDown, (workValue + 1) * 1000);
});
I have an online exam test project with countdown timer. I have start time (when form is opened) and end time(when we click submit button). My problem is, i can't save start time to database. How to solve it?
<script type="text/javascript">
var hoursleft = 0;
/*get value from database*/
var minutesleft = <?php echo $menit->alat_waktu ?>;
var secondsleft = 0;
var finishedtext = "SELESAI";
var end1;
if(localStorage.getItem("end1"))
{
end1 = new Date(localStorage.getItem("end1"));
}
else
{
end1 = new Date();
end1.setHours(end1.getHours()+hoursleft);
end1.setMinutes(end1.getMinutes()+minutesleft);
end1.setSeconds(end1.getSeconds()+secondsleft);
}
var counter = function () {
var now = new Date();
var datediff = end1 - now;
diff = new Date(datediff);
var milliseconds = parseInt((diff%1000)/100)
var sec = parseInt((diff/1000)%60)
var mins = parseInt((diff/(1000*60))%60)
var hours = parseInt((diff/(1000*60*60))%24);
if(hours < 10) {
hours = "0" + hours;
}
if (mins < 10) {
mins = "0" + mins;
}
if (sec < 10) {
sec = "0" + sec;
}
if(now >= end1) {
clearTimeout(interval);
localStorage.setItem("end1", null);
localStorage.removeItem("end1");
document.getElementById('divCounter').innerHTML = finishedtext;
if(confirm("TIME OUT !!!"))
clearInterval(counter);
window.location.href= "http://localhost/psiko";
document.getElementById('myform').submit();
} else {
var value = hours + ":" + mins + ":" + sec;
/*--------save variable value to db----------*/
/*save countdown timer when form is opened*/
// document.myform.waktu_awal.value = end1;
/*save countdown timer when submit button is clicked*/
document.myform.waktu_akhir.value = value;
/*------------------------------------------------*/
localStorage.setItem("end1", end1);
document.getElementById('divCounter').innerHTML = value;
}
}
var interval = setInterval(counter, 1000);
</script>
waktu_awal is start_time and waktu_akhir is end_time
I already do this in my script
$waktu_awal = $_POST;
$waktu_akhir = $_POST;
echo "<td> <input type=\"hidden\" name=\"waktu_awal\" value=\"".$waktu_awal."\"></td>";
echo "<td> <input type=\"hidden\" name=\"waktu_akhir\" value=\"".$waktu_akhir."\"></td>";
var value = hours + ":" + mins + ":" + sec;
/*--------menyimpan nilai variabel ke db----------*/
/*save countdown timer when form is open*/
document.myform.waktu_awal.value = <--- which variable value should I write in here as my start time?
/*save countdown timer when submit*/
document.myform.waktu_akhir.value = value;
/*------------------------------------------------*/
I want my button to change color if clicked but it seems not working in this JQuery-Mobile. and If its clicked it seems like it increases the time count speed i dont know why.
Any help please guys.
var seconds = 0;
var minutes = 0;
var timer = null;
function toggle(ths) {
var clicked = $(ths).val();
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
$("#lblType").html(clicked);
$("#setCount").html(" minutes : " + minutes + " seconds : " + seconds);
//duration time
seconds = seconds + 1;
if (seconds % 60 == 0) {
minutes += 1;
seconds = 0;
}
timer = timer = setTimeout("toggle()", 1000);
}
try :
timer=setTimeout(function(){
toogle();
},1000);