The following code counts down to specific hour setHours and then restarts the 24-hour countdown after that time. However, it takes the time off the user's computer so it'd be inaccurate in every country. How do I specify a timezone to the code so it's correct no matter where you are located?
<script>
(function () {
var start = new Date;
start.setHours(14, 0, 0); // 2pm
function pad(num) {
return ('0' + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time').innerHTML =
hh + 'hrs ' + mm + 'mins ' + ss + 'secs';
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
</script>`
If you want the start time to be the same all over the world you can set it based on UTC time.
start.setHours(14 - start.getTimezoneOffset()/60, 0, 0);
Related
(function() {
var start = new Date;
start.setHours(24, 0, 0);
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) {
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('last').innerHTML =
hh + ":" + mm + ":" + ss;
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
I have a code which counts how much time left till certain time. But I need to reverse it and make it show how much time has passed since certain time.
Since we are talking about the future therefore now > start.
Also if now's hh is less than start's hh we should decrement the start's hh.
So the code would be as follows:
(function() {
var start = new Date;
start.setHours(24, 0, 0); // 11pm
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now < start) {
start.setDate(start.getDate() - 1);
}
var remain = ((now - start) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
var diff = hh + ":" + mm + ":" + ss;
console.clear();
console.log(diff);
setTimeout(tick, 1000);
}
tick()
})();
I have countdown function using Javascript/jQuery.
function countdownto(target, time, callback) {
var finish = new Date(time);
var s = 1000,
m = s * 60,
h = m * 60,
d = h * 24;
(function timer() {
var now = new Date();
var dist = finish - now;
var days = Math.floor(dist / d),
hours = Math.floor((dist % d) / h),
minutes = Math.floor((dist % h) / m),
seconds = Math.floor((dist % m) / s);
var timestring = days + 'days ' + hours + 'hrs ' + minutes + 'mins ' + seconds + 'seconds ';
target.html(timestring)
if (dist > 0) {
setTimeout(timer, 1000);
} else {
callback()
}
})()
}
// 10 seconds into the future
var time = "08/02/2021 17:05:00";
var time2 = "08/02/2021 17:33:00";
// countdown function call
countdownto($('#countdown'), time, function(){
console.log('tadaaa')
countdownto($('#countdown2'), time2, function(){
console.log('tadaaa')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countdown"></div>
<div id="countdown2"></div>
Now I need to add function interval second there to get the current interval time.
My question is: how to get interval time inside this function:
countdownto($('#countdown'), time, function(){
console.log('tadaaa')
alert(time); // <-- how to get interval time? Alert not appear, as I know here when the countdown finish.
countdownto($('#countdown2'), time2, function(){
console.log('tadaaa')
})
})
Technically, you already have the time as string inside your global time variable. If you want to pass it to the callback anyway, you have to pass it where the callback is invoked:
function countdownto(target, time, callback) {
var finish = new Date(time);
var s = 1000,
m = s * 60,
h = m * 60,
d = h * 24;
(function timer() {
var now = new Date();
var dist = finish - now;
var days = Math.floor(dist / d),
hours = Math.floor((dist % d) / h),
minutes = Math.floor((dist % h) / m),
seconds = Math.floor((dist % m) / s);
var timestring = days + 'days ' + hours + 'hrs ' + minutes + 'mins ' + seconds + 'seconds ';
target.html(timestring)
if (dist > 0) {
setTimeout(timer, 1000);
} else {
callback(finish)
}
})()
}
// 10 seconds into the future
var time = "08/02/2021 17:05:00";
var time2 = "08/02/2021 17:33:00";
// countdown function call
countdownto($('#countdown'), time, function(time){
console.log('tadaaa')
alert(time); // <-- how to get interval time? Alert not appear, as I know here when the countdown finish.
countdownto($('#countdown2'), time2, function(){
console.log('tadaaa')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countdown"></div>
<div id="countdown2"></div>
I'm want to use a countdown timer to count to 10am every day so I am using this:
setInterval(function time(){
var d = new Date();
var hours = 09 - d.getHours();
var min = 60 - d.getMinutes();
if((min + '').length == 1){
min = '0' + min;
}
var sec = 60 - d.getSeconds();
if((sec + '').length == 1){
sec = '0' + sec;
}
jQuery('#countdown p').html('<span>'+hours+'</span><span class="mins">'+min+'<br></span><span class="secs">'+sec+'</span>')
}, 1000)
However, after 10am it obviously wants to turn negative, so I want to add in something to add 24hr after 10am like:
if(hours >= 10){
d = new Date() + 1;
}
but cannot get it working, any thoughts would be greatly appreciated.
You want to set hours and then use getDate() method.
setInterval(function time(){
var start = new Date;
start.setHours(10, 0, 0); // 10am
var now = new Date;
if (now > start) { // check current time is getter then add one day
start.setDate(start.getDate() + 1);
}
var days = ((start - now) / 1000);
var hours = format((days / 60 / 60) % 60);
var min = format((days / 60) % 60);
var sec = format(days % 60);
jQuery('#countdown p').html('<span>'+hours+'</span><span class="mins">'+min+'<br></span><span class="secs">'+sec+'</span>')
},1000);
// Add before 0 of hour, min, sec
function format(num) {
return ("0" + parseInt(num)).substr(-2);
}
Try Using A library like https://momentjs.com/
it will save you many lines of code.
I have this javascript that shows remaining hours for every 24 hours and it worked well but i wanted to add a second function that show the remaining 12 hours for the day. how can i add this on my current script
(function() {
var start = new Date;
start.setHours(5, 0, 0); // military time, remaining time until 5
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) {
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time24').innerHTML =
hh + ":" + mm + ":" + ss;
setTimeout(tick, 1000);
}
document.addEventListener('click', tick);
})();
<h2>Starts at 5am</h2>
<h4>Respawn Time every 24 hours</h4><br>
<b id="time24"></b> Until respawn<br>
<h4>Respawn Time every 12 hours</h4><br>
<b>??:??:??</b> Until respawn
edit:
For example, this script shows the remaining hours before 5am and reset (so it resets at 5am).
the second function I need is to show the remaining hours of the first 12 hours of the day and then reset.
so, if the remaining time is 24:00 for the first function, the second function should show 12:00
You can use
var hh = pad((remain / 60 / 60) % 60 % 12);
to get the hours modulus 12.
(function() {
const start = new Date;
start.setHours(5, 0, 0); // military time, remaining time until 5
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
const now = new Date;
if (now > start) {
start.setDate(start.getDate() + 1);
}
const remain = ((start - now) / 1000);
const hh = pad((remain / 60 / 60) % 60);
const hh12 = pad((remain / 60 / 60) % 60 % 12);
const mm = pad((remain / 60) % 60);
const ss = pad(remain % 60);
document.getElementById('time24').innerHTML =
hh + ":" + mm + ":" + ss;
document.getElementById('time12').innerHTML =
hh12 + ":" + mm + ":" + ss;
setTimeout(tick, 1000);
}
document.addEventListener('click', tick);
})();
<h2>Starts at 5am</h2>
<h4>Respawn Time every 24 hours</h4><br>
<b id="time24"></b> Until respawn<br>
<h4>Respawn Time every 12 hours</h4><br>
<b id="time12"></b> Until respawn
I have found a javascript code for a countdown timer in the internet and changed it a little bit to use it as I want.. It basically works fine, but as soon as I set the start date to more than 2 days ahead it doesn't to what it's supposed to. If I e.g. set it to three days ahead, as shown in the code below, it doesn't become a 72 hours countdown, but a 12 hours countdown.
I'm not sure whats the problem, because I can set up a 24 or a 48 hours countdown without any issues.
(function() {
var start = new Date;
start.setHours(18, 02, 20);
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
var weekend = now.getDay();
if (now > start) {
start.setDate(start.getDate() + 3);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
var distance = start - now;
document.getElementById('demo').innerHTML = hh + ":" + mm + ":" + ss
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
The following line is the cause:
var hh = pad((remain / 60 / 60) % 60);
This caps the hours at 60 due to the % 60 (mod 60). 48 hours is less than 60 so it works. 72 hours will get translated to 12 (72 % 60 == 12).