欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

百度前端学院参考答案:第二十五天到第二十七天 倒数开始 滴答滴 滴答滴(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>