Code
Now we need to make a slightly complicated thing, as follows: HTML. There is a pile of Select to Select the date and time. After selection, the difference between the selected time and the current time will be displayed in the p tag with the id of result wrapper in real time.
<select id="year-select"> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> ...... <option value="2032">2002</option> </select> <select id="month-select"> <option value="1">1</option> <option value="2">2</option> ...... <option value="12">12</option> </select> <select id="day-select"> <option value="1">1</option> <option value="2">2</option> ...... <option value="31">31</option> </select> <select id="hour-select"> <option value="0">00</option> <option value="1">01</option> ...... <option value="23">23</option> </select> <select id="minite-select"> <option value="0">0</option> <option value="1">1</option> ...... <option>59</option> </select> <select id="second-select"> <option value="0">0</option> <option value="1">1</option> ...... <option>59</option> </select> <p id="result-wrapper">Distance now 2001 year1 month1 Day and week X HH:MM:SS Also X day X hour X branch X second</p>
- Write JavaScript code based on the HTML structure above, which you can fine tune as needed
- When any select selection is changed, the content of the result wrapper is updated
- When the selected time is earlier than the current time, the copy is now that the distance from the "selected time" has passed xxxx
- When the selected time is later than the current time, the text is that there is xxxx between the current time and the selected time
- Pay attention to the change of copywriting when the current time passes the selected time
- Note that when you select different months, the date range is different. For example, you can select 31 days in January, 30 days in November, and pay attention to leap year
- Also, note that elegant function encapsulation makes the code more readable and maintainable
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>Function and clock exercise 2</title> 7 8 </head> 9 10 <body> 11 <select id="year-select"> 12 <option value="">Please select a year</option> 13 14 </select> 15 16 <select id="month-select"> 17 <option value=" ">Please select a month</option> 18 19 </select> 20 21 <select id="day-select"> 22 <option value=" ">Please select a date</option> 23 24 </select> 25 26 <select id="hour-select"> 27 <option value=" ">Please select hours</option> 28 29 </select> 30 31 <select id="minute-select"> 32 <option value=" ">Please select minutes</option> 33 34 </select> 35 36 <select id="second-select"> 37 <option value=" ">Please select seconds</option> 38 39 </select> 40 41 <p id="result-wrapper">Now it's Monday, January 1, 2001 X HH:MM:SS Also X day X hour X branch X second</p> 42 <script> 43 var year = document.getElementById("year-select"); 44 var month = document.getElementById("month-select"); 45 var day = document.getElementById("day-select"); 46 var hour = document.getElementById("hour-select"); 47 var minute = document.getElementById("minute-select"); 48 var second = document.getElementById("second-select"); 49 var result = document.getElementById("result-wrapper"); 50 51 function startTime() { 52 var x = new Date(); 53 var y = x.getFullYear(); 54 for (i = (y - 30); i < (y + 30); i++) { 55 year.options.add(new Option(i + "year", i)); 56 } 57 for (i = 1; i < 13; i++) { 58 month.options.add(new Option(i + "month", i)); 59 } 60 for (i = 0; i < 24; i++) { 61 hour.options.add(new Option(i + "Time", i)); 62 } 63 for (i = 0; i < 60; i++) { 64 minute.options.add(new Option(i + "branch", i)); 65 } 66 for (i = 0; i < 60; i++) { 67 second.options.add(new Option(i + "second", i)); 68 } 69 //This is a private array of local variables var Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 70 Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //This is the global variable 71 } 72 73 function addZero(a) { 74 if (a < 10) { 75 a = "0" + a; 76 } 77 return a; 78 } 79 80 function getWeekday(weekday) { 81 var arr = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 82 return arr[weekday]; 83 } 84 85 function optionsClear(e) { 86 e.options.length = 1; 87 } 88 89 function writeDay(n) { 90 optionsClear(day); //Clear the existing array 91 for (i = 1; i < n + 1; i++) { 92 day.options.add(new Option(i + "day", i)); 93 } 94 } 95 96 function isLeapYear(year) { 97 return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0); 98 } 99 100 year.onchange = function () { 101 var MMvalue = month.options[month.selectedIndex].value; 102 var n = Days[MMvalue - 1]; 103 if (MMvalue == 2 && isLeapYear(year.value)) //Determine if it is a leap year, if so, February+1 God. 104 n++; 105 writeDay(n); 106 } 107 month.onchange = function () { 108 var YYvalue = year.options[year.selectedIndex].value; 109 var n = Days[month.value - 1]; 110 if (month.value == 2 && isLeapYear(YYvalue)) 111 n++; 112 writeDay(n); 113 } 114 if (document.attachEvent) { 115 window.attachEvent("onload", startTime); 116 } else { 117 window.addEventListener("load", startTime); 118 } 119 120 function getTimeSelect() { 121 var str = year.value + "/" + month.value + "/" + day.value; 122 var timeselect = new Date(str); 123 return year.value + "year" + month.value + "month" + day.value + "day" + getWeekday(timeselect.getDay()) + hour.value + 124 ":" + minute.value + ":" + second.value; 125 } 126 127 function getTimeDistance() { 128 var now = new Date(); 129 var timeSelectStr = year.value + "/" + month.value + "/" + day.value + " " + hour.value + ":" + minute.value + 130 ":" + second.value; 131 var selectTime = new Date(timeSelectStr); 132 var secondDistance = now.getTime() - selectTime.getTime(); 133 if (secondDistance < 0) { 134 secondDistance = -secondDistance; //Convert to positive integer for easy calculation 135 var str = "Also"; 136 } else { 137 var str = "Past" 138 } 139 var daym = secondDistance / 86400000; 140 var hourm = (secondDistance % 86400000) / 3600000; 141 var minutem = ((secondDistance % 86400000) % 3600000) / 60000; 142 var secondm = (((secondDistance % 86400000) % 3600000) % 60000) / 1000; 143 return str + parseInt(daym) + "day" + parseInt(hourm) + "hour" + parseInt(minutem) + "branch" + parseInt(secondm) + 144 "second"; 145 } 146 147 function showDate() { 148 result.innerHTML = "Distance now" + getTimeSelect() + getTimeDistance(); 149 } 150 setInterval(showDate, 1000); 151 152 </script> 153 </body> 154 155 </html>