如何使用Javascript在Html頁面上添加Timer

Question

我需要使用javascript在我的html頁面上計時。 但是我有<input type="date" />並且計時器獲得所選的日期時間並控制它。 如果當前時間和所選時間之間的差異接近例如最近1天。 計時器顯示警報消息。 我怎樣才能做到這一點？ 我需要比較當前時間和選定時間。 感謝所有回復。

 function add() { var num = document.getElementById("t1").rows.length; console.log(num); var x = document.createElement("tr"); var a = document.createElement("td"); var anode = document.createTextNode(num + '.'); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement("input"); var b = document.createAttribute("type"); b.value = "checkbox"; anode.setAttributeNode(b); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement("input") var b = document.createAttribute("type"); b.value = "date"; anode.setAttributeNode(b); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement("input"); b = document.createAttribute("type"); b.value = "text"; anode.setAttributeNode(b); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement('input'); anode.setAttribute('type', 'button'); anode.setAttribute('value', 'Delete Row'); anode.setAttribute('onclick', 'deleteRow(this)'); a.appendChild(anode); x.appendChild(a); document.getElementById("t1").appendChild(x); } function deleteRow(e, v) { var tr = e.parentElement.parentElement; var tbl = e.parentElement.parentElement.parentElement; tbl.removeChild(tr); } 

 table { border-collapse: collapse; margin: 10px; } table, td, th { border: 1px solid black; padding: 10px; } 

 <table id="t1"> <tr> <th></th> <th></th> <th></th> <th></th> <th> <input style="padding:10px" type="button" value="Add Row" onclick="add()" /> </th> </tr> <tr> <td>1.</td> <td> <input type="checkbox" /> </td> <td> <input type="date" /> </td> <td> <input type="text" /> </td> <td> <input type="button" value="Delete Row" onclick="deleteRow(this)" /> </td> </tr> </table> 

Answer 1

我希望我能正確地理解你的問題 - 聽起來你想通知用戶他們選擇的日期是否是當前日期之后（或之前？目前還不清楚）的x天數。

如果是這種情況，這應該對你有用。 我將限制設置為當前日期之前或之后的2天 - 因此，如果與當前日期之間存在至少+/- 2天的差異，您將收到警報。

當日期輸入的值更改時，將觸發此操作

 $(document).ready( function() { // When date input value is changed... $('.date').change( function() { // Create Date object for current date and date selected by user var today = new Date(); var selectedDate = new Date( $(this).val() ); // Use UTC to prevent daylight savings, etc. errors var milliseconds = 86400000; var utcToday = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()); var utcSelected = Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()); // Get difference (in days) between dates var result = Math.floor((utcSelected - utcToday) / milliseconds); // Check result, alert if at least +/- 2 days from current date if(result >= 2 || result <= -2) alert("2+ days difference between current date and selected date"); }); }); 

 <!-- Include jQuery... assuming this is ok since you tagged this question with jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Added class "date" to input --> <input class="date" type="date" /> 

Answer 2

您可以使用setTimeout這將在給定的毫秒后調用指定的函數，在這種情況下3秒后它將調用myFunction。

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>