www.webdeveloper.com
Results 1 to 6 of 6

Thread: JavaScript, PHP timer

  1. #1
    Join Date
    May 2014
    Posts
    2

    Angry JavaScript, PHP timer

    Hello. First I`m sorry for my English.

    I looked everywhere but not find an answer. I want to do "loop-timer" - when the timer finishes called another timer.

    e.g.:
    first round - 5min.
    pause between rounds - 1min.
    Second round - again 5 minutes, etc.
    For example in
    HTML Code:
    <div id="countbox1"></div>
    first show first timer and then show the second timer.
    I do not understand much JavaScript. So if you can help me. I have the following code:


    Code:
    <?php
        $delay = time() + 5; //for test
        $Y = date('Y', $delay);
        $m = "0" . (date('m', $delay) - 1) . "";
        $d = date('d', $delay);
        $H = date('H', $delay);
        $i = date('i', $delay);
        $s = date('s', $delay);
        $time = $Y . ',' . $m . ',' . $d . ',' . $H . ',' . $i . ',' . $s;
        ?>
        <script >
          dateFuture1 = new Date(<?php echo $time; ?>);
          function GetCount(ddate, iid) {
            dateNow = new Date();
            amount = ddate.getTime() - dateNow.getTime();
            delete dateNow;
            if (amount <= 0) {
    
              //timer is finish
    
            }
    
            else {
              days = 0;
              hours = 0;
              mins = 0;
              secs = 0;
              out = "";
    
              amount = Math.floor(amount / 1000);
    
              days = Math.floor(amount / 86400);
              amount = amount % 86400;
    
              hours = Math.floor(amount / 3600);
              amount = amount % 3600;
    
              mins = Math.floor(amount / 60);
              amount = amount % 60;
    
              secs = Math.floor(amount);
    
              if (days != 0) {
                out += days + " " + ((days == 1) ? "day" : "days") + ", ";
              }
              if (hours != 0) {
                out += hours + " " + ((hours == 1) ? "hour" : "hours") + ", ";
              }
              if (mins <= 9) {
                out += "0" + mins + " " + ((mins == 1) ? "" : "") + " : ";
              }
              if (mins > 9) {
                out += mins + " " + ((mins == 1) ? "" : "") + " : ";
              }
              if (secs <= 9) {
                out += "0" + secs + " " + ((secs == 1) ? "" : "") + ", ";
              }
              if (secs > 9) {
                out += secs + " " + ((secs == 1) ? "" : "") + ", ";
              }
              out = out.substr(0, out.length - 2);
              document.getElementById(iid).innerHTML = out;
              setTimeout(function() {
                GetCount(ddate, iid)
              }, 1000);
            }
          }
          window.onload = function() {
            GetCount(dateFuture1, "countbox1");
          };
        </script>
    
        <div id="countbox1"></div>
    Someone give me an example?

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Have fun ^_^
    PHP Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Continuous Countdown + Wait</title>
    <script>
    var future = new Date(new Date().getTime() + (5 * 60 * 1000));
    // using PHP here isn't necessary...
    //var future = new Date('<?php echo gmdate('r'time() + (60)); ?>');
    var IID = false;
    var $fn = function()
    {
        countdown('foo');
    };
    function countdown(id)
    {
        var time = future - new Date().getTime(),
            str = '',
            d, h, m, s;

        if (time > 0) {
            time = Math.floor(time / 1000);
            d = Math.floor(time / 86400);
            h = Math.floor((time / 3600) % 24);
            m = Math.floor((time / 60) % 60);
            s = Math.floor(time % 60);
            str += (d > 0) ? d + ' day' + (d > 1 ? 's' : '') : '';
            str += ' ' +h+ ':' +m+ ':' +s+ '';

            if (IID === false)
                IID = setInterval($fn, 1000);
        } else {
            clearInterval(IID);
            IID = false;
            str = 'PAUSED!';
            // 1 min wait...
            setTimeout(function(){
                // update future when this is called, add offset...
                future = new Date(new Date().getTime() + (5 * 60 * 1000));
                $fn.call();
            }, 1 * 60 * 1000);
        }
        document.getElementById(id).innerHTML = str;
    }
    window.onload = $fn;
    </script>
    </head>
    <body>
    <p id="foo"></p>
    </body>
    </html>
    Last edited by ShrineDesigns; 05-21-2014 at 07:55 PM.

  3. #3
    Join Date
    May 2014
    Posts
    2
    Quote Originally Posted by ShrineDesigns View Post
    Have fun ^_^
    thank you very much, but can instead "Pause" display counter

  4. #4
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    var duration = [5 * 60 * 1000, 1 * 60 * 1000],
    	phase = 0,
    	IID = false,
    	future;
    
    function time()
    {
    	return new Date().getTime();
    }
    function fTime(int)
    {
    	var t = Math.floor(int / 86400),
    		s = '';
    
    	if (t > 0)
    		s += t + ' day' + (t > 1 ? 's' : '') + ' ';
    	t = Math.floor((int / 3600) % 24);
    	s += t + ':';
    	t = Math.floor((int / 60) % 60);
    	s += (t < 10 ? '0' : '') + t + ':';
    	t = Math.floor(int % 60);
    	s += (t < 10 ? '0' : '') + t + '';
    	return s;
    }
    var $fn = function()
    {
    	timer.call(null, 'foo');
    }
    function timer(id)
    {
    	var left = Math.ceil((future - time()) / 1000);
    	document.getElementById(id).innerHTML = fTime(left);
    
    	if (left > -1) {
    		if (IID === false) {
    			IID = setInterval($fn, 1000);
    		}
    	} else {
    		clearInterval(IID);
    		IID = false;
    		future = time() + duration[phase];
    		phase = ~phase & 1;
    		$fn.call(null, id);
    	}
    }
    window.onload = $fn;
    </script>
    </head>
    <body>
    <div id="foo"></div>
    </body>
    </html>

  5. #5
    Join Date
    May 2014
    Posts
    10
    There is a big difference showing between both scripts.

  6. #6
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Quote Originally Posted by sawan20 View Post
    There is a big difference showing between both scripts.
    put repetitive code into functions. and cleaned it up a bit. for some odd reason i cannot edit my previous posts >_>
    forgot to initialize future.
    replace
    Code:
    	future;
    with
    Code:
    	future = time() + duration[0];

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