I'm trying to set a countdown that will do something before and after,
I'm using the code from this site: https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
I have this code, but I don't know how to:
set the end time;
do something before and after the timer is done;
schedule the clock automatically.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
//var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
var schedule = [
['May 10 2020', 'May 10 2020']
];
//initializeClock('clockdiv', deadline);
// iterate over each element in the schedule
for(var i=0; i<schedule.length; i++){
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if(endMs > currentMs && currentMs >= startMs ){
initializeClock('clockdiv', endDate);
}
}
Could you please advise me?
Related
I want to display this in several elements on the page. And it displays only once. In other elements it is empty. Do you have any solution regarding this issue?
Need to display it in a loop? Can you construct such a loop? As I created and wanted to display by class, no id unfortunately did not work.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
function getNextSaturday() {
var now = new Date();
var nextSaturday = new Date();
nextSaturday.setDate(now.getDate() + (6 - 1 - now.getDay() + 7) % 7 + 1);
nextSaturday.setHours(11, 0, 0, 0);
return nextSaturday;
}
function convertToEST(date){
estOffset = -5.0
utc = date.getTime() + (date.getTimezoneOffset() * 60000);
return new Date(utc + (3600000 * estOffset));
}
var deadline = getNextSaturday();
initializeClock('clockdiv', convertToEST(deadline));
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
Using the following JavaScript, how do I make it automatically restart the countdown adding 7 days when the deadline is reached?
(function($) {
"use strict";
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
};
}
function initializeClock(id, endtime) {
var daysSpan = $('.days');
var hoursSpan = $('.hours');
var minutesSpan = $('.minutes');
var secondsSpan = $('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2));
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date("Aug 24, 2018");
initializeClock('clockdiv', deadline);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown">
<span class="days"></span> Days
<span class="hours"></span> Hours
<span class="minutes"></span> Minutes
<span class="seconds"></span> Seconds
</div>
why dont you just re-initialize the script with a new deadline?
if (t.total <= 0) {
clearInterval(timeinterval);
var newDeadline = deadline.setDate(deadline.getDate() + 7);
initializeClock('clockdiv', newDeadline);
}
I've currently got a countdown that counts to 11.59 am every day.
However, I need to set it so it counts down to Wednesday 11.59pm every week and only show from Monday.
So on Sunday, Saturday, Friday and Thursday the countdown won't show. I've figured that bit out but can't find a way to set my countdown for every Wednesday at 11.59pm.
I guess it would be done with getDay() somehow, but not sure how to put it together.
This is the code I've currently got:
var today = new Date(new Date().getTime());
var deadline = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 10, 59, 59));
function time_remaining(endtime) {
var t = endtime - new Date();
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
return {
'total': t,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function run_clock(id, endtime) {
var clock = document.getElementById(id);
if (null === clock) {
return;
}
var hours_span = clock.querySelector('.hours');
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
function update_clock() {
var t = time_remaining(endtime);
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
day = today.getDay();
if ((t.total <= 0) || (day === 0) || (day === 6) || (day === 5) || (day === 4)) {
clearInterval(timeinterval);
document.getElementById('deadline_Container').style.display = "none";
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
run_clock('clockdiv', deadline);
You can use the getDay() value to get the current day(0(Sunday)...6(Saturday)), then use that to show the calendar and find the dead line
var today = new Date(),
curDay = today.getDay();
var deadline = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate() + 3 - curDay, 10, 59, 59));
//var x = 0;
function time_remaining(endtime) {
var t = endtime - new Date();
//var t = endtime - new Date(today).setSeconds(today.getSeconds()+ ++x);
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
//console.log(t, days)
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function run_clock(id, endtime) {
var clock = document.getElementById(id);
if (null === clock) {
return;
}
var days_span = clock.querySelector('.days');
var hours_span = clock.querySelector('.hours');
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
function update_clock() {
var t = time_remaining(endtime);
days_span.innerHTML = ('0' + t.days).slice(-2);
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
day = today.getDay();
if ((t.total <= 0) || (day === 0) || (day === 6) || (day === 5) || (day === 4)) {
clearInterval(timeinterval);
document.getElementById('deadline_Container').style.display = "none";
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
if (curDay > 0 && today < deadline) {
run_clock('clockdiv', deadline);
}
<div id="deadline_Container"></div>
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
https://jsfiddle.net/zLfuwdtu/1/
I have a script that counts down a set date 'Date1'. While it counts down it displays a message "UNTIL FLOW". When that timer finishes it starts another timer 'Date2' in its place and displays "ON FLOW".
The problem:
When 'Date1' finishes the countdown, it continues to display the message from 'Date1' (UNTIL FLOW) alongside the 'Date2' message (ON FLOW). I need it to not display the message from 'Date1' when displaying the message from 'Date2'.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime, secondend, newfirstend) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.flowDays');
var hoursSpan = clock.querySelector('.flowHours');
var minutesSpan = clock.querySelector('.flowMinutes');
var secondsSpan = clock.querySelector('.flowSeconds');
function updateClock() {
var t = getTimeRemaining(endtime);
if(t.seconds<0)
{
clearInterval(timeinterval);
}
else
{
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
if (t.total <= 0) {
document.getElementById("flowWindow").textContent= 'ON FLOW! ';
endtime=secondend;
}
else
{document.getElementById("flow2Window").textContent= 'UNTIL FLOW';}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var firstend = 'Sun Jul 05 2016 03:38:40 GMT-0400 (EDT)';
var secondend = 'Sun Jul 08 2016 20:52:10 GMT-0400 (EDT)';
initializeClock('flowClockdiv', firstend, secondend, firstend);
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, flow) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.flowDays');
var hoursSpan = clock.querySelector('.flowHours');
var minutesSpan = clock.querySelector('.flowMinutes');
var secondsSpan = clock.querySelector('.flowSeconds');
function updateBoard(flow) {
document.getElementById("flowWindow").textContent = '';
document.getElementById("flow2Window").textContent = '';
switch(flow[current].name)
{
case 'on':
document.getElementById("flowWindow").textContent = 'ON FLOW! ';
break;
case 'until':
document.getElementById("flow2Window").textContent = 'UNTIL FLOW';
break;
}
}
function updateClock() {
var t = getTimeRemaining(flow[current].end);
if (t.seconds >= 0) {
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
if (t.total <= 0) {
flow.shift();
updateBoard(flow);
if (flow[current].name == 'stop') {
clearInterval(timer);
}
}
}
updateBoard(flow);
var timer = setInterval(updateClock, 1000);
}
var current = 0;
var firstend = new Date();
var secondend = new Date();
firstend.setSeconds(firstend.getSeconds() + 5);
secondend.setSeconds(secondend.getSeconds() + 10);
var flow = [
{ 'name': 'until', 'end': firstend },
{ 'name': 'on', 'end': secondend },
{ 'name': 'stop', 'end': null }
];
initializeClock('flowClockdiv', flow);
I am having issues with my timer. What I'd like it to do is when the countdown hits "0 days 0 hours 0 minutes 0 seconds" I'd like it to stop right there at 0 without it displaying something goofy like "-1 days 18 hours 12 minutes 57 seconds". Does anyone have any experience with something like this?
I guess I have had issues with my "if" statements to stop the countdown. Here is what the code looks like:
<script>
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = 'December 16 2015 13:00:00 UTC-0800';
initializeClock('clockdiv', deadline);
</script>
I would try it like this:
var timeinterval;
function updateClock() {
var t = getTimeRemaining(endtime);
if (t.total <= 0) {
clearInterval(timeinterval);
}else{
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
}
updateClock();
timeinterval = setInterval(updateClock, 1000);