lightweight jQuery countdown - javascript

I've seen some really nice looking jQuery plugins to count down the number of day, hours, minutes and seconds. They use images and look great.
But I'm looking for a simple little countdown that populates a div with the number of seconds remaining.
I'm going to use it in conjunction with:
function submitform() {
document.forms[0].submit();
}
jQuery(function($) {
setInterval("submitform()",20000);
});
I just want something real unobtrusive in the corner somewhere to let them know that the page is about to refresh all by itself.

First off, setInterval is used when you want to fire a function at set intervals, for example once every twenty seconds. For one-off events use setTimeout.
Here is a lightweight solution for you, assuming you have a div with an id of countdown:
$(function() {
var seconds = 20;
setTimeout(updateCountdown, 1000);
function updateCountdown() {
seconds--;
if (seconds > 0) {
$("#countdown").text("You have " + seconds + " seconds remaining");
setTimeout(updateCountdown, 1000);
} else {
submitForm();
}
}
});
function submitForm() {
document.forms[0].submit();
}

I just wrote a countdown for a project this week. It's just javascript, no jQuery needed.
Just pass the id of the div you want to place the countDown in, and the end and start time in milliseconds (or you can change how the Date params work, I had the dates in ms on the page already, so I passed them into the function, but you could do it differently):
<div id="countDownDiv"></div>
<script type="text/javascript">
countDown("countDownDiv",1281239850163, new Date().getTime());
</script>
And here's the function:
function countDown(id, end, cur){
this.container = document.getElementById(id);
this.endDate = new Date(end);
this.curDate = new Date(cur);
var context = this;
var formatResults = function(day, hour, minute, second){
var displayString = [
'<div class="stat statBig"><h3>',day,'</h3><p>days</p></div>',
'<div class="stat statBig"><h3>',hour,'</h3><p>hours</p></div>',
'<div class="stat statBig"><h3>',minute,'</h3><p>minutes</p></div>',
'<div class="stat statBig"><h3>',second,'</h3><p>seconds</p></div>'
];
return displayString.join("");
}
var update = function(){
context.curDate.setSeconds(context.curDate.getSeconds()+1);
var timediff = (context.endDate-context.curDate)/1000;
// Check if timer expired:
if (timediff<0){
return context.container.innerHTML = formatResults(0,0,0,0);
}
var oneMinute=60; //minute unit in seconds
var oneHour=60*60; //hour unit in seconds
var oneDay=60*60*24; //day unit in seconds
var dayfield=Math.floor(timediff/oneDay);
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);
// Call recursively
setTimeout(update, 1000);
};
// Call the recursive loop
update();
}

Related

Why does $(document).getElementbyId not work in this function while just document.getElementbyId works?

This is the function. I am including Jquery library from Google CDN and it is before this script.
{
$(document).ready( function() {
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// This gets a "handle" to the clock div in our HTML
//This does not work???
var clockDiv = $(document).getElementById('clock');
//This works though
var clockDiv = document.getElementById('clock');
// Then we set the text inside the clock div
// to the hours, minutes, and seconds of the current time
clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
}
// This runs the displayTime function the first time
displayTime();
});
}
As others have mentioned, to achieve the same functionality as you would using just the Web API for Document with jQuery, you would use a selector instead. As Arun P states, you would do
var clockDiv = $('#clock'); // select the div with an ID of clock
clockDiv.text( /* your text */ ); // set the text of the selected element to the passed argument
jQuery is a library the abstracts the Web APIs to help with cross-browser compatibility issues and to generally make navigating and manipulating the DOM a bit easier.
to set text in a div
$('#clock').text('some text');
Because jQuery returns the document information differently. If I remember correctly it would have to be:
$(document)[0].getElementById('clock');

Javascript clock, minutes behind

Thought I'd do a little test, to test my skill set after being away from javascript for too long. Tried to be really cwleaver and create an object of a clock, sounds simple enough. I managed to create the clock etc with no trouble but after running the script after roughly 20 minutes, I noticed my clock was serval minutes behind! No idea what I've done.
This is only a little hobby project, I'm not gaining from this at all. Any criticisms accepted :)
function clock24(element){
this.date=new Date;
this.seconds=this.date.getSeconds();
this.minutes=this.date.getMinutes();
this.hours=this.date.getHours();
this.ele=element;
this.output={seconds:"00",minutes:"00",hours:"00"};
this.update();
var self=this;
this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']);
this.increment=setInterval(function(){
self.seconds++;
if(self.seconds==60){
self.seconds=0;
self.minutes++;
}
if(self.minutes==60){
self.minutes=0;
self.hours++;
}
if(self.hours==24){
self.hours=0;
}
self.update();
self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']);
},1000);
}
clock24.prototype={
constructor:clock24,
update:function(){
this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
this.output['hours']=(self.hours<10)?"0"+this.hours.toString():this.hours.toString();
}
}
My guesses are, something in the script takes too long to compute but is minimally noticeable? Or the way I've structured my script?
Can't put my finger on it, but! I bet it's something really stupid and I apologise for my stupid question in advance XD
I'd probably do it a bit like this:
function clock24(el){
var started, interval, seconds, minutes, hours;
this.update = function(){
var time = new Date(new Date().getTime() - started);
seconds = time.getSeconds();
minutes = time.getMinutes();
hours = time.getHours();
var pretty = hours + ':' + minutes + ':' + seconds;
if(typeof jQuery !== 'undefined' && el instanceof jQuery)
el.html( pretty );
else
el.innerHTML = pretty;
return this;
}
this.start = function(){
started = new Date().getTime();
this.update();
interval = setInterval(this.update, 1000);
return this;
}
this.stop = function(){
clearInterval(interval);
return this;
}
return this;
}
var clock = clock24(document.body).start();
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
}
Each to their own though!
Solved the problem as #Brennan suggested above in the comments. Here's my script incase anyone is interested in the future.
function clock24(element){
this.ele=element;
this.output={};
this.update();
var self=this;
this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']);
this.increment=setInterval(function(){
self.update();
self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']);
},1000);
}
clock24.prototype={
constructor:clock24,
update:function(){
//probably best not to use 'this'
this.date=new Date();
this.seconds=this.date.getSeconds();
this.minutes=this.date.getMinutes();
this.hours=this.date.getHours();
this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
this.output['hours']=(self.hours<10)?"0"+this.hours.toString():this.hours.toString();
}
}
I also quickly put together a 12 hour clock just incase n_n
function clock12(element){
this.ele=element;
this.output={};
this.update();
var self=this;
this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']+this.output['ampm']);
this.increment=setInterval(function(){
self.update();
self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']+self.output['ampm']);
},1000);
}
clock12.prototype={
constructor:clock12,
update:function(){
this.date=new Date();
this.seconds=this.date.getSeconds();
this.minutes=this.date.getMinutes();
this.hours=this.date.getHours();
this.output['ampm']=this.hours>='12'?'pm':'am';
this.hours=this.hours%12;
this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
this.output['hours']=this.hours.toString() ? this.hours.toString():'12';
}
}
Still freezes (can tell when applied to the title of the document, checking whilst on other pages) but the time is always correct.

How can I make my two JavaScripts work together?

Hello I am trying to have my clock and my countdown timer on the same page so people/users can see when I am done with my game and for them to have the correct time with the countdown timer also. Here is the code. They both work separately but when the are both put on a .php page only the bottom one (countdown timer) works and if I do JQuery.noconflict to the timer the clock works but the countdown doesn't.
<!-- Clock Part 1 - Holder for Display of Clock -->
<span id="tP"> </span>
<!-- Clock Part 1 - Ends Here -->
<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->
<script type="text/javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; }
function dE(x){ if(x==1||x==21||x==31){ return 'st'; } if(x==2||x==22){ return 'nd'; } if(x==3||x==23){ return 'rd'; } return 'th'; }
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
function aP(x){ return (x>11)?'pm':'am'; }
var dN=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),oT="dN[tS().getDay()]+' '+tS().getDate()+dE(tS().getDate())+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+':'+':'+' '+tH(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+aP(tS().getHours())";
if(!document.all){ window.onload=dT; }else{ dT(); }
</script>
<!-- Clock Part 2 - Ends Here -->
<script type="text/javascript">
//###################################################################
// Author: ricocheting.com
// Version: v3.0
// Date: 2014-09-05
// Description: displays the amount of time until the "dateFuture" entered below.
var CDown = function() {
this.state=0;// if initialized
this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
this.interval=null;// setInterval object
}
CDown.prototype = {
init: function(){
this.state=1;
var self=this;
this.interval=window.setInterval(function(){self.tick();}, 1000);
},
add: function(date,id){
this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
expire: function(idxs){
for(var x in idxs) {
this.display(this.counts[idxs[x]], "Sorry, hopfully we are open in a couple minutes");
this.counts.splice(idxs[x], 1);
}
},
format: function(r){
var out="";
if(r.d != 0){out += r.d +" "+((r.d==1)?"Day":"Days")+", ";}
if(r.h != 0){out += r.h +" "+((r.h==1)?"Hour":"Hours")+", ";}
out += r.m +" "+((r.m==1)?"Min":"Mins")+", ";
out += r.s +" "+((r.s==1)?"Sec":"Secs")+", ";
return out.substr(0,out.length-2);
},
math: function(work){
var y=w=d=h=m=s=ms=0;
ms=(""+((work%1000)+1000)).substr(1,3);
work=Math.floor(work/1000);//kill the "milliseconds" so just secs
y=Math.floor(work/31536000);//years (no leapyear support)
w=Math.floor(work/604800);//weeks
d=Math.floor(work/86400);//days
work=work%86400;
h=Math.floor(work/3600);//hours
work=work%3600;
m=Math.floor(work/60);//minutes
work=work%60;
s=Math.floor(work);//seconds
return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
},
tick: function(){
var now=(new Date()).getTime(),
expired=[],cnt=0,amount=0;
if(this.counts)
for(var idx=0,n=this.counts.length; idx<n; ++idx){
cnt=this.counts[idx];
amount=cnt.d.getTime()-now;//calc milliseconds between dates
// if time is already past
if(amount<0){
expired.push(idx);
}
// date is still good
else{
this.display(cnt, this.format(this.math(amount)));
}
}
// deal with any expired
if(expired.length>0) this.expire(expired);
// if no active counts, stop updating
if(this.counts.length==0) window.clearTimeout(this.interval);
},
display: function(cnt,msg){
document.getElementById(cnt.id).innerHTML=msg;
}
};
window.onload=function(){
var cdown = new CDown();
//Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan)
cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};
</script>
<h2> Time until ^^<<>> opens!</h2>
<div id="countbox1"></div>
Fixed the problem
Thanks to #Scronide , #James Thorpe , and #Ultimater. I put all of your methods into place and kept them separate and used #Scronide final method. Thanks again.
They're both assigning to window.onload so the second is overwriting the function of the first.
If you are using jquery, instead of assigning to window.onload, you can instead use:
/* first component */
//initialisation for first component
$(function() {
dT();
});
/* second component */
//initialisation for second component
$(function() {
var cdown = new CDown();
//Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan)
cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
});
Both use window.onload. Simply join the two functions into one.
Neither of these scripts use any jQuery, so it isn't a jQuery conflict. The problem is that they are both setting a function to window.onload, so the last script will always override the one before it.
I suggest removing the if(!document.all){ window.onload=dT; }else{ dT(); } line from the end of the clock script and adding dT(); inside the window.onload assignment from the second script.
So you would have something like:
window.onload=function(){
dT();
var cdown = new CDown();
cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};

PHP countdown, need it dynamic

I have a PHP-script that adds time into a SQL-DB like this:
$howlong = 75; // Amount of seconds
$timetowait=time()+ $howlong; // This inserts into "timetowait" in SQL DB
Then to show my users how long they have to wait, I have this:
$timeleft= $rows['timetowait']; // This is the field in DB from above^
func_time($timeleft); // Function below, which shows the time left
The function above is:
function func_time($until){
$now = time();
$difference = $until - $now;
$seconds = $difference;
$output = "$seconds seconds";
return $output;
}
It works fine, but I want it to be a dynamic countdown. (Automaticly counting down, without refreshing the site) My problem here, is that I am using the "time()", and not pure text (f.ex 21/11/2013 20:00)
Usually this type of "countdown" like thing is handled by Javascript:
On the client side you could do something like this:
function countdown(seconds) {
if(seconds > 0) {
alert(seconds + ' Seconds Left');
setTimeout(function(){
countdown(--seconds);
}, 1000);
}
else {
alert('Time out!');
}
}
Demo: http://jsfiddle.net/qwertynl/fn4MV/
It is better to handle this on client side using javascript.
For example a count down per user could be as follows,
js
function printData(data){
document.getElementById("countdown").innerText=data;
}
var timeInSecs = Date.now()/(1000*60);
var howLong = 75;
var untilTimeInSecs = timeInSecs+howLong;
var countDownInterval = setInterval(function(){
var timeLeft = untilTimeInSecs-timeInSecs;
printData(timeLeft);
untilTimeInSecs--;
if(timeLeft<=0){
clearInterval(countDownInterval);
}
},1000);
html
<div id="countdown"></div>
http://jsfiddle.net/zvsyu/2/
You need javascript, if you have the number of second for the countdown, You only need a setInterval:
More info: http://www.w3schools.com/js/js_timing.asp

How to show first message on form load and next one after 1min?

As I don't have much knowledge of javascript and I need your help. My problem is like this:
I am using setInterval() for increasing the value of i every after 1 minutes and I am using this code:
var i = minutes;
function decrementMin() {
if(i>=0)
{
i--;
}
if(i==0)
{
alert('Minute = Congratulation your time begin now!');
}
document.getElementById('minutes').innerHTML = i + "minutes";
}
setInterval('decrementMin()',60000);
The problem is I want to show first message in <div id='minutes'></div> when page loads, but it shows the message after 1 minutes interval. If there is something that I am missing in my code please let me know.
Your problem is that you are setting the interval before the first message is displayed. Instead, you can call the function straight away and then set the interval. Also, you need to clear the interval once you've reached 0:
var i = minutes;
var intID;
function decrementMin() {
if(i>=0)
{
i--;
}
if(i==0)
{
clearInterval(intID);
alert('Minute = Congratulations my friend your time begins now!');
}
document.getElementById('minutes').innerHTML = i + "minutes";
}
decrementMin();
intID = setInterval(decrementMin, 60000);
This way you call your function straight away, and then set it to run every minute. Once you reach 0, you clear the interval so that the function doesn't count to "-1", etc.

Categories