JavaScript - Countdown Clock - With Time Zone Specification?

1 down vote favorite


I do have the countdown script (see link below) to display the time between current time and the date given in real-time.

However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time.

I want to be able to set up my own start time and end time.

Here is what I have:

http://jsfiddle.net/BgEtE/

thank you for help

Hi Script Experts

I am facing issue in below code for Brisilia time zone.(GMT-3). Issue comes in October month only. It is going tobig loop. I am not getting how Date object is behaving here.

Thanks in advance
Pranav Sharma
***********************************
<script type="text/javascript">
var nDate;
var nCurrentYear = 2011;
var nCurrentMonth = 10;
nYear=2011;
nMonth=10;
var date = new Date(nYear, nMonth-1, 1);

document.write('Month:'+date.getMonth() +':CurrentMonth:'+nCurrentMonth);
while (date.getMonth() == nCurrentMonth-1)
{
nDate = date.getDate();
document.write(date.toDateString());
date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1);
}


</script>

**********************************

Hi there! Well, I recently found the Image clock code, and I am loving it! But, I would like it to only display pacific time, not retrieve the time from a users browser.

Here's my code:

Code:

<script type="text/javascript">

/***********************************************

* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["/users/1712/49/18/66/album/c012.png", "/users/1712/49/18/66/album/c112.png", "/users/1712/49/18/66/album/c211.png", "/users/1712/49/18/66/album/c311.png", "/users/1712/49/18/66/album/c411.png", "/users/1712/49/18/66/album/c511.png", "/users/1712/49/18/66/album/c611.png", "/users/1712/49/18/66/album/c711.png", "/users/1712/49/18/66/album/c811.png", "/users/1712/49/18/66/album/c911.png", "/users/1712/49/18/66/album/cam11.png", "/users/1712/49/18/66/album/cpm13.png", "/users/1712/49/18/66/album/ccolon11.png"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}

	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
	}

	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"></span>')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}

	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML

	}


</script>




<DIV STYLE="position:absolute; top:260px; left:215px; width:109px; height:28px">
<FONT SIZE="+2" COLOR="black">
<TABLE BORDER="0" cellpadding="10" CELLSPACING="0" TOP MARGIN="0">
<TR>

<TD WIDTH="109" HEIGHT="28" BACKGROUND="/users/1712/49/18/66/album/clock210.png" VALIGN="top">

<script type="text/javascript">

new imageclock.display()

</script>

</TD>
</TR>
</TABLE>
</DIV>

Much appreciated!

Hello,

I want to change time format from 12 to 24 hours and remove AM and PM in this script. Anybody can help me?

Code:

<style type="text/css">
/*<![CDATA[*/
#clock {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
color:#030;
padding-top: 24px;
text-align:center;
}
/*//]]>*/
</style>

<script type='text/javascript'>
//<![CDATA[

var dayarray=new Array('Svē','Pir','Otr','Tre','Cet','Pie','Ses');
var montharray=new Array('01','02','03','04','05','06','07','08','09','10','11','12');

function getthedate(){
mydate=new Date();
year=mydate.getUTCFullYear();
day=mydate.getDay();
month=mydate.getMonth();
daym=mydate.getDate();
if(daym<10) {
daym='0'+daym;
}
hours=mydate.getHours();
minutes=mydate.getMinutes();
seconds=mydate.getSeconds();
dn='AM';
if(hours>=12) {
dn='PM';
}
dn='AM';
if(hours>=12) {
dn='PM';
}
if(hours>12){
hours=hours-12;
}
if(hours==0){
hours=12;
}
if(minutes<=9) {
minutes='0'+minutes;
}
if(seconds<=9) {
seconds='0'+seconds;
}

cdate=dayarray[day]+', '+daym+'-'+montharray[month]+'-'+year+', '+hours+':'+minutes+':'+seconds+' '+dn;

document.getElementById('clock').firstChild.nodeValue=cdate;

setTimeout('getthedate()',1000);
}
window.onload=function() {
getthedate();
}
//]]>
</script>

Thanks.

How can I draw a cookie where number of chocolate chips represents the number of seconds and the number of bites represents the number of minutes.

I want to show the passage of time on a clock that looks like items are being added to the display according to the number of seconds and minutes. Maybe using a mouse input aswell!

Please guide.:confused: I use the Processing Software

