如何创建计时器

时间:2012-12-07 13:17:27

标签: php javascript jquery html

我有一个$dbSessionDuration变量,通过使用mysqli,它可以将查询中的数据结果绑定到此变量中。 $dbSessionDuration变量保留时间,因此变量的时间格式如下:

1时30分一十秒

现在这意味着1小时30分10秒。我想要做的是在计时器中显示$dbSessionDuration值,以便在上面的示例中它将从01:30:10开始滴答,并在停止时一直向下移动到0。我的问题是如何创建计时器并在计时器中放置任何值$dbSessionDuration以倒计时到00:00:00?

7 个答案:

答案 0 :(得分:12)

首先,你必须以秒为单位转换你的时间。

<?php

list($hour,$min,$sec) = explode(':', $dbSessionDuration);
$dbSessionDurationTime = mktime(0,0,0,$hour,$min,$sec);

?>

要创建倒计时,您必须使用Javascript。

<script type="text/javascript">
    var millis = <?php echo $dbSessionDurationTime; ?>

    function displaytimer(){
        var hours = Math.floor(millis / 36e5),
            mins = Math.floor((millis % 36e5) / 6e4),
            secs = Math.floor((millis % 6e4) / 1000);
            //Here, the DOM that the timer will appear using jQuery
            $('.count').html(hours+':'+mins+':'+secs);  
    }

    setInterval(function(){
        millis -= 1000;
        displaytimer();
    }, 1000);

</script>

我没有测试,但这应该有效!

答案 1 :(得分:4)

首先应该知道,您创建的任何 JavaScript计时器都不准确。这是由于无数原因总结得非常好here

现在的美妙之处在于,您可以通过在每次迭代时简单检查用户的系统时间来限制脚本的不准确性。是用户的系统时间

在您的情况下,这不是问题,因为您对经过的时间(01:30:10)感兴趣,但如果您在特定时刻等待,则需要处理时区差异或只是在用户的计算机上设置了一个糟糕的时钟。

您还必须了解的是,如果这是一个安全问题,您将无法在加载脚本后考虑系统时钟的更改。

示例: 某些网站会强制您在执行特定操作之前等待。但是,在大多数情况下,改变你的时钟会帮助你绕过糟糕的安全性。在大多数情况下,它不会因为二次检查是在服务器端完成的。我想说的是, 进行服务器端检查


要回答您的问题,我会亲自计算通过所需的秒数:

$time = explode(':',$dbSessionDuration);# get hour, minutes, seconds to be elapsed
$time = $time[2] + $time[1] * 60 + $time[0] * 3600;# get elapse time in seconds

在您的JavaScript文件中,您可以执行以下操作:

(function(endTime){
    endTime*=1000; // javascript works with milliseconds
    endTime+=new Date().getTime();// add the current system time into the equation
    // your timeSync function
    (function timerSync() {
        var diff = new Date(endTime - new Date().getTime());
        var timer=document.getElementById('timer');
        if(diff<=0)return timerEnd(timer);
        timer.innerHTML = 
            doubleDigits(diff.getUTCHours())
            + ':' +
            doubleDigits(diff.getUTCMinutes())
            + ':' +
            doubleDigits(diff.getUTCSeconds())
        ;
        setTimeout(timerSync,1000);
    })();// also call it to start the timer
    // your timer end function
    function timerEnd(timer) {
        timer.innerHTML='Timer has stopped now';
    }
    // double digit formatting
    function doubleDigits(number) {
        return number<10
            ? '0'+number
            : number
        ;
    } 
})(
    <?php echo $time;?>
);// time to elapse 1:30:10

这是一个有效的fiddle,但请记住。这不是针对您的具体情况进行优化的。你仍然可以将它包装在一个对象中,如果你在页面上有两个定时器,不要用完全相同的函数加倍闭包内存。

如果您有任何疑问,请在评论中提问,我会尽力提供帮助。

答案 2 :(得分:3)

代码:http://jsfiddle.net/g3rRJ/

我把时间分成小时,分钟和秒。每一秒都会减少时钟。 Algo非常直接我相信:

