Question

我试图创建一个倒计时到我的网站，我想要的是每3小时倒计时将重置为3小时。

它是这样的：开始倒计时 - 12：00（00:00:01）为2:60:59并结束倒计时 - 凌晨3点为0:00:00 那么它将再次开始 - 凌晨3点（03:00:01）为2:60:59，结束倒计时6点：0：00：00等...并获得服务器时间而不是本地机器时间。

我能够用PHP制作它，而这里是代码

来自我的控制器

function timer(){
    $time = time(); 
    $sincelaststart = $time % (2 * 60 * 60);
    $untilnextcount = 2 * 60 * 60 - $sincelaststart;
    echo date('H:i:s', $untilnextcount);
}

来自我的展示

<script type="text/javascript">
    var auto_refresh = setInterval(
    function ()
    {
        $('#countdown').load("<?php echo base_url('test/timer'); ?>");
    }, 1000); 
</script>

<span id="countdown"></span>

我现在要做的就是纯粹的javascript。到目前为止，我已经运行了这个行代码，但它给了我太多时间加载页面。

  (function() {
var date = new Date();
var currenthours = date.getHours();
var currentminutes = date.getMinutes();
var currentseconds = date.getSeconds();


var start = new Date;


if(currenthours >= 21 && currentminutes > 0 && currentseconds>0){
  start.setHours(24, 0, 0); // 12mn
}else if(currenthours >= 18 && currentminutes > 0 && currentseconds>0){
  start.setHours(21, 0, 0); // 9pm
}else if(currenthours >= 15 && currentminutes > 0 && currentseconds>0){
  start.setHours(18, 0, 0); // 6pm
}else if(currenthours >= 12 && currentminutes > 0 && currentseconds>0){
  start.setHours(15, 0, 0); // 3pm
}else if(currenthours >= 9 && currentminutes > 0 && currentseconds>0){
  start.setHours(12, 0, 0); // 12nn
}else if(currenthours >= 6 && currentminutes > 0 && currentseconds>0){
  start.setHours(9, 0, 0); // 9am
}else if(currenthours >= 3 && currentminutes > 0 && currentseconds>0){
  start.setHours(6, 0, 0); // 6am
}else if(currenthours >= 0 && currentminutes > 0 && currentseconds>0){
  start.setHours(3, 0, 0); // 3am
}



  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    // if (now > start) { // too late, go to tomorrow
    //   start.setDate(start.getDate() + 1);
    // }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('lbnextwar').innerHTML =
      hh + ":" + mm + ":" + ss;
    if(hh==0 && mm==0 && ss==0){
      start.setHours(start.getHours() + 3);
    }
    if((hh==0 && mm==0 && ss==0) || (hh==2 && mm>=40 && ss>=0)){
        $('#nationmatch').show();
    }else{
        $('#nationmatch').hide();
    }

    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

提前谢谢！

Answer 1

我只是从javascript代码中移除了php部分，它工作得很好

<html>
<body>
<span id="countdown"></span>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var auto_refresh = setInterval(
    function ()
    {
        $('#countdown').load('test/timer.php');
    }, 1000); 
</script>

javascript倒计时器使用服务器时间每3小时一次

1 个答案: