Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Help With Timer

  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts

    Question Help With Timer

    Hey all... Been awhile since I've posted here. I have been working on creating a game, and have come across a timer issue.

    I have this code below, but not sure how to actually get the timer to keep its current countdown upon page refresh. I also need to update the database upon completion of the countdown to zero. I've been told I needed Javascript and possibly ajax, so I'm posting here for any help. I don't know much about javascript or ajax; only php. So if I can find a way to use php for changes in my database, but also have it work with the code I currently have, that would be great as well. Any ideas or any help please?

    What I am basically looking for is:

    1. Timer does not restart/clear upon page refresh
    2. After timer runs to zero, then a field in the database is set to either "yes" or "1" to indicate that they now own the object.
    3. After timer runs to zero, have another button show for an upgrade button, and repeat the process after upgrade is done.

    Thank you for any and all help. Here is my current code with a working timer.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var x=2700;
    var m=x/60;
    var   h=m/60;
    var   m=(h-Math.floor(h))*60;
    var s= Math.round((m-Math.floor(m))*60);
    var m = Math.floor(m);
    var h = Math.floor(h);
    if(h<10){
       h = '0'+h;
    }
    if(m<10){
       m = '0'+m;
    }
    if(s<10){
       s = '0'+s;
    }
    var c = h+':'+m+':'+s;
    var t;
    var timer_is_on=0;
    
    function timedCount()
    {
    document.getElementById('txt').value=c;
    if(x>0){
       x=x-1;
       m=x/60;
       h=m/60;
       m=(h-Math.floor(h))*60;
       s= Math.round((m-Math.floor(m))*60);
       m = Math.floor(m);
       h = Math.floor(h);
       if(h<10){
       h = '0'+h;
       }
       if(m<10){
          m = '0'+m;
       }
       if(s<10){
          s = '0'+s;
       }
       c = h+':'+m+':'+s;
    }else{
       c='Ready';
    }
    t=setTimeout("timedCount()",1000);
    }
    
    function doTimer()
    {
    if (!timer_is_on)
      {
      timer_is_on=1;
      timedCount();
      }
    }
    </script> 
    </head>
    
    <body>
    <form>
    <input type="button" value="Build" onclick="doTimer()">
    <input type="text" id="txt">
    </form>
    <p>My Example</p>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    104
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Hi X,

    A few thoughts about your post:

    1. Consider that the state of your page is disconnected from its source, so while the page may deploy a timer, its state is not tracked. You will need to integrate an immutable object that will maintain state information during page reloads. You have options. You may initially load a 'parent' page, whose child has the timer, and have the parent maintain a timestamp of the timer's commencement; when the child reloads, it checks the parent for the timestamp and resets its timer accordingly. You might alternatively use framesets, and maintain timer state info in one frame while reloading another. Also, you might load your page with the timer in an iframe, and access timer state from its parent.

    Of course there's always the option of maintaining state on the server or in a database if you want to expend the resources, though I feel it is overkill: Anything that can effectively be relegated to the client should be.

    2. You can set the value in a database via AJAX, though I wonder why you need to: If all you need is a trigger to change a button on the client then it is unnecessary.

    3. You don't need a trip to the server to change a button on the client's page.

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Thx sbhmf...

    Okay... Here's what I have worked on. I'm trying to make the javascript not work until AFTER the php checks the database and such, but it does both at the same time, which is driving me mad... I have also passed the Javascript COUNTDOWN into a php variable and echo'd that variable to show the time. I think I can eventually do something with it. Not sure....still trying to figure all this out. Below is the code:

    Code:
    <?php
    $db_conx*=*mysqli_connect("localhost",*"root",*"",*"time");
    //*Evaluate*the*connection
    if*(mysqli_connect_errno())*{
    ****echo*mysqli_connect_error();
    ****exit();
    }
    ?>
    
    <table>
    <form*method='post'*action='timerexample.php'>
    <input*type='submit'*value='Build'*/>
    <input*type='hidden'*name='bus'*value='1'></form>
    </table>
    
    <?php
    
    $sql*=*"SELECT***from*times";
    $user_query*=*mysqli_query($db_conx,*$sql);
    $numrows*=*mysqli_num_rows($user_query);********
    while*($row*=*mysqli_fetch_array($user_query,*MYSQLI_ASSOC))*{
    
    if*($row['own']*!=*1)*{
    
    $bus="<img*src='bus.png'>";
    echo*"*$bus";
    
    }else{
    
    echo*"testing";
    }}
    
    ?>
    
    
    <script*type="text/javascript">
    
    var*total_seconds*=*10;
    var*start_time*=*new*Date();
    var*end_time*=*start_time.getTime()*+*(total_seconds***1000);
    
    function*GetCount(){
    
    **var*dateNow*=*new*Date();*****************//grab*current*date
    **var*amount*=*end_time*-*dateNow.getTime();****//calc*milliseconds*between*dates
    **delete*dateNow;
    **
    ****//*time*is*already*past
    ****if(amount*<*0){
    ********document.getElementById('countbox').innerHTML="Now!";
    ****}
    ****//*date*is*still*good
    ****else{
    ********days=0;hours=0;mins=0;secs=0;out="";
    
    ********amount*=*Math.floor(amount/1000);//kill*the*"milliseconds"*so*just*secs
    
    ********days=Math.floor(amount/86400);//days
    ********amount=amount%86400;
    
    ********hours=Math.floor(amount/3600);//hours
    ********amount=amount%3600;
    
    ********mins=Math.floor(amount/60);//minutes
    ********amount=amount%60;
    
    ********secs=Math.floor(amount);//seconds
    
    ********if(days*!=*0){out*+=*days*+"*day"+((days!=1)?"s":"")+",*";}
    ********if(days*!=*0*||*hours*!=*0){out*+=*hours*+"*hour"+((hours!=1)?"s":"")+",*";}
    ********if(days*!=*0*||*hours*!=*0*||*mins*!=*0){out*+=*mins*+"*minute"+((mins!=1)?"s":"")+",*";}
    ********out*+=*secs*+"*seconds";
    ********document.getElementById('countbox').innerHTML=out;
    
    ********setTimeout("GetCount()",*1000);
    ****}
    }
    
    
    </script>
    <div*id="countbox"></div>
    <br*/>
    <br*/>
    
    <?php
    
    
    
    $time*=*'<script*type="text/javascript">
    ***GetCount();
    ***</script>';
    
    echo*$time;
    ?>
    My main issue now is it's showing the javascript countdown timer BEFORE they are able to push the build button. Am I even close to anything here? lol... grrrr.... Thanks for any help...


  •  

    Posting Permissions

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