I tried to make my first countdown for the web , how to create a script of the countdown after the time runs straight into my web ?? in codeIgniter
this my script
var target_date = new Date('Sep, 19, 2015,21:26:00').getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById('countdown');
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = '<div id="days" class="timer_box"><h1>' + days + '</h1> <p>Days</p></div> <div id="days" class="timer_box"><h1>' + hours + '</h1> <p>Hours</p></div> <div id="days" class="timer_box"><h1>'
+ minutes + '</h1> <p>Minutes</p></div> <div id="days" class="timer_box"><h1>' + seconds + '</h1> <p>Seconds</p></div>';
}, 1000);
Related
Each time I refresh my page, the timer resets. I'd like it to continue from where it left off with until it hits 0.
My JS where the timer is handled:
var target_date = new Date().getTime() + (1000*3600*48); // set the countdown date
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function () { getCountdown(); }, 1000);
function getCountdown(){
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = pad( parseInt(seconds_left / 86400) );
seconds_left = seconds_left % 86400;
hours = pad( parseInt(seconds_left / 3600) );
seconds_left = seconds_left % 3600;
minutes = pad( parseInt(seconds_left / 60) );
seconds = pad( parseInt( seconds_left % 60 ) );
// format countdown string + set tag value
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
}
<div id="tiles"></div>
Help appreciated.
Would localStorage work for you?
var persisted = Number(localStorage.getItem('target_date')),
target_date;
if(persisted > 0){
target_date = persisted;
} else {
target_date = Date.now() + (1000 * 3600 * 48);
localStorage.setItem('target_date', target_date);
}
ยป Fiddle
I'm trying to make a count down timer that counts down to a couple different hours depending on the time of the day.
Here's how I've tried to set the function for the time. So if its before 14.00, it would count down to 14.00 and if it's after 14.00, it would count down to 20.00. After 20.00, it would show the count down to 14.00 tomorrow.
Ive tried to set the target time like this, but setting the date for "tomorrow at 14.00" I just cant get to work.
var target_date = new Date();
var currentdate = new Date();
if (currentdate.getHours() > 0 && currentdate.getHours() < 14) {
target_date.setHours(14,0,0,0);
}
else if (currentdate.getHours() > 14 && currentdate.getHours() < 20) {
target_date.setHours(20,0,0,0);
}
else {
target_date.setDate(currentdate.getDate()+1).setHours(16,0,0,0); // if 20-24, count down to tomorrow at 14.00
}
The rest of the script for the count down is
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = hours + "t "
+ minutes + "m";
}, 1000)};
target_date.setDate(currentdate.getDate()+1).setHours(16,0,0,0);
setDate() method doesn't return Date object, so this sequence wouldn't work
You should write
target_date.setDate(currentdate.getDate()+1);
target_date.setHours(16,0,0,0);
I am trying to make a Javascript countdown for my website, so as a start I wanted to test the best solution. I now have a code, but when I open the website nothing is on there, I think I might have done something wrong when trying to implement Javascript into html?
My code:
<!DOCTYPE html>
<html>
<head>
<title>Home Test Countdown</title>
<script LANGUAGE="Javascript">
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
</script>
</head>
<body>
<span id="countdown"></span>
</body>
</html>
Since you have the script in the head, when var countdown = document.getElementById("countdown"); is executed the element is not present in the dom so countdown will be null which will result in the error Uncaught TypeError: Cannot set property 'innerHTML' of null in line countdown.innerHTML = '...'.
One possible solution is to move your code to a window load event handler
window.addEventListener('load', function () {
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}, 1000);
})
Demo: Fiddle
Another is to move your script to the bottom of the page after <span id="countdown"></span>
This code is working you need to add your code after your HTML elements(Add the javascript code before closing the body tag)
or try to add your code in window.onload like,
window.onload = function(){
// your timer code goes here
};
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function() {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}, 1000);
<span id="countdown"></span>
Also you added the tag jquery so you can add your code in $.ready() like,
$(function(){
// your code here
});
The script needs to be after the span countdown object
I want to create a online auction site. I need to mention every auction ending time & date.
For this I have created a countdown.js file like this:
// set the date we're counting down to
var target_date = new Date("Aug 15, 2014").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);
And I have imported this in my html as follows:
<script type="text/javascript"src="js/countdown.js"></script>
<p style="font-size:larger;color:Red;font-weight:bolder">END IN</p>
<h5><i id="countdown"></i></h5><br />
It's working fine. Now I want to add one or more timer in the same page. While I use this code
<h5><i id="countdown"></i></h5><br />
It's showing an error in ID. How to rectify this?
Just move your code into one function which is accepting 2 params elementId and target date
function setTimer(elem_id, date) {
// set the date we're counting down to
var target_date = new Date(date).getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countDownElem = document.getElementById(elem_id);
//update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countDownElem.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);
}
setTimer("countdown1","Aug 15, 2014");
setTimer("countdown2","Aug 17, 2014");
Here is the fiddle for above code
The answer above works, but I noticed the second timer is showing to be an hour longer away than the first timer.
I am not able to know the reason, why my countdown timer is not working. Here is my code and jsfiddle link :http://jsfiddle.net/CHC8w/
<div id="idays"></div>
<div id="ihours"></div>
<div id="iminutes"></div>
<div id="iseconds"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
setInterval(function(){
var future = new Date('Mar 28 2014 11:35:14');
var now = new Date('Mar 28 2014 11:05:14');
//var future = new Date("Sep 20 2014 21:15:00 GMT+0200");
//var now = new Date();
var difference = Math.floor((future - now) / 1000);
var seconds = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var minutes = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var hours = fixIntegers(difference % 24);
difference = Math.floor(difference / 24);
var days = difference;
jQuery("#iseconds").text(seconds + " sec");
jQuery("#iminutes").text(minutes + " min");
jQuery("#ihours").text(hours + " hr");
jQuery("#idays").text(days + " days");
}, 1000);
});
function fixIntegers(integer)
{
if (integer < 0)
integer = 0;
if (integer < 10)
return "0" + integer;
return "" + integer;
}
</script>
Kindly help.
Thanks
var now has fixed datetime value var now = new Date('Mar 28 2014 11:05:14'); during each call to setInterval()
Check this too http://jsfiddle.net/CHC8w/1/
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "Days </br> " + hours + "hr</br>"
+ minutes + "min</br>" + seconds + "sec</br>";
}, 1000);
Source : https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer.