With jquery as you can see in this picture, but how can I create a timer countdown without using a plugin? please help
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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; // Change the variable here to split it ("days, hours, minutes, seconds"
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
What can I add here so that I can divide the day or others as shown in the picture
$('[data-countdown]').each(function(){
var $deadline = new Date($(this).data('countdown')).getTime();
var $dataDays = $(this).children('[data-days]');
var $dataHours = $(this).children('[data-hours]');
var $dataMinuts = $(this).children('[data-minuts]');
var $dataSeconds = $(this).children('[data-seconds]');
var x = setInterval(function(){
var now = new Date().getTime();
var t = $deadline - now;
var days = Math.floor(t/(1000*60*60*24));
var hours = Math.floor(t%(1000*60*60*24) / (1000*60*60));
var minuts = Math.floor(t%(1000*60*60) / (1000*60));
var seconds = Math.floor(t%(1000*60) / (1000));
if( days < 10 ){
days = '0'+days;
}
if( hours < 10 ){
hours = '0'+hours;
}
if( minuts < 10 ){
minuts = '0'+minuts;
}
if( seconds < 10 ){
seconds = '0'+seconds;
}
$dataDays.html(days);
$dataHours.html(hours);
$dataMinuts.html(minuts);
$dataSeconds.html(seconds);
if( t <= 0 ){
clearInterval(x);
$dataDays.html('00');
$dataHours.html('00');
$dataMinuts.html('00');
$dataSeconds.html('00');
}
},1000);
})
Related
I would like to create a counter that reset every week, I found a code that more or less works, but when It goes to 0, it appears negative.... -1d -1h -2m -5s
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 29, 2021 20:21:0").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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, write some text
if (distance < 0) {
//document.getElementById("demo").innerHTML = "GAME DAY";
if(distance < - 1000 * 60 * 60* 24){ // if its past the "game day"
// reset timer to next week
countDownDate += 1000 * 60 * 60 * 24 * 7
}
}
}, 1000);
</script>
<span id="demo"></span>
Instead of hard-coding the date, you need to calculate the next date based on the current date.
Something like this, though you'd be better of moving the magic numbers (5 and 20) into variables.
let getNextGameDayTime = function() {
let now = new Date();
let dayOfTheWeek = now.getDay();
let dayOffset = 5 - dayOfTheWeek; // Friday is the 5th day of the week
if (dayOffset < 0 || (dayOffset === 0 && now.getHours() > 20)) {
dayOffset += 7;
}
let result = new Date();
result.setDate(result.getDate() + dayOffset);
result.setHours(20);
result.setMinutes(0);
result.setSeconds(0);
result.setMilliseconds(0);
return result;
}
console.log(getNextGameDayTime());
As for not displaying the message for the hour after a countdown has finished, you could use the resulting distance for this.
Given this HTML:
<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>
I am trying to display the value of data-countdown-date attribute as countdown text in the span using this JS:
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
for (let item of list) {
// console.log(item.getAttribute("data-countdown-date"));
// shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// console.log(countDownDate);
// shows 1598860800000 and 1609333200000
// Update the count down every 1 second
var x = setInterval(function () {
// Get todays 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));
// console.log(days);
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="countdown-date"
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}, 1000);
};
});
The problem is that both the countdown dates keep showing the same values.
Like this: 136d 1h 56m 26s (initial value when the page is loaded).
Any help would be appreciated.
source for the JS code: https://www.w3schools.com/howto/howto_js_countdown.asp.
countDownDate needs to be declared inside the interval function.
When it's declared outside the variable is overwritten.
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
for (let item of list) {
// console.log(item.getAttribute("data-countdown-date"));
// shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.
// console.log(countDownDate);
// shows 1598860800000 and 1609333200000
// Update the count down every 1 second
var x = setInterval(function () {
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// Get todays 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));
// console.log(days);
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="countdown-date"
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}, 1000);
};
});
<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
function processdate(countDownDate, item) {
// Get todays 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));
// console.log(days);
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 item
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}
for (let item of list) {
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// Update the count down every 1 second
var x = setInterval(processdate, 1000, countDownDate, item);
}
});
I have build a popup with a timer. When the timer ends I want it to extend itself with another day. I have gone so far that it extends itself with 1 day for 1 time but then it quits.
Maybe you have any idea on how to proceed?
Thanks!
//Make countdown
var setInfiniteTime = '{{ $actiepopup->infiniteTime }}';
// Update the count down every 1 second
var x = setInterval(function() {
// Set the date we're counting down to
// Get todays date and time
var currentDate = new Date().getTime();
// get countdown time
var countDownDate = new Date(countDownTimeUntil).getTime();
// console.log('countdowndateBefore' + countDownDate);
// check in infinite time is set
if (setInfiniteTime == 'Yes') {
if (currentDate >= countDownDate) {
// var i;
// for (var i = 0; i < 999999; i++) {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000;
// console.log(i);
// }
}
}
// console.log('currentdate' + currentDate);
// console.log('countdowndate' + countDownDate);
// Find the distance between now and the count down date
var distance = countDownDate - currentDate;
// 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="countdown"
$("#countdown").text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
$("#countdown").text("Actie beeïndigd");
}
}, delayInMilliseconds);
Hope you have enough information!
SetInterval()
Also, just an advice, if you use boolean statements, just use true or false since it's way easier to work with
if (setInfiniteTime) {
setInterval(() => {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000
}, 86400000)
}
I have used a countdown to get the difference between two times. When I use the special time the timer stops despite time gets the difference when refreshing the browser I find it already counts but it doesn't show counting seconds.
<p id="demo"></p>
<script>
// given the city's UTC offset
function calcTime(city, offset) {
// create Date object for current location
d = new Date();
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
// create new Date object for different city
// using supplied offset
nd = new Date(utc + (3600000*offset));
// return time as a string
return nd;
}
var xx = calcTime('country1', '+3');
var x1 = calcTime('country2', '-1');
// Set the date we're counting down to
var countDownDate = new Date(xx).getTime();
var now = new Date(x1).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time //1527885631789
//var now2 = new Date().getTime(); //1527871237519
// Find the distance between now an 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
When I use var now = new Date().getTime(); the countdown works. What is the problem in my code ?
Although I'm still not clear on what you want, I believe the following code behaves how you want. The trick is that you need to update now at every interval.
// given the city's UTC offset
function calcTime(city, offset) { .. unchanged ..}
var xx = calcTime('country1', '+3');
// Set the date we're counting down to
var countDownDate = new Date(xx).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// calculate the current time
var now = new Date(calcTime('country2', '-1')).getTime();
// Get todays date and time //1527885631789
//var now2 = new Date().getTime(); //1527871237519
// Find the distance between now an 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);
// Output the result in an element with id="demo"
console.log(hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
console.log("EXPIRED");
}
}, 1000);
I'm creating a countdown timer for a user selected time. For that I have developed following function.
function countdownTimeStart(){
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
Such as
<input type = "text" id = "picker-dates" value="08:30:20">
So can anyone help me to get this input value to my javascript function.
First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.
function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
countdownTimeStart();
<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>
You can do like this, please have a look and if it doesn't work please let me know.
var selectedValue = document.getElementById("picker-dates").value;
use jquery: $('#picker-dates').val()