PHP:进行倒计时自动更新

时间:2017-09-11 19:45:16

标签: javascript php

我是php的新手,也是 stackoverflow 的新手,到目前为止我已经开始学习PHP几个月了,

所以我的观点是进行倒计时自动刷新,目前我必须刷新页面以获得新结果,有没有办法让它自动更新

我使用以下code来实现我的需求:

<?php 

$date = strtotime("September 12, 2017 2:00 PM");
$remaining = $date - time();


$days_remaining = floor($remaining / 86400);
$hours_remaining = floor(($remaining % 86400) / 3600);
$min_remaining = floor(($remaining % 3600) / 60);
$seconds_remaining = floor($remaining % 60);

echo "There are $days_remaining days and $hours_remaining hours left and 
$min_remaining minutes left and $seconds_remaining left";

?>

但是..我必须每次更新页面以获得新结果。

更新

哎呀..我不得不使用javascript。如果你愿意,可以使用这个代码完美地运作

  <script>
    var end = new Date('09/12/2017 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>

<!DOCTYPE html>
<head>

</head>
<body>
<div id="countdown">

    <h1 id="countdown"></h1>



</div>
    </body>

2 个答案:

答案 0 :(得分:0)

您应该使用JavaScript来执行此操作,link上有一个如何使用JavaScript实现倒数计时器的示例。

答案 1 :(得分:0)

这是另一个计时器的例子,这个包含它的方法,只将它的一些方法暴露给外部范围。

// Setup countdown timer.
const Timer = (countdownTime, elementId, intervalTime = 1000, doneMessage = 'Expired.') => {
  // Set up an internal datastore, this is not accessible from outside the method.
  let store = {
    end: new Date(countdownTime).getTime(),
    current: null,
    interval: intervalTime,
    intervalId: null,
    element: document.getElementById(elementId),
    msg: doneMessage,
  };

  // Format time and update attached element.
  const updateTime = () => {
    // Get current difference.
    let now = store.end - store.current;

    // If current remaining is greater than 0 format the timer.
    if (now > 0) {
      let   d = Math.floor(now / (1000 * 60 * 60 * 24))
      ,   h = Math.floor((now % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      ,   m = Math.floor((now % (1000 * 60 * 60)) / (1000 * 60))
      ,   s = Math.floor((now % (1000 * 60)) / 1000);

      store.element.textContent = `${d} days --- ${h} hours --- ${m} minutes --- ${s} seconds`;
      return;
    }
    // use expired message if not.
    store.element.textContent = store.msg;
  };

  // This is the method your interval is using to tick down the time.
  const tick = () => {
    // get current time.
    store.current = new Date().getTime();
    // stop Timer interval if time is negative.
    if (store.current < 0) {
      public.stop();
    }
    updateTime();
  }

  // these methods will be accessible from outside the Timer function.
  let public = {
    // lets you see your datastore keys.
    get: key => (store.hasOwnProperty(key)) ? store[key] : false,
    // start interval.
    start: () => {
      store.intervalId = setInterval(tick, store.interval)
    },
    // stop interval
    stop: () => clearInterval(store.intervalId),
    // clear and reset interval
    reset: () => {
      clearInterval(store.intervalId);
      store.interval = null;
    },
  }
  // return public methods for your timer.
  return public;
}

// instantiate timer with basic options.
let countdown = Timer('09/12/2017 10:1 AM', 'countdown');
// start countdown.
countdown.start();