原生JS实现动态时间页

• 使用原生JS实现动态时间页

• 源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E5%8A%A8%E6%80%81%E6%97%B6%E9%97%B4%E9%A1%B5
• 上图：
• 
• 时间每隔1s会自动刷新一次

• HTML部分

• 
  给元素设置contenteditable=“true” 以后 这个元素就是一个可修改的方式显示在网页中，我们可以点击它来进行修改内容
• 因为只涉及到了简单的几个时间的字 所以HTML结构很简单 就不多多赘述了

• CSS部分

• 
• 代码量也是很少，一个知识点是当我们给一个元素设置定位了之后 如果这个定位元素的层级高于按钮的层级 那么我们是没有办法点击到按钮的 可以理解成是被一个简单的透明玻璃给挡住了
• user-select: none; 设置页面的文本不可被选中

• JS部分

• 
• JS代码一定要有模块化的思想，什么是模块化呢？ 就是一个功能一个function 做到高类聚低耦合
• 
• 获取当前时间 时间都在Date()对象中
• 模板字符串中可以写方法和表达式
• 
• 两个事件 ‘blur’代表的是元素失去焦点时事件 keypress代表键盘按下事件
• keyCode:13代表的是回车键 键盘中的每一个按键都有对应的号码
• 其他的代码都没有难点 可以到码云中找源码
• 重点是模块化的思想

• 啦啦啦 结束啦~ 今天完成了这个DEMO 还学习了JS的function的知识点 够了够了