Sorry, I'm new to javascript... . I want to make a switch statement that will display something different depending on the time of day. Once I saw something like getTime (?), but it relied on the user's clock. I know that you would expect me to at least research getTime so that I'm asking about something more specific, but I don't think it's what I need because I want mine to give the same result regardless of the viewer's time zone or how off thier clock is. How can I do this? I only need to know how to get the time; I know how I'm going to do the switch statement. I just wanted to give you some idea of what I meant to to... =)

Hi everyone, i made this clock and for me in the UK it displays my time, however for people everywhere else in the world it displays their current time, i would like it to display GMTdate only regardless of where you live. any help would be great. below is my code:

Code:

<script type="text/javascript">
<!--

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>

thanks

hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions?

ps. i am completely new to js so make any suggestions and please explain throughly.

Thanks!

Hi I hope I hit the topic I have a problem in java script i need it for an online game that I develop but not as I do not go javasript countdown or can help me I need a timer that counts down and ceases to move to the other side but not when Refresh to go back and allow you to set time thanks in advance

hi, i am now playing with the time.
can you please tell me how to make the time move in downwards, i mean a countdown like format, e.g the time will start countdown and end in 2 days?

here's my initial noob code for creating time

Code:

<script type="text/javascript">


var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();

function showDate(){
  if(document.getElementById('but').value = "locked"){
    h = checktime(h);
    m = checktime(m);
    s = checktime(s);
  }
  document.getElementById('t').innerHTML = h +":"+m+":"+s;
}

function checktime(i){
  if(i < 10){
    i = "0" + i;
  }
  return i;
}

function ocl(){
  var x = true;
  if(x){
    document.getElementById('but').value = "locked";
    showDate();
  }
}
function mo(){
  document.getElementById('but').value = "lock me ?";
  x = false;
}

</script>


<h3>
<a id="t"></a>
</h3>


<input type="button" id="but" value="unlocked" onmouseover="mo();" onclick="ocl();" />

What im trying to do is have the page auto refresh after the time countdown has expired. Here is the java code for the counter how would it be possible to add a autorefresh after the counter has reached 0 time left.

Code:

function ulticountdown(time, id, format, keepCounting, zero, langarray){
     timeleft = time;
     var countUp = false;
     if (timeleft < 0) {
       if (keepCounting == 0) {
         timeleft = 0; 
       } else {
         timeleft *= -1;        
         countUp = true;
       }
     }
     seconds = timeleft%60;
     timeleft -= seconds;
     timeleft = timeleft/60;
     minutes = timeleft%60;
     timeleft -= minutes;
     timeleft = timeleft/60;
     hours = timeleft%24;
     timeleft -= hours;
     days = timeleft/24;
     var counterstring = '';

     if (zero == 1) {
       if (seconds < 10) {
         seconds = '0'+seconds; 
       }
       if (minutes < 10) {
         minutes = '0'+minutes; 
       }
       if (hours < 10) {
         hours = '0'+hours; 
       }
     }
     if (format == 1) {     
       
       if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
       if (hours != 0) {

         if (hours != 1) {
           counterstring = counterstring+" "+hours+" "+langarray[3];
         } else {
           counterstring = counterstring+" "+hours+" "+langarray[2];	 
	 }
       }
       if (minutes != 0) {
         if (minutes != 1) {
           counterstring = counterstring+" "+minutes+" "+langarray[5];
         } else {
           counterstring = counterstring+" "+minutes+" "+langarray[4];
	 
	 }
       }
       if (seconds != 1) {
         counterstring = counterstring+" "+seconds+" "+langarray[7];
       } else {
         counterstring = counterstring+" "+seconds+" "+langarray[6];
       
       }
    }  else if (format == 2) { 
       if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
       if (hours != 0) {

         if (hours != 1) {
           counterstring = counterstring+" "+hours+" "+langarray[3];
         } else {
           counterstring = counterstring+" "+hours+" "+langarray[2];	 
	 }
       }
       if (minutes != 0) {
         if (minutes != 1) {
           counterstring = counterstring+" "+minutes+" "+langarray[5];
         } else {
           counterstring = counterstring+" "+minutes+" "+langarray[4];
	 
	 }
       }

    } else if (format == 3) {     
       if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
       if (hours != 0) {

         if (hours != 1) {
           counterstring = counterstring+" "+hours+" "+langarray[3];
         } else {
           counterstring = counterstring+" "+hours+" "+langarray[2];	 
	 }
       }
    
    } else if (format == 4) {     
       if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
   
    } else if (format == 5) {     
       if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
       counterstring += " "+hours+":"+minutes+":"+seconds;
    } else if (format == 6) {     
       counterstring = days;
    }else {     
    // we should never get here, but for safety add the last one as default case.
      if (days != 0) {
         if (days != 1) {
           counterstring = counterstring+" "+days+" "+langarray[1];
         } else {
           counterstring = counterstring+" "+days+" "+langarray[0];
         }
       }
       counterstring += " "+hours+":"+minutes+":"+seconds;    
     }

var newdiv = document.createElement("div");
newdiv.innerHTML = counterstring;
var olddiv = document.getElementById("counter"+id);
var parent = olddiv.parentNode;
parent.removeChild(olddiv);
newdiv.id = "counter"+id;
parent.appendChild(newdiv);


if (countUp == true) {
  newtime = time-1;
} else {
  newtime = time-1;
}
setTimeout("ulticountdown("+newtime+","+id+","+format+", "+keepCounting+", "+zero+", langarray)",1000);
}