var timer = setInterval(function(){
        seconds--;
        if(seconds == -1) {
            seconds = 59;
            minutes--;

            if(minutes == -1) {
                minutes = 59;
                hours--;

                if(hours==-1) {
                  alert("timer finished");
                  clearInterval(timer);
                  return;
                }
            }
        }
        span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);

答案 3 :(得分:3)

使用jQuery。

这是一个不错的插件https://github.com/jylauril/jquery-runner

这是一个例子:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="https://raw.github.com/jylauril/jquery-runner/master/build/jquery.runner-min.js"></script>      
    </head>
    <body>
        <span id="runner"></span>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#runner').runner({
                    autostart: true,
                    countdown: true,
                    stopAt: 0,
                    startAt: 30000 // alternatively you could just write: 30*1000
                });
            });
        </script>
    </body>
</html>

答案 4 :(得分:3)

如果你需要一个计时器,你可以使用这个plugin in Jquery它效果很好。您只需将时间或$ dbSessionDuration放入HTML的隐藏元素中,然后将其放入jquery计数器插件中。如果这个想法听起来很有趣,请告诉我,我举一个例子。

答案 5 :(得分:0)

你可以更轻松地做到这一点。首先你需要从数据库中检索已经是几秒钟的时间

<?php

    require_once 'db_connect.php';
    $sql = "SELECT * FROM ac_one_config"; 
    $result = $con->query($sql);

    if( $result->num_rows > 0 ){
        while($row=mysqli_fetch_assoc($result)) {
            $time_on = $row['ac_on_time'];
        }
    }
    header( "refresh:$time_on; url=https://localhost/your_project/file.php");

在Javascript中,倒计时开始和倒计时从时间$time_on开始直到0:00:00

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Massive Electronics</title>
    <style type="text/css">
        .myClass {
            font-family: verdana; 
            font-size: 16px; 
            font-weight: normal;  
            color: black;
            line-height: 30px;
        }
   </style>
 </head>
 <body>
     <script type="text/javascript">

        (function () {
            var timeLeft = <?php echo $time_on; ?>,
            cinterval;

            var timeDec = function (){
                timeLeft--;
                document.getElementById('countdown').innerHTML = timeLeft;
                if(timeLeft === 0){
                    clearInterval(cinterval);
                }
            };

            cinterval = setInterval(timeDec, 1000);
         })();

      </script>
      Redirecting in <span id="countdown"><?php echo floor($time_on); ?></span> seconds.<br><br>
      <span class="myClass">Ac ON Page</span>
    </body>
</html>

答案 6 :(得分:0)

设置持续时间并将此值存储在会话变量中。

   <div id="timer"></div>
 <?php

      $_SESSION['TIME_DURATION'] = 45;
      $_SESSION['start_time'] = date("Y-m-d H:i:s");
      $end_time = date("Y-m-d H:i:s", strtotime('+'.$_SESSION['TIME_DURATION'].'minutes',strtotime($_SESSION['start_time'])));
      if(!isset($_SESSION['end_time']) && empty($_SESSION['end_time'])){
         $_SESSION['end_time'] = $end_time;
       }
 ?>

     var myVar = setInterval(myTimer, 1000);

     function myTimer() {
         var xmlhttp = new XMLHttpRequest();

         xmlhttp.open("GET","response.php",false);

         xmlhttp.send(null);

         if(xmlhttp.responseText == "Time Out"){

             myStopFunction();


        }
        $('#timer').html(xmlhttp.responseText);
     }


     function myStopFunction() {
          clearInterval(myVar);
     }

  1. 文件:response.php

    session_start();
    
    if(isset($_SESSION['TIME_DURATION']) && $_SESSION['TIME_DURATION'] != 0 ){
    
          $time_first = strtotime(date("Y-m-d H:i:s"));
    
         $time_second = strtotime($_SESSION['end_time']);
    
         $differenceinseconds = $time_second - $time_first;
    
         $time_lapse=gmdate("i:s",$differenceinseconds); 
         if($time_lapse=='00:00') { 
              echo "Time Out"; 
              unset($_SESSION['start_time']);
              unset($_SESSION['end_time']);
              unset($_SESSION['TIME_DURATION']);
         }else {
            echo gmdate("i:s",$differenceinseconds);
         }
    }else{
         echo "Time Out"; 
    }