Stuck creating a php/javascript countdown timer - javascript

I have been struggling to get my head around this for a while now.
I am attempting to create a countdown timer. Eventually I want it to reset after every 5 hours starting from 8am. But for now I can't figure out if im setting the hours, minutes and seconds correctly to count down together properly.
This is my code so far:
<?php
$timeTo = strtotime('08:00:00').'<br />';
$timeNow = strtotime('now').'<br />';
$differenceInSeconds = $timeTo - $timeNow;
?>
<script type="text/javascript">
var s= "<?php Print($differenceInSeconds);?>";
var h= Math.floor(s/3600);
s-= h*3600;
var m= Math.floor(s/60);
s -= m*60;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
s=s-1;
if(h >= 0 && m >= 0 && s <= -1){
m=m-1;
s=59;
if(h>= 0 && m < 0 && s <= -1){
h=h-1;
m=59;
s=59;
if (s <= -1)
{
//counter ended, reset counter
return;
}
}
}
//Do code for showing the number of seconds here
document.getElementById("timer").innerHTML=(h <= 0 ? ' ' : h+"hr ")+(m <= 0 ? ' ' : m+"min ")+(s < 10 ? '0'+s : s+"secs "); // watch for spelling
}
</script>
Am I barking up the wrong tree here? I am new to times and javascript so finding it difficult.

I will not answer this. I will just try to lead you to the answer.
Note that s <= -1 is logically equivalent to s < 0. There is no confusion about it. Use the second one, it looks more clean.
s=59; and in the next line how on earth will if(h>= 0 && m < 0 && s <= -1 ) ever evaluate to true ?
Similar other logical mistakes are present as well. Take some time and fix this. If you fix this on your own then you're one step closer to becoming a good programmer.
Happy Coding... :)

Related

How do I set "display:none" after 5 seconds to the div i previously set "display:initial" in JavaScript?