Hey.

I'm currently looking for a countdown script, which is based on the server's time. I've only found scripts, that's based on the local computer's time, which means the output of the script changes, when the time on the computer is changed.

And I want to make a public announcement which counts down to something - and should output the same at every person.

I'm not that familiar with JavaScript, I know some jQuery - if anyone can supply any links or can help me with this, I'd appreciate it.

I am new to JavaScript and am enrolled in an introductory class. My assignment is to create JavaScript for a Web page that counts down the time left until several events. I have been working on this code for several hours now, and I have done everything the textbook instructs me to do, yet when I load the Web page I still get blank fields where my countdown info should be.

I would really appreciate it if someone could look through the code I've created and give me some pointers.

I have an .htm file and an external .js file. The .htm file is:
Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment

   Events in Dixon
   Author: 
   Date:   

   Filename:         events.htm
   Supporting files: dates.js, dixon.css, logo.jpg
-->

<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="dates.js"></script>

<script type="text/javascript">
	function showCountdown() {
		var today = new Date("December 1, 2007 6:31:45");
		var Date1 = new Date("January 14, 2007 10:00:00");
		var Date2 = new Date("May 21, 2007 12:00:00");
		var Date3 = new Date("July 4, 2007 21:00:00");
		var Date4 = new Date("September 1, 2007 12:00:00");
		var Date5 = new Date("December 1, 2007 11:30:00");
		var Date6 = new Date("December 31, 2007 15:30:00");
		document.eventform.thisDay.value = showDateTime(today);
		changeYear(today, Date1);
		changeYear(today, Date2);
		changeYear(today, Date3);
		changeYear(today, Date4);
		changeYear(today, Date5);
		changeYear(today, Date6);
		document.eventform.count1.value = countdown(today, Date1);
		document.eventform.count2.value = countdown(today, Date2);
		document.eventform.count3.value = countdown(today, Date3);
		document.eventform.count4.value = countdown(today, Date4);
		document.eventform.count5.value = countdown(today, Date5);
		document.eventform.count6.value = countdown(today, Date6);
}
</script>

</head>

<body onload="setInterval('showCountdown()',100)">

<form name="eventform" id="eventform" action="">

<div id="links1">
   <a href="#">Home</a>
   <a href="#">City Services</a>
   <a href="#">City Agencies</a>
   <a href="#">Mayor's Office</a>
   <a href="#">News Today</a>
   <a href="#">Upcoming Events</a>
</div>
<div id="logo">
   <img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
   <a href="#">Site Map</a>
   <a href="#">Search Engine</a>
   <a href="#">Public Notices</a>
   <a href="#">Survey Form</a>
   <a href="#">Contact Us</a>
   <a href="#">E-Government</a>
</div>


<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
<tr>
   <th>Event</th>
   <th>Starting Time</th>
   <th>Countdown to Event</th>
</tr>
<tr>
   <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
   <td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
   <td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
   <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
   <td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
   <td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
   <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
   <td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
   <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
   <td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
   <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
   <td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
   <td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
   <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
   <td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
   <td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

The external .js file is:
Code:

/*
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment

   Author: 
   Date:  
 
   Function List:
   showDateTime(time)
      Returns the date in a text string formatted as:
      mm/dd/yyyy at hh:mm:ss am

   changeYear(today, holiday)
      Changes the year value of the holiday object to point to the
      next year if it has already occurred in the present year

   countdown(stop, start)
      Displays the time between the stop and start date objects in the
      text format:
      dd days, hh hrs, mm mins, ss secs
*/

function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();

   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();

   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;

   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;

   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday) {
	year = today.getFullYear();
	holiday.setFullYear(year);
	(holiday < today) ? ++year : year;
	holiday.setFullYear(year);
}

