如何使頁面刷新不刷新的Javascript倒數計時器

-1

我正在創建一個拍賣網站，但我無法制定如何使所有用戶都修復倒計時計時器的方法。我嘗試使用Ajax但它幾乎沒有任何幫助。我在這裏上傳我的代碼。如何使頁面刷新不刷新的Javascript倒數計時器

<!DOCTYPE html> 
    <html> 

    <head> 
    <style> 
    body 
    { 
    background-image:url('s.png'); 
    background-size: 1370px 652px; 
    background-repeat: no-repeat; 
    } 

    div.padding { 
     padding-top: 270px; 
     padding-bottom: 125px; 
     padding-right: 50px; 
     padding-left: 170px; 
    } 
    </style> 
    </head> 
    <body> 


    <div class="padding"> 


    <?php 
    $con=mysqli_connect("127.0.0.1","root","","rocauction_db"); 
    $x=$_POST["serial"]; 
    $result = mysqli_query($con,"SELECT * FROM playerdb Where Serial=$x"); 
    while($row = mysqli_fetch_array($result)) 
    { 

     echo " <b> Name: </b>" . $row['name'] ; 
     echo "<br>"; 
     echo " <b> Score: </b>" . $row['score'] ; 
     echo "<br>"; 
     echo " <b> Link: </b>" . $row['link'] ; 
     echo "<br>"; 
     echo " <b> Price: </b>" . $row['price'] ; 
     echo "<br>";  
    } 
    mysqli_close($con); 
    ?> 

    Bid: <input type="text" style="width: 30px" disabled id="mybid" name="" value="" onkeydown="if (event.keyCode == 13) myFunction();secon(1);"> 
    <p id="demo" >No Bids Available</p> 
    <p id="count" ></p> 

    <script> 
    var txt=""; 
    function myFunction() 
    { 
    txt=""; 
    var x = document.getElementById("mybid"); 
    txt=x.value; 
    txt=parseInt(txt); 
    txt=txt+20; 
    document.getElementById("demo").innerHTML="<b>Current bid : </b>"+txt+"m"; 
    } 

    var second=60; 
    var minutes; 
    function secon(check) 
    { 
    if(check==1){ 
    second=60; 
    } 
     minutes=Math.floor(second/60); 
     var seconde = second - minutes * 60; 
     if(seconde<10) 
       document.getElementById('count').innerHTML = "<b>Time Remaining : </b>"+minutes +"<b>:</b>0" +seconde; 
     else 
      document.getElementById('count').innerHTML = "<b>Time Remaining : </b>"+minutes +"<b>:</b>" +seconde; 
     if (second == 0 && minutes == 0) 
     { 
     clearInterval(countdownTimer1); 
     document.getElementById("mybid").disabled = true; 
     if(txt=="") 
      document.getElementById('count').innerHTML = "<b>Unsold!!!</b>"; 
     else 
      document.getElementById('count').innerHTML = "<b>Sold for : </b>"+txt+"m"; 
     } 
     else 
     { 
       second--; 
      } 
    } 
    var countdownTimer1 = setInterval('secon()', 1000); 

    </script> 

    </div> 

    </body> 
    </html>

來源

2014-07-03 user3800381

爲什麼不計算留給未來的時間對每一個加載時間。這樣你就不需要記住計時器。 – GoodSp33d

你不能阻止用戶刷新網站或它的單個元素，但也許你可以通過使用

window.onbeforeunload

實現你所希望的方向的東西嗎？

來源

2014-07-03 06:50:06

你說你需要它保持頁面刷新，如果它不需要長時間停留可能服務器php不需要，html5本地存儲怎麼樣？

$('document').ready(function(){ 
       start = 1000; 
       timer = localStorage.timer ? localStorage.timer : start; 

       setInterval(function(){ 
        console.log(timer--); 
        localStorage.setItem("timer",timer); 
       },1000); 
      });

這將檢查一個值是否存儲在本地存儲中，如果沒有，它將從指定的開始啓動定時器。

來源

2014-07-03 06:54:25 Kiee

你可以使用jQuery倒計時器，但同時刷新頁面，您可以設置當前時間，讓我們不會錯過的時間差距

請看這裏尋求幫助：http://keith-wood.name/countdown.html

來源

2014-07-03 06:54:27

您需要設定時間留在你的session，這樣你會得到確切的時間。在兩者之間需要根據當前時間重新設置剩餘時間。

我的PHP代碼：

date_default_timezone_set("Asia/Calcutta"); 

$oldtime = $_session['start_time']; 
$newtime = time(); 
$difference = $newtime - $oldtime; 
$time_remaining = $_session['time_remaining'] - $difference; 

$_session['time_remaining'] =$time_remaining; 

if ($_session['time_remaining'] > 0) 
{ 
    $_session['start_time'] =$newtime; 
} 
else 
{ 
    //'end_of_time'; 
}

的JavaScript：

var seconds = <?php echo $_session['time_remaining']?>; 
    function secondPassed() 
    { 
     var minutes = Math.round((seconds - 30)/60); 
     var remainingSeconds = seconds % 60; 
     if (remainingSeconds < 10) 
     { 
      remainingSeconds = "0" + remainingSeconds; 
     } 
     document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 

     if (seconds == 0 || seconds<0) 
     { 
      clearInterval(countdownTimer); 
     } 
     else 
     { 
      seconds--; 
     } 
    } 
    var countdownTimer = setInterval('secondPassed()', 1000);

來源

2014-07-03 06:57:33 AkshayP

如何使頁面刷新不刷新的Javascript倒數計時器

回答

相關問題