I'm trying to create a greeting pop-up and make it appear for only 5 secs, but I don't really get how to make it work.
Thanks in advance!
Here's code:
function greeting(event){
if (time >= 6 && time <= 11 ){
goodMorning.style = 'display:initial'
} else if (time >= 13 && time <= 17){
goodDay.style = 'display:initial'
} else if (time >= 17 && time <= 22) {
goodEvening.style = 'display:initial'
} else {
welcome.style = 'display:initial'
}
};
No need for all that complicated work. Just use a setTimeout to execute a function after a specified number of miliseconds.
var goodEvening = document.getElementById("a");
setTimeout(function(){hide(goodEvening);}, 5000);
function hide(element){
element.style.display="none";
}
<p id="a">Good evening!</p>
jQuery approach:
setTimeout(function(){$('#a').hide();},5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="a">Good evening!</p>

Why is there overflow in this for loop?

This loop loops all the way down to -30808 and I don't know why! I want it to count down to 1 or 0 from 100.
The stop condition is less than num or 1.
What's wrong with it?
Thanks
function first(num){
for (let i = num - 1; i > num || 1; i--){
let numFactorial = i;
console.log(numFactorial);
}
};
first(100);
you are initializing i as num -1 and starting to decrement, which means it is never going to be greater than num. If you are trying to continue the loop as long as i is greater than or equal to 1 then it should be as below.
for (let i = num - 1; i >= 1; i--)
Also anytime you are trying to compare a variable with two different conditions with || or && pls do as below and not i > num || 1 here you are comparing i with num but not with 1.
i > num || i >= 1

checking the time with Date.getSeconds() is not working

I'm using JavaScript to check the user's time every 600ms (so my code runs once a second, but the time is unlikely to shift due to deviation in the setInterval method). My code looks like this:
setCorrectingInterval(function(){
needs_run = false;
switch(date.getDay()) {
case 1:
if(date.getHours() == "8" && date.getMinutes() == "50" && date.getSeconds() == "0") {
next = array.ItemA;
needs_run = true;
}
break;
[abridged, all other ifs and cases are identical except the times and days]
}
if(needs_run == true) {
alert("foobar");
}
}
(setCorrectingInterval is a custom function designed to correct the deviation from setInterval as much as possible)
My issue is that I never get alert("foobar"). I've used console.log() and done some trial-and-error, what I've narrowed it down to is the date.getSeconds() == 0 call. I've tried using (date.getSeconds() <= "5" && date.getSeconds() >= "0"), to no avail. The desired outcome is that, in this case, at 8:50AM on Monday, I get an alert, once.
When I omit the date.getSeconds() call, it works fine and dandy.
My guess is that something with your setCorrectingInterval() function or the date variable is wrong. It works fine with new Date().
;window.setInterval(function(){
var tDate = new Date()
console.log(tDate.getDay(), tDate.getHours(), tDate.getMinutes(), tDate.getSeconds())
needs_run = false;
switch(tDate.getDay()){
case 1:
if(tDate.getHours() == "8" && tDate.getMinutes() == "50" && tDate.getSeconds() == "0"){
//next = array.ItemA;
needs_run = true;
}
break;
case 5:
//No need to compare to string
//if(date.getHours() == "13" && date.getMinutes() >= "50" && date.getSeconds() >= "0") {
if(tDate.getHours() == 13 && tDate.getMinutes() >= 50 && tDate.getSeconds() >= 0){
//next = array.ItemA;
needs_run = true;
}
break;
}
if(needs_run == true){
console.log('foorbar') //alerts can be bad.
}
}, 1000);
More than likely, date is not what you expect it to be. I suppose the following would be more appropriate for your case:
var date = new Date();
switch(date.getDay()) {
...
You commented:
setCorrectingInterval is a custom function designed to correct the
deviation from setInterval as much as possible
What does that even mean? What do you mean by "correct the deviation from setInterval"?

Timer doesnt end when it reaches zero

I have been working on this javascript timer and can't understand why it doesnt stop when the hours, minutes and seconds are equal to zero.
Code:
var s= 18000;
var h= Math.floor(s/3600);
s-= h*3600;
var m= Math.floor(s/60);
s -= m*60;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
if(s == 0 ){
if(m == 0){
h=h-1;
s=59;
m=59;
if(h == 0){
clearInterval(counter);
}
} else {
m=m-1;
s=59;
}
//Do code for showing the number of seconds here
} else {
s = s - 1;
}
document.getElementById("timer").innerHTML=h+'hrs '+m+'min '+s+'secs ';
}
The problem I see here is that you'll decrement h variable by 1 when all time variables - and by time variables I mean h, m and s are set to zero:
if(s == 0 ) {
if(m == 0) {
h=h-1;
s=59;
m=59;
// more code goes here
So h will be -1 and the timer will never stop.
The best I can propose is to rewrite your timer completely, and use only seconds here. Every time the timer function gets invoked you check if s equals to zero - if it is, you stop the timer. Otherwise, you decrement s by 1. To update the inner HTML of #timer element you can recalculate the number of hours, minutes and seconds on the every invocation of timer method - this solution will be a lot more easier to understand and maintain than the chain of nested conditional statements.
The problem appears to be the logic in this section here...
if(s == 0 ){
if(m == 0){
h=h-1; // what if h is also 0 here?? this would set it negative
s=59;
m=59;
if(h == 0){
clearInterval(counter);
}
I think you should be doing your if(h==0) check sooner... before you decrement the values. So you might want to start your if else block with a if (s == 0 && m == 00 && h == 0) and use that to clear the interval. If everything is already zero, you don't want to change any more values.

Basic JavaScript crashes website

Im having problems finishing the codeavengers practice tutorial
when i run this code it just crashes, any idea why?
The purpose is to count how many teenagers from the range of 13-19
var age1 = prompt('Please insert your age');
var age2 = prompt('Please insert your age');
var count = 0;
if (age1 > 12 && age1 < 20 || age2 > 12 && age2 < 20) {
count = count + 1;
}
alert(count);
there is nothing that will stop the while loop! age1 and age2 are static values that are never changing. Also don't forget the semicolins on lines 1 and 2

Categories

Resources