www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help useing a timer/countdown

  1. #1
    Join Date
    Apr 2011
    Posts
    1

    Exclamation Help useing a timer/countdown

    Hello there ,
    Can someone help me with this timer/contdown ?

    ISSUE : Everytime I refresh the page the countdoen restarts .
    I belive that the problem is in the : var curTime and var dateTime


    Code:
    <SCRIPT type=text/javascript>
    		var events = new Array();
    
    		events[1]={name: 'Event 0:', startUp: new Array(
    			{hour:0,minute:25},
    			{hour:2,minute:25},
    			{hour:4,minute:25},
    			{hour:6,minute:25},
    			{hour:8,minute:25},
    			{hour:10,minute:25},
    			{hour:12,minute:25},
    			{hour:14,minute:25},
    			{hour:16,minute:25},
    			{hour:18,minute:25},
    			{hour:20,minute:25},
    			{hour:22,minute:25}
    		)}
    		
    		events[2]={name: 'Event 1:', startUp: new Array(
    			{hour:1,minute:55},
    			{hour:3,minute:55},
    			{hour:5,minute:55},
    			{hour:7,minute:55},
    			{hour:9,minute:55},
    			{hour:11,minute:55},
    			{hour:13,minute:55},
    			{hour:15,minute:55},
    			{hour:17,minute:55},
    			{hour:19,minute:55},
    			{hour:21,minute:55},
                {hour:23,minute:55}
    		)}
    
    		events[3]={name: 'Event 2:', startUp: new Array(
    			{hour:0,minute:55},
    			{hour:2,minute:55},
    			{hour:4,minute:55},
    			{hour:6,minute:55},
    			{hour:8,minute:55},
    			{hour:10,minute:55},
    			{hour:12,minute:55},
    			{hour:14,minute:55},
    			{hour:16,minute:55},
    			{hour:18,minute:55},
    			{hour:20,minute:55},
                {hour:22,minute:55}
    		)}
    
    		events[4]={name: 'Event 3:', startUp: new Array(
    			{hour:0,minute:0},
    			{hour:8,minute:0},
                {hour:16,minute:0}
    		)}
    
    		events[5]={name: 'Event 4:', startUp: new Array(
    			{hour:0,minute:0},
    			{hour:2,minute:0},
    			{hour:4,minute:0},
    			{hour:6,minute:0},
    			{hour:8,minute:0},
    			{hour:10,minute:0},
    			{hour:12,minute:0},
    			{hour:14,minute:0},
    			{hour:16,minute:0},
    			{hour:18,minute:0},
    			{hour:20,minute:0},
                {hour:22,minute:0}
    		)}
    
    		events[6]={name: 'Event 5:', startUp: new Array(
    			{hour:0,minute:0},
    			{hour:2,minute:0},
    			{hour:4,minute:0},
    			{hour:6,minute:0},
    			{hour:8,minute:0},
    			{hour:10,minute:0},
    			{hour:12,minute:0},
    			{hour:14,minute:0},
    			{hour:16,minute:0},
    			{hour:18,minute:0},
    			{hour:20,minute:0},
                {hour:22,minute:0}
    		)}
    
    		events[7]={name: 'Event 6:', startUp: new Array(
    			{hour:0,minute:40},
    			{hour:1,minute:40},
    			{hour:2,minute:40},
    			{hour:3,minute:40},
    			{hour:4,minute:40},
    			{hour:5,minute:40},
    			{hour:6,minute:40},
    			{hour:7,minute:40},
    			{hour:8,minute:40},
    			{hour:9,minute:40},
    			{hour:10,minute:40},
                {hour:11,minute:40},
    			{hour:12,minute:40},
    			{hour:13,minute:40},
    			{hour:14,minute:40},
    			{hour:15,minute:40},
    			{hour:16,minute:40},
    			{hour:17,minute:40},
    			{hour:18,minute:40},
    			{hour:19,minute:40},
    			{hour:20,minute:40},
    			{hour:21,minute:40},
    			{hour:22,minute:40},
                {hour:23,minute:40},
                {hour:24,minute:40}
    		)}
    
    		events[7]={name: 'Event 7:', startUp: new Array(
    			{hour:0,minute:42},
    			{hour:1,minute:22},
    			{hour:2,minute:32},
    			{hour:3,minute:42},
    			{hour:4,minute:52},
    			{hour:6,minute:02},
    			{hour:7,minute:12},
    			{hour:8,minute:22},
    			{hour:9,minute:32},
    			{hour:10,minute:42},
                {hour:11,minute:52},
    			{hour:13,minute:02},
    			{hour:14,minute:12},
    			{hour:15,minute:22},
    			{hour:16,minute:32},
    			{hour:17,minute:42},
    			{hour:18,minute:52},
    			{hour:20,minute:02},
    			{hour:21,minute:12},
    			{hour:22,minute:22},
                {hour:23,minute:32}
    		)}
    
    		events[8]={name: 'Event 8:', startUp: new Array(
    			{hour:1,minute:5},
    			{hour:4,minute:5},
    			{hour:7,minute:5},
    			{hour:10,minute:5},
    			{hour:13,minute:5},
    			{hour:16,minute:5},
    			{hour:19,minute:5},
    			{hour:23,minute:5}
    		)}
    
    		events[9]={name: 'Event 9:', startUp: new Array(
    			{hour:1,minute:50},
    			{hour:4,minute:50},
    			{hour:7,minute:50},
    			{hour:10,minute:50},
    			{hour:13,minute:50},
    			{hour:16,minute:50},
    			{hour:23,minute:50}
    		)}
    
    
    		events[10]={name: 'Event 10:', startUp: new Array(
    			{hour:5,minute:5},
    			{hour:2,minute:5},
    			{hour:8,minute:5},
    			{hour:11,minute:5},
    			{hour:14,minute:5},
    			{hour:17,minute:5},
    			{hour:20,minute:5},
    			{hour:0,minute:5}
    		)}
    
    		events[11]={name: 'Event 11:', startUp: new Array(
    			{hour:0,minute:20},
    			{hour:2,minute:20},
    			{hour:5,minute:20},
    			{hour:8,minute:20},
    			{hour:11,minute:20},
    			{hour:14,minute:20},
    			{hour:20,minute:20}
    		)}
    
    		events[12]={name: 'Event 12:', startUp: new Array(
    			{hour:0,minute:15},
    			{hour:3,minute:15},
    			{hour:6,minute:15},
    			{hour:9,minute:15},
    			{hour:12,minute:15},
    			{hour:15,minute:15},
    			{hour:18,minute:15},
    			{hour:21,minute:15}
    		)}
    
    		events[13]={name: 'Event 13:', startUp: new Array(
    			{hour:3,minute:35},
    			{hour:7,minute:35},
    			{hour:11,minute:35},
    			{hour:15,minute:35},
    			{hour:19,minute:35},
    			{hour:23,minute:35}
    		)}
    
    		events[14]={name: 'Event 14:', startUp: new Array(
    			{hour:0,minute:25},
    			{hour:1,minute:25},
    			{hour:2,minute:25},
    			{hour:3,minute:25},
    			{hour:4,minute:25},
    			{hour:5,minute:25},
    			{hour:6,minute:25},
    			{hour:7,minute:25},
    			{hour:8,minute:25},
    			{hour:9,minute:25},
    			{hour:10,minute:25},
                {hour:11,minute:25},
    			{hour:12,minute:25},
    			{hour:13,minute:25},
    			{hour:14,minute:25},
    			{hour:15,minute:25},
    			{hour:16,minute:25},
    			{hour:17,minute:25},
    			{hour:18,minute:25},
    			{hour:19,minute:25},
    			{hour:20,minute:25},
    			{hour:21,minute:25},
    			{hour:22,minute:25},
                {hour:23,minute:25},
                {hour:24,minute:25}
    		)}
    
    		events[15]={name: 'Event 15:', startUp: new Array(
    			{hour:1,minute:25},
    			{hour:5,minute:55},
    			{hour:10,minute:25},
    			{hour:14,minute:55},
    			{hour:19,minute:25}
    		)}
    
    		events[16]={name: 'Event 16:', startUp: new Array(
    			{hour:5,minute:45},
    			{hour:11,minute:45},
    			{hour:17,minute:45},
    			{hour:23,minute:45}
    		)}
    
    		var curTime  = **Problem here **
    		var dateTime = **Problem here **
    		function timeLeft(i){
    			for(j in events[i].startUp){
    				tmp=events[i].startUp[j].hour*3600+events[i].startUp[j].minute*60
    				if(dateTime+tmp>curTime){
    					return dateTime+tmp-curTime;
    				}
    			}
    			tmp=events[i].startUp[0].hour*3600+events[i].startUp[0].minute*60
    			return dateTime+86400+tmp-curTime;
    		}
    
    		function getFormatedLeftTime($seconds){
    			$second = $seconds % 60;
    			$minutes = parseInt(($seconds / 60) % 60);
    			$hour =  parseInt(($seconds / 3600) % 24);
    			$days = parseInt($seconds / (24 * 3600));
    
    			$ret = '';
    			if ($days > 0)
    				if ($days == 1) $ret += '1 day ';
    				else $ret += $days + ' days ';
    				
    			
    			if ($hour > 0){
    				if ($hour < 10) $hour = '0' + $hour;
    				$ret += $hour + ':';
    			}else if ($days > 0) $ret += '00:';
    			
    			if($minutes < 10) $minutes = '0' + $minutes;
    			
    			$ret += $minutes + ':';
    			
    			if ($second < 10) $second = '0' + $second;
    			
    			$ret += $second;
    			return $ret;
    
    		}
    
    		function updateTimes(){
    			curTime++;
    			for (i in events){
    				document.getElementById("timeLeft"+i).innerHTML=getFormatedLeftTime(timeLeft(i));
    			}
    		}
    
    		for(i in events)
    			document.getElementById("eventList").innerHTML+="<div style='float:right; color: #FFFF00;' id='timeLeft"+i+"'>"+getFormatedLeftTime(timeLeft(i))+"</div><div style=\"color: #00FFFF;\"><strong>"+events[i].name+"</strong></div>";
    		setInterval("updateTimes()", 1000);
    
    		
    
    		</SCRIPT>

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Every time you refresh the page, you are clearing those variables and starting from scratch.

    If you need something to remain consistent, even if you close the browser and come back, plant a cookie to the hard drive with a datetime stamp on it, and calculate from there. OR, you can do the same thing with a server-side language and a database.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles