百度前端学院参考答案:第二十五天到第二十七天 倒数开始 滴答滴 滴答滴(2)
程序员文章站
2023-11-14 10:28:16
编码 现在我们要做一个稍微复杂的东西,如下HTML,有一堆Select用于选择日期和时间,在选择后,实时在 id 为 result-wrapper 的 p 标签中显示所选时间和当前时间的差值。 使用上方的HTML结构(可以根据需要自行微调)为基础编写JavaScript代码 当变更任何一个selec ......
编码
现在我们要做一个稍微复杂的东西,如下html,有一堆select用于选择日期和时间,在选择后,实时在 id 为 result-wrapper 的 p 标签中显示所选时间和当前时间的差值。
<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">现在距离 2001年1月1日星期x hh:mm:ss 还有 x 天 x 小时 x 分 x 秒</p>
- 使用上方的html结构(可以根据需要自行微调)为基础编写javascript代码
- 当变更任何一个select选择时,更新 result-wrapper 的内容
- 当所选时间早于现在时间时,文案为 现在距离 "所选时间" 已经过去 xxxx
- 当所选时间晚于现在时间时,文案为 现在距离 "所选时间" 还有 xxxx
- 注意当前时间经过所选时间时候的文案变化
- 注意选择不同月份的时候,日期的可选范围不一样,比如1月可以选31天,11月只有30天,注意闰年
- 同样,需要注意,通过优雅的函数封装,使得代码更加可读且可维护
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>函数和时钟练习2</title> 7 8 </head> 9 10 <body> 11 <select id="year-select"> 12 <option value="">请选择年份</option> 13 14 </select> 15 16 <select id="month-select"> 17 <option value=" ">请选择月份</option> 18 19 </select> 20 21 <select id="day-select"> 22 <option value=" ">请选择日期</option> 23 24 </select> 25 26 <select id="hour-select"> 27 <option value=" ">请选择小时</option> 28 29 </select> 30 31 <select id="minute-select"> 32 <option value=" ">请选择分钟</option> 33 34 </select> 35 36 <select id="second-select"> 37 <option value=" ">请选择秒数</option> 38 39 </select> 40 41 <p id="result-wrapper">现在距离 2001年1月1日星期x hh:mm:ss 还有 x 天 x 小时 x 分 x 秒</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 + "年", i)); 56 } 57 for (i = 1; i < 13; i++) { 58 month.options.add(new option(i + "月", i)); 59 } 60 for (i = 0; i < 24; i++) { 61 hour.options.add(new option(i + "时", i)); 62 } 63 for (i = 0; i < 60; i++) { 64 minute.options.add(new option(i + "分", i)); 65 } 66 for (i = 0; i < 60; i++) { 67 second.options.add(new option(i + "秒", i)); 68 } 69 //这样是局部变量私有的数组 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]; //这才是全局变量 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 = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 82 return arr[weekday]; 83 } 84 85 function optionsclear(e) { 86 e.options.length = 1; 87 } 88 89 function writeday(n) { 90 optionsclear(day); //清除原来已有的数组 91 for (i = 1; i < n + 1; i++) { 92 day.options.add(new option(i + "日", 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)) //判断是否为闰年,是的话2月份+1天。 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 + "年" + month.value + "月" + day.value + "日" + 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; //转换为正整数方便计算 135 var str = "还有"; 136 } else { 137 var str = "已经过去" 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) + "天" + parseint(hourm) + "小时" + parseint(minutem) + "分" + parseint(secondm) + 144 "秒"; 145 } 146 147 function showdate() { 148 result.innerhtml = "现在距离" + gettimeselect() + gettimedistance(); 149 } 150 setinterval(showdate, 1000); 151 152 </script> 153 </body> 154 155 </html>