當時間消失時，使用PHP和JavaScript禁用按鈕

我試圖在應用程序截止時間結束時禁用「應用」按鈕。我使用了PHP，並且我成功地在每個按鈕上獲得了時間。現在不同的時間是在不同的按鈕上打印。當時間消失時，使用PHP和JavaScript禁用按鈕

<td><input type='submit' value='Apply' id='button' name='button' date-time='$closedate' /></td>

我使用的jquery/javascript來禁用按鈕過期時間（應用程序的截止日期之後）之後，它不能禁用和它始終啓用。

在下面的代碼中，我用於禁用按鈕的代碼，但它不起作用。

<script> 

    $(document).ready(function() { 
     var timer = setInterval(function() { 
     var current = $("#button").data('time'); 
     // get the current value of the time in seconds 
     var newtime = current - 1; 
     if (newtime <= 0) { 
      // time is less than or equal to 0 
      // so disable the button and stop the interval function 
      $("#button").prop('disabled', true); 
      clearInterval(timer); 
     } else { 
      // timer is still above 0 seconds so decrease it 
      $("#button").data('time', newtime); 
     } 
    }, 1000); 
}); 

</script>

來源

2017-05-04 Akshit Patel

幾個問題...

首先，在你的HTML，你有date-time代替data-time，所以當你去後與獲取屬性：$("#button").data('time')，你不會得到任何東西。其次，你必須記得將HTML數據（它總是一個字符串）轉換成數字來與他們進行數學運算。

第三，您需要驗證$closedate是可以轉換爲有效數字的字符串。您在下面的評論中指出，$closedate將如下所示：2017-03-17。但這不是你可以從中減去的價值。

最後，更新HTML在性能方面代價很高。您在setInterval()的每次迭代中修改data-time屬性，這大約是每秒一次。這可以也應該避免。可以通過將時間保留在變量中而不是將其寫回文檔來完成。

這裏有一個工作版本：

$(document).ready(function() { 
 

 
    // Always cache references to elements you will use more than once: 
 
    var $btn = $("#button"); 
 
    
 
    // When gettting data from HTML, you get strings. You must convert 
 
    // them to numbers to do math with them. Also, we are using 5 seconds 
 
    // here instead of $closedate for testing purposes. 
 
    var current = parseInt($btn.data('time'), 10); 
 
    
 
    // Initialize the newtime for comparison 
 
    var newtime = current; 
 
    
 
    var timer = setInterval(function() { 
 
    
 
    newtime--; // Decrease the time left 
 
    
 
    // Just testing the variables: 
 
    console.log(current, newtime); 
 
    
 
    if (newtime <= 0) { 
 
     // time is less than or equal to 0 
 
     // so disable the button and stop the interval function 
 
     $btn.prop('disabled', true); 
 
     clearInterval(timer); 
 
    } 
 
     
 
    current--; // Decrease the counter 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='submit' value='Apply' id='button' name='button' data-time='5'>

來源

2017-05-04 19:45:34

的基礎上你已經放下，似乎有需要在
1來看待一些簡單的錯誤）看起來像一個簡單的錯字 - 日期-時間應該是數據-時間
2）你實際上並沒有輸出$ clo的值穩重嘗試將其更改爲

不知道什麼$ closedate的值，我們將不能夠進一步幫助比

來源

2017-05-04 19:46:53

我得到了我使用php變量$ closedate存儲在mysql數據庫中的截止日期。像\t 2017-03-17。 \t $ closedate = $ row_op ['closedate']; –

在這種情況下，您的javascript將會成爲問題，您需要將closedate轉換爲一個值，該值表示現在和該日期之間的差異，以秒爲單位。這將允許您的JavaScript倒計時，基於當前的邏輯。：看到這個鏈接獲得在幾秒鐘內的差異http://stackoverflow.com/questions/5988450/difference-between-2-dates-in-seconds –

這裏是複製一個例子的小提琴...... https://jsfiddle.net/o2gxgz9r/6656/

您的主要問題是您的代碼中的data-time屬性拼寫爲date-time。您的html應如下所示...

<input type='submit' value='Apply' id='button' name='button' data-time='$closedate' />

修復後，您應該能夠引用數據值。此外，您不更新數據值，因此每次調用setInterval時，變量$closedate保持不變，因此if語句永遠不會到達...

var timer = setInterval(function() { 

    // get the current value of the time in seconds 
    var current = $("#button").data('time'); 

    // decrement the time 
    var newtime = current - 1; 

    // update $closedate 
    $("#button").data('time', newtime); 

    if (newtime <= 0) { 
     // time is less than or equal to 0 
     // so disable the button and stop the interval function 
     $("#button").prop('disabled', true); 
     clearInterval(timer); 
    } else { 
     // timer is still above 0 seconds so decrease it 
     $("#button").data('time', newtime); 
    } 
}, 1000);

我不知道什麼$closedate值，但我改變了我的小提琴的假設。

來源

2017-05-04 20:04:58 Bolboa

當時間消失時，使用PHP和JavaScript禁用按鈕

回答

相關問題