From the 25th day to the 27th day, the countdown begins to tick

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>

Tags: Javascript

Posted on Tue, 03 Dec 2019 17:54:24 -0500 by Helaman