I have been looking at this for a few hours and cant seem to see why my code isnt starting the timer countdown when the button is pressed. Any help would be much appreciated, thanks!
HTML
<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">00</div>
<input type="button" value="Start" onclick="startTimer()"/>
JavaScript
var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);
function setTimer(){
var element = document.getElementById("timerHours");
hours = parseFloat(element.innerHTML);
element = document.getElementById("timerMins");
minutes = parseFloat(element.innerHTML);
element = document.getElementById("timerSecs");
seconds = parseFloat(element.innerHTML);
timerDefault.setHours(hours, minutes, seconds);
}
function startTimer() {
setTimer();
var h = timerDefault.getHours();
var m = timerDefault.getMinutes();
var s = timerDefault.getSeconds();
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("timerHours").innerHTML = h;
document.getElementById("timerMins").innerHTML = m;
document.getElementById("timerSecs").innerHTML = s;
timerDefault.setSeconds(timerDefault.getSeconds() - 1);
if (h == 0 && m == 0 && s == 0) clearTimeout(t)
t = setTimeout(startTimer, 1000);
}
Your "startTimer()" routine always calls "setTimer()", which (re-)initializes that Date object based on the contents of the HTML elements. The routine then backs the seconds down by 1, but it never updates the HTML. Thus, the next time the timer goes off, the Date instance ("timerDefault") is reset to 00:00:00.
With a couple changes to your code you can see it count down a bit.
<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">50</div>
<input type="button" value="Start" onclick="startTimer()"/>
var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);
function setTimer(){
var element = document.getElementById("timerHours");
hours = parseFloat(element.innerHTML);
element = document.getElementById("timerMins");
minutes = parseFloat(element.innerHTML);
element = document.getElementById("timerSecs");
seconds = parseFloat(element.innerHTML);
timerDefault.setHours(hours, minutes, seconds);
}
function startTimer() {
setTimer();
timerDefault.setSeconds(timerDefault.getSeconds() - 1);
var h = timerDefault.getHours();
var m = timerDefault.getMinutes();
var s = timerDefault.getSeconds();
console.log("Hi! " + h + " " + m + " " + s);
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("timerHours").innerHTML = h;
document.getElementById("timerMins").innerHTML = m;
document.getElementById("timerSecs").innerHTML = s;
if (h == 0 && m == 0 && s == 0) clearTimeout(t)
t = setTimeout(startTimer, 1000);
}
Related
so here is my html :
<div id="MyClockDisplay" class="" onload="showTime()">
clock
</div>
and its my java script :
function showTime(){
let date = new Date();
let h = date.getHours(); // 0 - 23
let m = date.getMinutes(); // 0 - 59
let s = date.getSeconds(); // 0 - 59
let session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
let time = h + ":" + m + ":" + s + " " + session;
setTimeout(showTime, 1000);
document.getElementById("MyClockDisplay").innerHTML = time;
}
when i insert onclick (in html ) the java script code works perfectly
but i want the clock to start workiing when my page loads
but onload is not working
could someone help me pls?
onload is not a valid attribute of a div element (it only works for <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>). If you want the JS to execute immediately after loading, move the script tag immediately under the element.
<div id="MyClockDisplay" class="" onload="showTime()">
clock
</div>
<script>
function showTime() {
let date = new Date();
let h = date.getHours(); // 0 - 23
let m = date.getMinutes(); // 0 - 59
let s = date.getSeconds(); // 0 - 59
let session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
let time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerHTML = time;
}
setTimeout(showTime, 1000);
</script>
This is how the JavaScript looks like. I tried searching for solutions but couldn't find. Please I need detailed solutions. Online I kept seeing cookies but I don't know how to use it in this case.
function countDown() {
var now = new Date();
var eventDate = new Date(2020, 5, 22);
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime - currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s/60);
var h = Math.floor(m/60);
var d = Math.floor(h/24);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h: h;
m = (m < 10) ? "0" + m: m;
s = (s < 10) ? "0" + s: s;
document.getElementById("days").textContent = d;
document.getElementById("days").innerText = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
var t = setTimeout(countDown, 1000);
if (d == 0 && h == 0 && m == 0 && s == 0) {
clearTimeout(t);
document.getElementById("demo").innerHTML = "Happy Birthday!"
}
}
countDown();
</script>
The trouble with your code is in the date checking logic.
Checking with == will only give you a truthy response if the datetime (or part thereof) is the same as the value you're checking it against.
However, you need to check whether the date is already past. To do this, you need to use a < or <= operator.
Here's an example of what I mean. The info is console.loged instead, you can re-implement the DOM editing you have in your question.
function countDown() {
var now = new Date();
var eventDate = new Date(2020, 4, 22); // 22 May 2020
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime - currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s/60);
var h = Math.floor(m/60);
var d = Math.floor(h/24);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h: h;
m = (m < 10) ? "0" + m: m;
s = (s < 10) ? "0" + s: s;
var t = setTimeout(countDown, 1000);
// This if statement only runs exactly on eventDate
if (d == 0 && h == 0 && m == 0 && s == 0) {
document.getElementById("demo").innerHTML = "Happy Birthday!"
}
// This if statement will run if we're past or exactly on eventDate
if (remTime <= 0) {
clearTimeout(t);
}
// This console.log shows that the numbers become negative after the date
console.log(remTime, d,h,m,s);
}
countDown();
I am trying to get a div element to update once one minute goes by from.
I have a function in Javascript that counts down to a specific time in the day, however, I would like to use JQuery so that as the timer is counting down when the minute changes instead of having to refresh the browser it does it without refreshing.
I had a timer that displayed hours, minutes, seconds counting down to a specific setHours() using a setTimout to countdown.
function countdown() {
var now = new Date();
var eventDate = new Date();
var currentTiime = now.getTime();
var eventTime = eventDate.setHours(16, 30, 0);
var remTime = eventTime - currentTiime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
if (now.getHours() >= 9 && currentTiime < eventTime) {
setTimeout(countdown, 1000);
}
At the moment I have a countdown that countdown to 16:30 but displays as:
Hours: minutes: seconds: I would like Hours:xx minutes:xx and when the minute goes down 1 minute it shows in the div without refreshing the page.
Here is a solution that has a bit of JQuery strewn in. Please note that your Javascript solution will work as well. The only difference is that this calls setInterval instead of setTimeout ('setInterval' vs 'setTimeout')
Please try running the code snippet here or on JSFiddle: https://jsfiddle.net/raghav710/tbvmj4px/ . This updates the value without refreshing the page.
EDIT: Added condition to handle when the current time is greater than event time
function get_elapsed_time_string(total_seconds) {
var now = new Date();
var eventDate = new Date();
var currentTime = now.getTime();
var eventTime = eventDate.setHours(17, 00, 0);
var remTime = eventTime - currentTime;
if(remTime <= 0){
clearInterval(interval_id);
$("#hours").html(0);
$("#minutes").html(0);
$("#seconds").html(0);
}
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
$("#hours").html(h);
$("#minutes").html(m);
$("#seconds").html(s);
}
var elapsed_seconds = 0;
var interval_id =
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
get_elapsed_time_string(elapsed_seconds);
console.log(interval_id);
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
function countdown(){
var now = new Date();
var eventDate = new Date();
var currentTiime = now.getTime();
var eventTime = eventDate.setHours(16, 30, 0);
var remTime = eventTime - currentTiime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? h +" hrs" : h + "hrs";
h = (h <= 1) ? "" : h;
m = (m < 10) ? "0" + m + " mins" : m + " mins ";
if(now.getHours() >= 9 && currentTiime < eventTime){
setTimeout(countdown, 1000);
document.getElementById("timer").textContent = h + " " + m;
}
else if(now.getHours() < 9 || currentTiime >= eventTime){
var t = document.getElementsByClassName("order-day")[0];
t.getElementsByClassName("order-day")[0].textContent = "Order by 4:30pm for same day dispatch";
hideCountdown();
}
When it comes the end it keeps looping back. How do I stop it to and how to create and alert saying Game ended?
if(levelOption === 0) {
time = 60 * 0.1, g = document.getElementById('g'), tmp = time;
setInterval(function() {
var c = tmp--, m = (c/60) >> 0, s = (c-m*60) + '';
g.textContent = '' + m + ':' + (s.length > 1 ? '' : '0') + s tmp != 0 || (tmp = time);
}, 1000);
} else if(levelOption === 1) {
time = 60 * 10, g = document.getElementById('g'), tmp = time;
setInterval(function(){
var c = tmp--, m = (c/60) >> 0, s = (c-m * 60) + '';
g.textContent = '' + m + ':' + (s.length > 1 ? '' : '0') + s tmp != 0 || (tmp = time);
}, 1000);
} else {
time = 60 * 20, g = document.getElementById('g'), tmp = time;
setInterval(function() {
var c = tmp--, m = (c/60) >> 0, s = (c-m * 60) + '';
g.textContent = '' + m + ':' + (s.length > 1 ? '' : '0') + s tmp != 0 || (tmp = time);
}, 1000);
}
If you first name your interval by saving it to a variable (var myCounter = setInterval(...)) you can later clear the interval using clearInterval(myCounter).
I don't know in which context you are using these counters but i think you can simplify the logic. See if this counter works for you:
time = 3,
g = document.getElementById('g'),
tmp = time;
// Here we name our interval
var myCounter = setInterval(function() {
// Clear the interval if our counter has reached 0
if(tmp == 0) clearInterval(myCounter)
// Set minute and second values
var m = (tmp / 60) >> 0,
s = tmp - m * 60;
// Print values
g.textContent = m + ':' + ((s>9)?'':'0') + s;
// Finish of with modifying the counter
tmp--;
}, 1000);
<div id="g"></div>
Save setInterval value to some variable, e.g. let interval = setInterval;
In interval function if time is <= 0 do a clearInterval like clearInterval(interval);
Trying to get it to change between 16:30:00 and 17:30:00, to change the text font colour
Tried nested if statements as well
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
if ((h>=16 && m >=30) && (h<=17 && m<=30))
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
try to use setInterval() it's look more clear:
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
if((h==16 && m>=30) || (h==17 && m<=30)){
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
};
setInterval(startTime, 500);
The main bug in your logic is looking for minutes where it is both less than and equal to 30 AND greater than and equal to 30. The only way that part evaluates to true is if minutes is 30.
I would normalize the time (so that each combination of hour, minute and second can be represented by a unique number) and use that for comparisons.
function startTime(el) {
var today = new Date();
var hour = today.getHours(),
minute = today.getMinutes(),
second = today.getSeconds();
var normalized_time = normalizeTime(hour, minute, second);
document.getElementById(el).innerHTML
= hour + ":" + padTime(minute) + ":" + padTime(second);
document.getElementById(el).style.color
= normalized_time >= normalizeTime(16, 30, 0)
&& normalized_time <= normalizeTime(17, 30, 0)
? 'red'
: 'black';
}
/*
* Add a 0 to the beginning of the number if one-digit number
*/
function padTime(i) {
return i < 10 ? '0' + i : i;
}
/*
* Converts the time to a normalized version
*/
function normalizeTime(h, m, s) {
return s + (60 * m) + (60 * 60 * h);
}
var t = setInterval(startTime, 500, 'txt');
<span id="txt"></span>
Edit: As per you question you want to take hour and minute into account for comparison, So i have not included the second's part.
The following function get an integer value against time , that later used for the comparison.
function getSeconds(hh,mm,ss)
{
return (Number(hh) * 60 * 60) + (Number(mm) * 60) + Number(ss);
}
Complete code :
function getSeconds(hh,mm,ss)
{
return (Number(hh) * 60 * 60) + (Number(mm) * 60) + Number(ss);
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
var timeNow = getSeconds(h,m,s);
//if ((h>=16 && m >=30) && (h<=17 && m<=30))
if (timeNow >= getSeconds(16,30,0) && timeNow <= getSeconds(17,30,00))
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime();
Updated Fiddle
Previous Response
Try the Fiddle
The problem with your code is you are comparing m with contradictory conditions.
I have concatenated the hour and minutes like following and used that for time comparison
var hrs = Number(h+'.'+m);
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
var hrs = Number(h+'.'+m);
//if ((h>=16 && m >=30) && (h<=17 && m<=30))
if (hrs >= 16.30 && hrs <= 17.30)
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime();