倒数开始 滴答滴 滴答滴

task1

题目:

我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装
具体需求如下:

  • 在页面中显示当前日期及时间,按秒更新
  • 格式为 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss
  • 注意位数的补齐,比如:
    -- 假设时间为2008年10月10日星期一的12点12分12秒,显示2008年10月10日星期一 12:12:12
    -- 假设时间为2008年1月1日星期一的3点2分2秒,显示2008年01月01日星期一 03:02:02

编码过程中,我们希望你注意对函数的封装,尽量让一个函数就做一个事情,而不要把所有的功能、代码揉在一起:

      • 封装一个函数,来根据某个日期返回这一天是星期几
      • 封装一个函数,把月、日、小时等出现个位数的情况前面补充0,补充为两位,比如1变为01
      • 封装一个函数,把最后的日期时间,按照要求的格式进行包装
      • 可能不止上面这些,尽可能地进行功能的解耦和拆解

预览

代码


task2

完成上面需求后,现在需求做一些小的变更

  • 输出格式变为:2008-10-10 Monday 07:10:30 PM

把上面代码中函数简单改一下即可:

预览

 1 function showDate(){
2 var disDate;
3 disDate = today.getFullYear() + '-';
4 disDate += today.getMonth() + '-';
5 disDate += today.getDate() + ' ';
6 return disDate;
7 }
8
9 function showDay(){
10 var week = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
11 return week[today.getDay()];
12 }
13
14 function showTime(){
15 var h,m,s,half;
16 h = today.getHours();
17 if (h>12){
18 h -= 12;
19 half = 'PM'
20 }else{
21 half = '

task3

题目:

有一堆Select用于选择日期和时间,在选择后,实时在 id 为 result-wrapper 的 p 标签中显示所选时间和当前时间的差值。

 1 <select id="year-select">
2 <option value="2000">2000</option>
3 <option value="2001">2001</option>
4 <option value="2002">2002</option>
5 ……
6 <option value="2032">2002</option>
7 </select>
8
9 <select id="month-select">
10 <option value="1">1</option>
11 <option value="2">2</option>
12 ……
13 <option value="12">12</option>
14 </select>
15
16 <select id="day-select">
17 <option value="1">1</option>
18 <option value="2">2</option>
19 ……
20 <option value="31">31</option>
21 </select>
22
23 <select id="hour-select">
24 <option value="0">00</option>
25 <option value="1">01</option>
26 ……
27 <option value="23">23</option>
28 </select>
29
30 <select id="minite-select">
31 <option value="0">0</option>
32 <option value="1">1</option>
33 ……
34 <option>59</option>
35 </select>
36
37 <select id="second-select">
38 <option value="0">0</option>
39 <option value="1">1</option>
40 ……
41 <option>59</option>
42 </select>
43
44 <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天,注意闰年
  • 同样,需要注意,通过优雅的函数封装,使得代码更加可读且可维护

预览

代码

百度前端技术学院-基础-day25-27的更多相关文章

  1. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  2. 百度前端技术学院-基础-day2

    2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...

  3. 百度前端技术学院-基础-day20-21

    第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...

  4. 百度前端技术学院-基础-day17-18

    JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异 ...

  5. 百度前端技术学院-基础-day22-24

    第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...

  6. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  7. 百度前端技术学院-基础-day3

    2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. ...

  8. 百度前端技术学院-基础-day5.6

    今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...

  9. 百度前端技术学院(IFE)2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

随机推荐

  1. 【JVM第八篇--垃圾回收】GC和GC算法

    写在前面的话:本文是在观看尚硅谷JVM教程后,整理的学习笔记.其观看地址如下:尚硅谷2020最新版宋红康JVM教程 1.垃圾 1.1.什么是垃圾 垃圾(Garbage)在Java语言中是指在运行程序中 ...

  2. nginx&http 第三章 ngx http 框架处理流程

    1. nginx 连接结构 ngx_connection_t 这个连接表示是客户端主动发起的.Nginx服务器被动接受的TCP连接,我们可以简单称其为被动连接.同时,在有些请求的处理过程中,Nginx ...

  3. 处理ceph incompelete的经验

    前言 最近已经见到几个环境出现过incompelete了,这个在很久以前Jewel正在合入mark-complete工具的时候就有做过类似的处理,但是随着处理的环境越来越多,这个地方还是有些需要注意的 ...

  4. Python_Tips_dump\load 和 dumps\loads 的区别与联系

    dump\load  和 dumps\loads 的区别与联系 """ Python3 JSON模块的使用 参考链接:https://docs.python.org/3/ ...

  5. Dubbo 服务导出-Version2.7.5

    1.源码分析 1.1分析服务导出入口 当容器为spring是dubbo会为容器注册两个监听器:DubboLifecycleComponentApplicationListener和DubboBoots ...

  6. 数据结构实训——哈夫曼(Huffman)编/译码器

    题目4.哈夫曼(Huffman)编/译码器(限1人完成) [问题描述] 利用哈夫曼编码进行通信可以大大提高信道利用率,缩短信息传输时间,降低传输成本.但是,这要求在发送端通过一个编码系统对待传数据预先 ...

  7. Unity Lod

    LOD是Level Of Detais 的简称,多细节层次,根据摄像机与物体距离,unity会自动切换模型.一般离摄像机近的时候显示高模,离摄像机远的时候显示低模,借此来提升性能. 如果你在Blend ...

  8. FL studio系列教程(十二):FL Studio中如何导出音频

    在FL Studio中制作好音乐后,最后展现给我们的是一般的音频文件,我们可以通过FL Studio的文件菜单导出最终的文件格式.下面我们就来详细的看一下FL Studio中是如何导出我们想要的音频格 ...

  9. guitar pro系列教程(三):Guitar Pro7乐谱页面显示模式设置

    大家好,又到了guitar pro系列教程的时间 本章节我们采用图文结合的方式为大家讲解一下guitar pro 7乐谱的页面显示设置,有兴趣的小伙伴都可以进来看看哦.首让我们先看下图: 如上图所示, ...

  10. 前端(web)知识-html

    前端由三部分组成: HTML(标签)--CSS(美化,修饰)--JS(执行指令) HTML(超文本标记语言,Hypertext Markup Language):是一种用于创建网页的标记语言. 本质上 ...