I am trying to make a countdown timer that will countdown to a certain date and time.
I would like to be able to set the date and time from a 'admin panel' by typing in the date and time(ex 2014-01-25, 15:00) in a textbox or something similar.
As you might've figured, I'm not the best at PHP or JavaScript and I'm in need of directions as of how I would do this.
Any help is appreciated as I haven't made any progress in the last 2 hours I've tried doing this.
To do this with no frameworks like JQuery, you can do the following:
var MINUTE_IN_MILLISECONDS = 60 * 1000;
var HOUR_IN_MILLISECONDS = 60 * MINUTE_IN_MILLISECONDS;
var YEAR_IN_MILLISECONDS = 24 * HOUR_IN_MILLISECONDS;
var targetDate = new Date('2014-01-25 15:00');
var countdownInterval;
function countdown(){
var currentDate = new Date();
var difference = targetDate.getTime() - currentDate.getTime();
//Countdown has expired, cancel interval and do other tasks here
if(difference <= 0)
{
difference = 0;
clearInterval(countdownInterval);
//Update button here
}
var days = Math.floor(difference / YEAR_IN_MILLISECONDS);
difference -= days * YEAR_IN_MILLISECONDS;
var hours = Math.floor(difference / HOUR_IN_MILLISECONDS);
difference -= hours * HOUR_IN_MILLISECONDS;
var minutes = Math.floor(difference / MINUTE_IN_MILLISECONDS);
difference -= minutes * MINUTE_IN_MILLISECONDS;
var seconds = Math.floor(difference / 1000);
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}
countdownInterval = setInterval(countdown, 1000);
Here's the Fiddle
Full demonstration: http://jsfiddle.net/DerekL/T48SL/
<form>
<input type="date" required><input type="time" required>
<input type="submit">
</form>
<span></span>
$("form").on("submit", function (e) {
e.preventDefault();
var date = $("input[type=date]").val(),
time = $("input[type=time]").val(),
targetTime = new Date(date + " " + time),
interval = setInterval(function () {
$("span").html(
(((+startingTime - Date.now()) / 1000)|0) + " seconds left until " + startingTime.toString() + "."
);
}, 500);
});
It is fairly easy to format the time instead of just seconds with Algebra:
//yourTime is in seconds
(yourTime) % 60 //seconds
(yourTime / 60 |0) % 60 //minutes
(yourTime / 3600 |0) % 24 //hours
(yourTime / 86400 |0) //days
/*
* Explanation:
* % is mod, it finds the remainder of two numbers.
* |0 is binary OR, it rounds down a floating number.
*
*/
With this technique, you do not need to do a bunch of subtraction and create a lot of junk variables in the process.
Related
I'm trying to make a timer that will be auto-submit all the answers when times up. But now, it just shows that the time is expired and it is not redirecting to the final score page.My answers are stored in the database, i dont think it is related. Here is the code :
$(document).ready(function() {
var endTime = localStorage.getItem("endTime");
console.log(endTime);
if (endTime != 'underfined' && endTime != null) {
startCountdownTimer();
//localStorage.removeItem("endTime");
}
});
function setEndTime() {
var currentTime = new Date().getTime();
var endTime = new Date(currentTime + 1*60000);
localStorage.setItem("endTime", endTime);
// alert('Set end time ' + endTime);
startCountdownTimer();
}
function startCountdownTimer() {
// Set the date we're counting down to
var endTime = localStorage.getItem("endTime");
var countDownDate = new Date(endTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished,[ I want to make it is redirecting to score page ]
if (distance <= 0) {
clearInterval(x);
setTimeout("document.quiz.submit()",1);
window.location = "http://localhost/quizzer%202/final.php"
}
},1000);
}
Here's a solution with JavaScript's native setTimeout function to auto-submit your form:
// The following ($function() {}) is equivalent to $(document).ready(function() {.
$(function() {
setTimeout(function() {
setTimeout(function() {$('#idOfYourForm').submit()},1);
window.location = "http://localhost/quizzer%202/final.php"
}, 1000 * 60 * 10); // This is the amount of milliseconds your test will last. I set this to ten minutes
});
Also, it doesn't look like the submit command is correct. Since you're using jQuery, I'll show you the jQuery way.
Make an ID for your form
Submit it with $('#idOfYourForm').submit() (one problem was that you put quotation marks around it)
One last thing, when you submit a form, the default action is that you will be redirected, so your last redirect won't do anything. For what you did to work, consider using AJAX. See this post.
I am looking for for an example to calculate the timediff between to TIMES (24h) minus break time in H:m format;
Starttime: 08:30
Endtime: 17:30
Break: 01:50 (means break time 110 Minute Break time)
Netto working hours should be: 07:10 (7h10m) and 7.17 as decimal..
Is there an example?
I will appreciate your input.
Thanks
there are others ways to do that but to calc this time difference you have first to transform yours timestamps into seconds, then after you calculate it as seconds, transform to timestamp again to show up. like in the code:
HTML:
<html>
<label>Start Time</label><br>
<input id="start" value="08:30"><br>
<label>End Time</label><br>
<input id="end" value="17:30"><br>
<label>Break Time</label><br>
<input id="breaktime" value="01:50"><br>
<br>
<label>Difference Time</label><br>
<input id="diff"><br>
<label>As decimal</label><br>
<input id="decimals">
</html>
JavaScript:
function getTime(seconds) {
//an hour contains 60 * 60 = 3600 seconds
//a minut contains 60 seconds
//the amount of seconds we have left
var leftover = seconds;
//how many full hours fits in the amount of leftover seconds
var hours = Math.floor(leftover / 3600);
//how many seconds are left
leftover = leftover - (hours * 3600);
//how many minutes fits in the amount of leftover seconds
var minutes = Math.floor(leftover / 60);
//how many seconds are left
leftover = leftover - (minutes * 60);
return ('0' + hours).slice(-2) + ':' + minutes;
}
function getSeconds(timestamp) {
var hms = timestamp + ':00'; // your input string
var a = hms.split(':'); // split it at the colons
// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
return seconds;
}
function getDecimals(timestamp) {
var hms = timestamp + ':00'; // your input string
var a = hms.split(':'); // split it at the colons
//To get the total decimal hours we use the formula: h = hours + (minutes / 60) + (seconds / 3600).
var decimal = (+a[0]) + ((+a[1]) / 60) + ((+a[2]) / 3600);
return decimal.round(2)
}
var endTime = document.getElementById("end").value;
var startTime = document.getElementById("start").value;
var breakTime = document.getElementById("breaktime").value;
var diff = getSeconds(endTime) - getSeconds(startTime) - getSeconds(breakTime);
document.getElementById("diff").value = getTime(diff);
document.getElementById("decimals").value = getDecimals(getTime(diff));
you can check in this fiddle: http://jsfiddle.net/1ovdbf28/1/
As of now, I've written a script for a timer to countdown to a specific day. The problem is that the moment you refresh the browser, it takes 1 second for it to appear as opposed to it appearing instantly.
I actually did figure out a way to make it appear instantly but I had to repeat the block of code with countDownDate, now, timeDifference, oneDay, days, hours, minutes, seconds and document.getElementById("timer").innerHTML = ...; by placing it directly on top of timer() which's totally inefficient.
In my attempt below, the countdown appears about one second upon the browser refreshing but I want it to appear instantly. My goal here is to create reusable code.
What am I doing wrong and how can I fix it?
Here's the html:
<h1 id="timer"></h1>
Here's the js:
function conversion() {
var countDownDate = new Date("June 1, 2019 24:00:00");
var now = new Date().getTime();
var timeDifference = countDownDate - now;
var oneDay = 1000 * 60 * 60 * 24;
var days = Math.floor(timeDifference / (oneDay));
var hours = Math.floor((timeDifference % (oneDay)) / (1000 * 60 * 60));
var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
function timerCountdown() {
var timer = setInterval(function() {
conversion();
if(timeDifference < 0) {
clearInterval(timer);
document.getElementById("timer").innerHTML = "Timer's over.";
}
}, 1000);
}
timerCountdown();
Put the setInterval callback into a variable, and both call setInterval with that function and call it immediately on pageload:
function timerCountdown() {
var timer = setInterval(intervalCb, 1000);
function intervalCb() {
conversion();
if(timeDifference < 0) {
clearInterval(timer);
document.getElementById("timer").innerHTML = "Timer's over.";
}
}
intervalCb();
}
timerCountdown();
Just call conversion() immeadiately.
I alreay have some code for a countdown, but would like to make it pause for some hours when at 0 (with a text displayed), and then starts again for 14 days.
<script type="text/JavaScript">
var Display=document.getElementById("Counter");
function Countdown() {
var date1 = new Date();
var date2 = new Date ("Oct 20 20:00:00 2017");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (d * n)) / 3600);
mn = Math.floor ((sec - ((d * n + h * 3600))) / 60);
sec = Math.floor (sec - ((d * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Next game in : " + d +" d "+ h +" h "+ mn +" min "+ sec + " s ";
window.status = "Remaining time : " + d +" d "+ h +" h "+ mn +" min "+ sec + " s ";
}
tCountdown=setTimeout ("Countdown();", 1000);
}
Countdown();
</script>
So to sum up:
1. The countdown reach 0
2. It blocks for 4 hours and display a text ("We are currently playing")
3. It starts again for around 14 days.
I am thinking of something like this to start again the countdown:
var dateX = var date2 + (a length of time around 14 days)
Am I right?
Can I do this only with Javascript?
I broke it up into a bunch of functions so you can reason about it. If you want to test it, you can set the initial seconds in the sec variable to something small, like 10, and then you can also set the second argument in setTimeout to something small, like 10.
<div id="counter"></div>
<script>
// initialize
var first_target_date = new Date ("Oct 20 20:00:00 2017");
var sec = calcSecDiff(new Date(), first_target_date);
var counter = document.getElementById("counter");
var timeout; // we will update this global variable when we want to stop the whole thing
// start the countdown
countdown();
// do it again every second
var interval = setInterval(function(){
countdown();
}, 1000);
function countdown() {
counter.innerHTML = parseTime(sec);
// decrement the second
sec--;
// if we get to 0
if (sec < 0) {
clearInterval(interval);
counter.innerHTML = "We are currently playing";
if (timeout) return; // it's over
var timeout = setTimeout(function(){
sec = daysToSec(14); // reset the seconds to 14 days away
var interval = setInterval(function(){
countdown();
}, 1000);
}, hrsToMs(4)); // wait four hours before counting down again
};
}
// returns days, hours, minutes, and seconds from seconds
// see https://stackoverflow.com/questions/13903897/javascript-return-number-of-days-hours-minutes-seconds-between-two-dates
function parseTime(sec){
// calculate (and subtract) whole days
var days = Math.floor(sec / 86400);
sec -= days * 86400;
// calculate (and subtract) whole hours
var hours = Math.floor(sec / 3600) % 24;
sec -= hours * 3600;
// calculate (and subtract) whole minutes
var minutes = Math.floor(sec / 60) % 60;
sec -= minutes * 60;
// what's left is seconds
var seconds = sec % 60;
return days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds";
}
// calculates the difference between two dates in seconds
function calcSecDiff(date1, date2){
return Math.round((date2 - date1) / 1000);
}
// converts hours to milliseconds
function hrsToMs(hrs){
return hrs * 60 * 60 * 1000;
}
// converts days to seconds
function daysToSec(days){
return days * 24 * 60 * 60;
}
</script>
Hope you are all well,
I've been struggling to find a way to display the amount of time that has passed since a specific date in years, months, weeks and days. The closest i have found, is this below but i can quite work out how to get it to display the years and months.
Any tips would be greatly appreciated.
Thanks
window.onload = function() {
doTime('jan,01,2017,00:00:01');
}
function doTime(then) {
now = new Date();
then = new Date(then);
difference = (now - then);
days = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
hours = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
document.getElementById('timer').firstChild.nodeValue =
+days + ' days ' + hours + ' hours ' + mins + ' minutes ' + secs + ' seconds';
clearTimeout(doTime.to);
doTime.to = setTimeout(function() {
doTime(then);
}, 1000);
}
<div id="timer"> </div>
—
thanks for the suggestion of the previous post, sadly i have tried that and i can only get it to work the difference between two actual dates, i cant get it to automatically make the end date now so it counts up automatically as time goes on.
—
i have done some more fiddling and managed to get to this, being new to js, would you guys say this is pretty close? thanks
var startDateTime = new Date(2012,5,24,09,43,0,0); // YYYY (M-1) D H m s
(start time and date from DB)
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer;
function updateClock() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000)
var years = Math.floor(diff/(12*4.3479*7*24*60*60));
diff = diff-(years*12*4.3479*7*24*60*60)
var months = Math.floor(diff/(4.3479*7*24*60*60));
diff = diff-(months*4.3479*7*24*60*60)
var weeks = Math.floor(diff/(7*24*60*60));
diff = diff-(weeks*7*24*60*60)
var days = Math.floor(diff/(24*60*60));
diff = diff-(days*24*60*60);
var hours = Math.floor(diff/(60*60));
diff = diff-(hours*60*60);
var mins = Math.floor(diff/(60));
diff = diff-(mins*60);
var secs = diff;
document.getElementById("time-elapsed").innerHTML = years+" years,
"+months+" months, " +weeks+" weeks, " +days+" days, "+hours+" hours and
"+mins+" minutes,";
}
setInterval(updateClock, 1000);
<div id="time-elapsed"></div>
Simple, approximate difference
function calculateDifference(thenString) {
const second = 1000
const minute = 60 * second
const hour = 60 * minute
const day = 24 * hour
const month = 30 * day // approximately
const year = 365 * day // approximately
const now = new Date();
const then = new Date(thenString);
let difference = (now - then);
const time = [{ year }, { month }, { day }, { hour }, { minute }, { second }].map((item, i, a) => {
const [[unitName, unit]] = Object.entries(item)
const units = difference / unit | 0
difference -= unit * units
const maybePlural = units === 1 ? "" : "s"
return units > 0 ? units + " " + unitName + maybePlural : ""
}).filter(x => x)
const formattedTime = time.length > 1 ? [...time.slice(0, -1), "and", time.slice(-1)].join(" ") : time[1]
return formattedTime
}
function displayDifference() {
displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value)
}
const dateInput = document.querySelector(".date")
const timeInput = document.querySelector(".time")
const displayBox = document.querySelector(".js-display-difference")
dateInput.addEventListener("change", displayDifference)
timeInput.addEventListener("change", displayDifference)
displayDifference()
setInterval(displayDifference, 1000)
<h3>
since
<input class="date" type="date" value="2017-01-01"/>
<input class="time" type="time" value="00:00"/>
elapsed
<span class="js-display-difference"></span>
</h3>
Precise difference with momentjs and precise range plugin
function calculateDifference(thenString) {
var m1 = moment(Date.now())
var m2 = moment(new Date(thenString))
var diff = moment.preciseDiff(m1, m2)
return diff
}
function displayDifference() {
displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value)
}
const dateInput = document.querySelector(".date")
const timeInput = document.querySelector(".time")
const displayBox = document.querySelector(".js-display-difference")
dateInput.addEventListener("change", displayDifference)
timeInput.addEventListener("change", displayDifference)
displayDifference()
setInterval(displayDifference, 1000)
<script src="https://unpkg.com/moment#2.18.1"></script>
<script src="https://unpkg.com/moment-precise-range-plugin#1.2.3"></script>
<h3>
since
<input class="date" type="date" value="2017-01-01"/>
<input class="time" type="time" value="00:00"/>
elapsed
<span class="js-display-difference"></span>
I'm not an IT expert so there is probably a better way, but what I have done seems to work. An example can be seen here: Date difference in action
My approach was not to workout the difference in days from the first date but to work out the day position in the 'to date' from the day position in the 'from date'. i.e. on my 60th birthday there had been 15 leap years since I was born, but those days aren't counted. I am 60 years old not 60 years and 15 days.
And just to prove I'm not an IT expert I am unable to post the code but you can view the source code in the example.
BTW I only use chrome / edge so it's not been tested on other platforms.