I need help with countdown timer in javascript.I found the code below in PHPJabbers. This code works fine, but when I reload the page the time goes back to its initial time. I want to retain the time even if I load the page. I want also to add PHP function inside if seconds == 0. I'm not sure if it's possible. Thanks in advance
<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
Check this, (implemented using cookies)
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
//check existing cookie
cook=getCookie("my_cookie");
if(cook==""){
//cookie not found, so set seconds=60
var seconds = 60;
}else{
seconds = cook;
console.log(cook);
}
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
//store seconds to cookie
setCookie("my_cookie",seconds,5); //here 5 is expiry days
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
working jsFiddle
Nice solution by bhavesh.. If someone wants to show the days,hour,mins, seconds together then they can refer this code.
Reverse timer from javascript:
var target_date = new Date('Aug 01 2014 20:47:00').getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById('timeremaining');
var countdownTimer = 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);
if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0 )
{
document.getElementById('timeremaining').innerHTML = '';
clearInterval(countdownTimer);
}
else
{
if(days>0)
{
days= days+'d,';
}
else
{
days='';
}
countdown.innerHTML ='( ' + days + checkTime(hours) + ':'+ checkTime(minutes) + ':' + checkTime(seconds) +' remaining)';
}
}, 1000);
function checkTime(i) {
if (i < 10) {i = '0' + i};
return i;
}
Related
Well my code should be working but it isn't. Each time I reload the time, my Countdown start back at his initialised value.
Since I'm not familliar with JS you may be able to m'éclaircir the mind
<script>
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()',1000,function() {
secondPassed();
if (seconds === 0) {
eraseCookie(seconds);
} else {
createCookie(seconds, seconds, 7);
}
});
</script>
How do I call it
<h1>Server Release in : <span id="countdown" class="timer"></span></h1>
I just want my timer to not refresh each time you reload the page.
Any kind of help would be appreciated
Here you go.
var upgradeTime = 172801; //Timer length in ms
var timerMS = window.localStorage.getItem("date");
startTimer();
function timer() {
var difference = timerMS - Date.now();
if (difference <= 0) {
startTimer();
return;
}
var seconds = (difference / 1000).toFixed(0),
days = Math.floor(seconds / 24 / 60 / 60),
hoursLeft = Math.floor((seconds) - (days * 86400)),
hours = Math.floor(hoursLeft / 3600),
minutesLeft = Math.floor((hoursLeft) - (hours * 3600)),
minutes = Math.floor(minutesLeft / 60),
remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
setTimeout(timer, 1000);
}
function startTimer() {
if (!timerMS || timerMS < Date.now()) {
timerMS = Date.now() + upgradeTime;
window.localStorage.setItem("date", timerMS);
}
timer();
}
I am currently developing an e-learning website with php
I want to add a script to make a counter growing by 40 s for each question of a multiple choice.
that's what I did but it's just a simple counter that don't make any action after the time is left:
<span id="countdown" class="timer"></span>
<script>
var seconds = 4;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>-->
if time passes then he goes on to the next question.
Write a function which provide next question. If your next question is in other page, use window.location.href = urlOfNextQuestion; in nextQuestion function. If you have an array of questions and you have a counter for them, replace current question with new one.
var seconds = 4;
function secondPassed() {
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
nextQuestion();
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
function nextQuestion() {
// window.location.href = urlOfNextQuestion;
alert("here we go");
// You have an index of current and next question and show new question
}
<span id="countdown" class="timer"></span>
I have this countdown timer. For some reason it stops counting after one minute - it just stops.
If I count for 55 minutes it stops at 54:00
If I count for 2 minutes it stops at 1:00
Any ideas how do I fix that so it continues up to zero?
Here is the JSFiddle link: Countdown timer with cookies
And the JS code:
function countdown(minutes) {
var seconds = 60;
var mins = minutes;
if(getCookie("minutes")&&getCookie("seconds"))
{
var seconds = getCookie("seconds");
var mins = getCookie("minutes");
}
function tick() {
var counter = document.getElementById("timer");
setCookie("minutes",mins,10)
setCookie("seconds",seconds,10)
var current_minutes = mins-1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
//save the time in cookie
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
if(mins > 1){
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
countdown(55);
I don't know why you are using the cookies here but, putting that aside, your problem seems to be the following lines:
var seconds = getCookie("seconds");
var mins = getCookie("minutes");
In your code after you finished the first minute you call the countdown function again with a minute less. However, the lines above returns the minute variable back to its previous value. So you end up stuck in the same minute after one minute pass.
So, I assume, you need to get the time from the cookies only once (first time the countdown runs). You can use something like this:
var firstTime = true;
function countdown(minutes) {
var seconds = 60;
var mins = minutes;
if(firstTime && getCookie("minutes")&&getCookie("seconds"))
{
firstTime = false;
seconds = getCookie("seconds");
mins = getCookie("minutes");
}
...
Note that var is unnecessary in the if clause since you already
defined seconds and mins variables.
Code with day:hours:minute:second support.
Just add number of minutes into timer span.
For one day test, I entered 1440 minutes.
<html>
<body>
<span id="countdown" class="timer">1440</span>
<script type="text/javascript">
var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 ) {
function timer() {
if(first_time) {
countdownTimer = setInterval('timer()', 1000);
first_time = false;
}
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
timer()
//var countdownTimer = setInterval('timer()', 1000);
}
</script>
</body>
</html>
I want to create a simple countdown timer.
I found something and its working for hours minute and seconds, I want only minutes:seconds...
how can I make the same timer for mm:ss format?
var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds;
}
countdown();
here is the html
<div id="countdown">01:02:15</div>
var seconds;
var temp;
console.clear();
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
countdown();
https://jsfiddle.net/santoshj/jex1f8uv/
var countDownController = function(seconds){
var countdownTimer = setInterval(startTimer, 1000);
function startTimer(){
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if(minutes<10){
minutes = "0"+ minutes;
}
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
// You can use which state you need!
console.log(days+":"+minutes+":"+hours+":"+remainingSeconds)
if (seconds == 0) {
clearInterval(countdownTimer);
//state for end timing
alert('time is up');
} else {
seconds--;
}
}
};
var timeToCountDown = 1232321;
countDownController(timeToCountDown);
I want to show clock with some difference . below given code is working fine for me. but i want to push and play this time whenever user want. i want to push and resume SetTimeout function .any one have any idea how to do that ?
$("#push").click(function () {
});
$("#play").click(function () {
show();
});
function show() {
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
setTimeout("show()", 1000);
}
show();
This is a mix of the respond of #colburton and #TwiStar
Respond correctly to the answer
var isPlaying = true;
var toHandle = null;
$("#push").click(function () {
isPlaying = false;
if (toHandle !== null)
{
clearTimeout(toHandle);
toHandle = null;
}
});
$("#play").click(function () {
isPlaying = true;
show();
});
function show() {
if (isPlaying) {
toHandle = null;
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
toHandle = setTimeout("show()", 1000);
}
}
show();
Save the handle to a variable:
var toHandle = null;
// start timeout
toHandle = setTimeout("show()", 1000);
Then you can cancel the timeout any time you want with:
// cancel timeout
if (toHandle) {
clearTimeout(toHandle);
toHandle = null;
}
Quick and dirty. Surround you show-function with an if which checks a "should i show the time"-flag:
var doShow = true;
$("#push").click(function () {
doShow = false;
});
$("#play").click(function () {
doShow = true;
show();
});
function show() {
if(doShow == true) {
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
setTimeout("show()", 1000);
}
}
show();