编码

现在我们要做一个稍微复杂的东西，如下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结构（可以根据需要自行微调）为基础编写 代码
  • 当变更任何一个select选择时，更新 result-wrapper 的内容
  • 当所选时间早于现在时间时，文案为 现在距离 \"所选时间\" 已经过去 xxxx
  • 当所选时间晚于现在时间时，文案为 现在距离 \"所选时间\" 还有 xxxx
  • 注意当前时间经过所选时间时候的文案变化
  • 注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年
  • 同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护
  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <  charset=\"utf-8\" />
  6     < >函数和时钟练习2</ >
  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     < >
 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.  = 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.  = 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(\" \", 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     </ >
153 </body>
154 
155 </html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章