2017-09-11 29 views
0

我是新來php,也是新計算器,也是至今爲止它已經有幾個月,我開始學習PHPPHP:製作倒計時自動更新

所以我的觀點正在倒計時自動刷新,目前我必須刷新頁面以獲取新的結果,是有辦法讓它自動更新

我用下面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"; 

?> 

但是..我必須每次更新頁面以獲得新的結果。

更新:

什麼heck ..我不得不使用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> 
+0

你會使用AJAX。 –

+0

@JayBlanchard,唯一的選擇? –

+1

這就是php的工作原理。如果您想要實時倒計時,請使用JavaScript – Andreas

回答

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(); 
0

你應該使用JavaScript來做到這一點,這link對如何實現用JavaScript倒數計時器一個例子。

+0

謝謝,已經得到了一個,再次感謝您的答案 –