function countdown(start, stop) {
	var time = stop - start;
	var days = Math.floor(time/(1000*60*60*24);
	var hours = Math.floor(time/1000*60*60);
	var minutes = Math.floor(time/1000*60);
	var seconds = Math.floor(time/1000);
	return days +"days, "+ hours +"hrs, "+ minutes +"mins, "+ seconds +"secs"+;
}

If there is any more information that is needed, I will do my best to give that, as well.

Thanks!

Hello everyone,

I am completely new to javascripts. I want to have a count down timer on my webpage. I already found a script, but it does not do everything I want it to do.
I couldn't find a script that did everything I need. I need it to do the following things:

- Use the time zone GMT+1
- Reset everyday at a specific time
- From 15:00 till 17:30: A countdown (so it shows 2 hours and 30 minutes from the start and count's down to 0 (which will be 17:30)
- During 15:00 till 17:30 it shows: "The game is playing"
- Once it is 17:30 I want it to reset and countdown till the next day 15:00
- From 17:30 till 15:00 next day it says: "The game will start in"

So it is actually 2 countdown clocks in one javascript. One countdown from 15:00 to 17:30 (whilst the game is playing) and one directly starting after it from 17:30 till 15:00 next day. But both are displayed on the same spot.
The countdown will be in text. No buttons or fancy images etc.

Hope you can help me out. Thanks

Code:

<html>
<head>

<script type = "text/javascript">

function getSeconds() {
var now = new Date();
var time = now.getTime();  // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var ft = midnight.getTime() + 86400000;  // add one day
var diff = ft - time;  
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);
}


var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000); 
tick(); // to start counter display right away
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds();  // and start again if required
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                  + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = "The game will start in " + result;
}


</script>

</head>

<body onload = "getSeconds()">

<span id="countdown" style="font-weight: bold;"></span>

</body>
</html>

Reply With Quote




01-07-2015, 10:11 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

First of all, move your JavaScript where it belongs: Just before the </body> tag. Then you don't need stuff such as onload='....'

Here's my attempt at it: Code:

<!DOCTYP html>
<html>
<head>
    <title>Game play starts at 17:30</title>
</head>

<body>
Other stuff...<br/><br/>

<span id="countdown" style="font-weight: bold;"></span>

<br/><br/>Other stuff...<br/><br/>

<script type="text/javascript">
var timer = null;

function tick( )
{
    var msg = document.getElementById("countdown");
    var now = new Date();
    var yr = now.getFullYear(); var mon = now.getMonth(); var dy = now.getDate();
    var startat = new Date(yr,mon,dy,15,0,0);
    var endat = new Date(yr,mon,dy,17,30,0);
    if ( now.getTime() < startat.getTime() )
    {
        msg.innerHTML = "The game will start at 17:30";
    } else if ( now.getTime() > endat.getTime() )
    {
        msg.innerHTML = "The game started at 17:30";
    } else {
        var sec = Math.floor( ( endat.getTime() - now.getTime() ) / 1000 );
        var min = Math.floor ( sec / 60 );
        sec %= 60;
        var hr = Math.floor ( min / 60 );
        min %= 60;
        if ( min < 10 ) min = "0" + min;
        if ( sec < 10 ) sec = "0" + sec;
        msg.innerHTML = "The game will start in " + hr + ":" + min + ":" + sec;
    }
}
tick(); // immediate start
timer = setInterval( tick, 1000 ); // every second
</script>

</body>
</html>

Hi I am wondering how I would limit the drop zones to just one image per drop zone?


Code:

<ul id="images">
  <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
  <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
  <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
</ul>

<form name = "objects" id="form" action = "form.php" method = "post">

<div class="drop_zones">
  <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name =    "drop_zone1">
  </div>

  <div class="drop_zone" id="drop_zone2"  droppable="true" type = "text" name = "drop_zone2">
  </div>

  <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
  </div>
</div>

Code:

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.addEventListener(type, fn, false);
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
    }
  }
 };
} else {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
     }
   }
 };
 }
})();


var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');


function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}


function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        event.dataTransfer.setData('obj_id', this.id);
        return false;
    });
}
}


 addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#000";
return false;
});


addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#ccc";
return false;
});


 addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();

// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);

// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';

var oldThis = this;

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" />    </a>';

    // and update event handlers
    updateDataTransfer();

    // little customization
    oldThis.style.borderColor = "#ccc";
}, 500);

return false;
});

Anyone know?