百度前端学院参考答案：第二十五天到第二十七天 倒数开始 滴答滴 滴答滴（2）...
2024-05-29 04:59:25
编码
现在我们要做一个稍微复杂的东西，如下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>转载于:https://www.cnblogs.com/Joe-and-Joan/p/10093449.html
百度前端学院参考答案：第二十五天到第二十七天 倒数开始 滴答滴 滴答滴（2）...相关推荐
- 第二十五天到第二十七天 倒数开始 滴答滴 滴答滴-IFE
第二十五天到第二十七天 倒数开始 滴答滴 滴答滴 日期 总用时 学习目标 2018.08.22-2018.08.24 3h JavaScript 函数 学习目标 JavaScript 函数 学习内容 ...
- 2020年春季学期信号与系统课程作业参考答案-第十五次作业
信号与系统课程第十五次作业参考答案 ※ 第一题 已知x[n],h[n]x\left[ n \right],h\left[ n \right]x[n],h[n]长度分别是10, 25.设:y1[n]=x ...
- 2021年春季学期-信号与系统-第十五次作业参考答案-第十小题参考答案
本文是 2021年春季学期-信号与系统-第十五次作业参考答案 中各小题的参考答案. §10 第十小题 10.使用窗函数法设计一个线性相位FIR滤波器,要求的技术指标为: (1) 在Ωp=30πrad/ ...
- 2021年春季学期-信号与系统-第五次作业参考答案-第十小题
本文是 2021年春季学期-信号与系统-第五次作业参考答案 中的小题解答. ▌第十题 10. 利用傅里叶变换公式计算下面信号的傅里叶变换. (1) e−2(t−1)⋅u(t−1)e^{ - 2\lef ...
- 2021年春季学期-信号与系统-第二次作业参考答案-第十小题
本文是 2021年春季学期-信号与系统-第二次作业参考答案 的参考答案. ▌第十题 10 从网络学堂下载代表两个信号的音频文件: 音频文件: f1(t)f_1 \left( t \right)f1( ...
- 2021年春季学期-信号与系统-第三次作业参考答案-第十道题
本文是 2021年春季学期-信号与系统-第三次作业参考答案 中的参考答案. ▌第十道题 10. 求解差分方程: (1)第一小题 y[n]=−5y[n−1]+ny\left[ n \right] = - ...
- 鸟哥的Linux私房菜(基础篇)- 第二十五章、 Linux 备份策略
第二十五章. Linux备份策略 最近升级日期:2009/09/18 万一不幸你的 Linux 被黑客入侵了.或是你的 Linux 系统由於硬件关系 (不论是天灾还是人祸) 而挂掉了!这个时候,请问如 ...
- 求二叉树高度_LeetCode刷题——第二十五天（平衡二叉树）
这段时间跟二叉树杠上了,接下来还有许多二叉树的题目,虽然已经做了不少了,大多题目都涉及到了递归,也挺好,刚好有机会练习一下递归,但是遇到新的题目还是有点力不从心,还需要看参考答案,真希望有一天像汤神一 ...
- 【正点原子STM32连载】 第二十五章 TFTLCD（MCU屏）实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
最新文章
- 激活函数之logistic sigmoid函数介绍及C++实现
- [转]linux下fms2流媒体服务器搭建之五-----flv播放器制作篇
- gearman的持久化，以mysql的方式
- mysql 外键引擎_对于mysql的外键和mysql的存储引擎
- MySQL 管理方法
- php抓取运动步数,使用PHP抓取微博数据
- 校级选修课《软件开发实践》教学大纲（200807修订）
- ros创建工作空间_ROS入门学习之七Moveit机械臂控制
- 全国英语计算机9月统考2019,2019年9月网络教育统考《计算机应用基础》模拟题6...
- 尤其是java程序员(转载)_JAVA程序员 学习任务（转载）
- 经典面试题(3)：关于this指向的常见面试题
- 【属性对比】defer 与 async
- fgets，cin. getline被跳过
- PHP substr(),mb_substr(),mb_strcut()比较
- steam当前计算机无法,steam无法打开【操作思路】
- 【Visual C 】游戏开发笔记三十五 站在巨人的肩膀上 游戏引擎导论
- 基于FCM算法的聚类算法
- java 文字生成表格图片
- macbook打开网页慢解决办法
- linux下搭建DNS域名解析服务器