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

Question

I need to timer on my html page with using javascript. But I have <input type="date" /> and timer get the selected date time and control it. If the differences between current time and selected time close in for instance last 1 day. Timer show alert message. How can I do this? I need to compare current time and selected time. Thanks for all response.

 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

I am hoping that I understood your question correctly - It sounds like you would like to notify the user if the date that they select is x number of days after (or before? This was unclear) the current date.

If that is the case, this should work for you. I set the limit to 2 days before or after the current date - so if there is a difference of at least +/- 2 days from the current date, you will get an alert.

This fires when the date input's value is changed

 $(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

You could use setTimeout this will essential call the specified function after the given milliseconds in this case after 3 seconds it will call myFunction.

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

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