Results 1 to 3 of 3

Thread: Help useing a timer/countdown

  1. #1
    Join Date
    Apr 2011

    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

    <SCRIPT type=text/javascript>
    		var events = new Array();
    		events[1]={name: 'Event 0:', startUp: new Array(
    		events[2]={name: 'Event 1:', startUp: new Array(
    		events[3]={name: 'Event 2:', startUp: new Array(
    		events[4]={name: 'Event 3:', startUp: new Array(
    		events[5]={name: 'Event 4:', startUp: new Array(
    		events[6]={name: 'Event 5:', startUp: new Array(
    		events[7]={name: 'Event 6:', startUp: new Array(
    		events[7]={name: 'Event 7:', startUp: new Array(
    		events[8]={name: 'Event 8:', startUp: new Array(
    		events[9]={name: 'Event 9:', startUp: new Array(
    		events[10]={name: 'Event 10:', startUp: new Array(
    		events[11]={name: 'Event 11:', startUp: new Array(
    		events[12]={name: 'Event 12:', startUp: new Array(
    		events[13]={name: 'Event 13:', startUp: new Array(
    		events[14]={name: 'Event 14:', startUp: new Array(
    		events[15]={name: 'Event 15:', startUp: new Array(
    		events[16]={name: 'Event 16:', startUp: new Array(
    		var curTime  = **Problem here **
    		var dateTime = **Problem here **
    		function timeLeft(i){
    			for(j in events[i].startUp){
    					return dateTime+tmp-curTime;
    			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(){
    			for (i in events){
    		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);

  2. #2
    Join Date
    Dec 2002
    St. Louis, MO, USA
    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.
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long


  3. #3
    Join Date
    Apr 2017


    Sorry to resurrect this one, but it seems to be languishing without a proper answer. I used the tiny script below when I was making major changes to a web site to indicate when it would be back on line.

    It will maintain an accurate 1-hour countdown no matter if browser is refreshed, or closed down and page reloaded. The script should be activated a few seconds past any hour of the day. Example

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>1 hour countdown</title>

    <style type="text/css">

    border:1px solid blue;
    width: 500px;
    padding: 20px;
    border-radius: 25px;
    background-color: #ffffff;

    .auto-style1 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    border: 0px;

    .auto-style2 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;


    <script type="application/javascript">
    function secondsLeft() {
    now = new Date()
    mins = now.getMinutes();
    secs = now.getSeconds();

    if(secs === 0){
    document.f1.t1.value = 0;
    val = document.f1.t2.value
    document.f1.t2.value = val - 1;
    document.f1.t1.value = 60 - secs;

    function init() {
    now = new Date()
    mins = now.getMinutes();
    document.f1.t2.value = 60 - mins;
    timer = setInterval("secondsLeft()", 1000);


    <body onload="init()">
    <p class="auto-style2">1 hour countdown - activate a few seconds past any hour of the day.<br />

    <p class="auto-style1"><span lang="en-gb">
    <form name="f1" onsubmit="return false">Time remaining:
    <input class="auto-style1" style="width: 30px; color: blue;" type="text" name="t2" size=2>minutes,
    <input class="auto-style1" style="width: 30px; color: blue;" type="text" name="t1" size=2>seconds.



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