基于SVG+JavaScript实现网红华为太空人表盘GT2（附有源码）

基于SVG+JavaScript实现网红华为太空人表盘GT2

引入代码

1. <link href="./assets/css/style.css" rel="stylesheet">
2. <script src="./assets/js/timeGeneration.js"></script>

HTML代码

1. <div class="jun-meter">
2. <div class="jun-time-h-h" id="hh"></div>
3. <div class="jun-time-h-l" id="hl"></div>
4. <div class="jun-time-rect"></div>
5. <div class="jun-human"></div>
6. <div class="jun-time-m-h" id="mh"></div>
7. <div class="jun-time-m-l" id="ml"></div>
8. <div class="jun-time-s-h" id="sh"></div>
9. <div class="jun-time-s-l" id="sl"></div>
10. <div class="jun-date" id="date"></div>
11. <div class="jun-calendar-date" id="calendarDate"></div>
12. </div>

JS代码

1. function WatchMeter() {
2. // 初始化dom
3. this._initDom()
4. // 更新
5. this.update()
6. this.date = new TimeGeneration()
7. }
9. // 修改原型
10. WatchMeter.prototype = {
11. constructor: WatchMeter,
12. // 初始化Dom
13. _initDom: function () {
14. this.elem = {}
15. this.elem.hh = document.getElementById('hh')
16. this.elem.hl = document.getElementById('hl')
17. this.elem.mh = document.getElementById('mh')
18. this.elem.ml = document.getElementById('ml')
19. this.elem.sh = document.getElementById('sh')
20. this.elem.sl = document.getElementById('sl')
21. this.elem.date = document.getElementById('date')
22. this.elem.calendarDate = document.getElementById('calendarDate')
23. },
25. // 更新
26. update: function () {
27. var _this = this
28. setInterval(function () {
29. _this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
30. }, 1000)
31. },
33. // 渲染
34. _render: function (date, calendarDate, time) {
35. this._setNumberImage(this.elem.hh, time[0])
36. this._setNumberImage(this.elem.hl, time[1])
37. this._setNumberImage(this.elem.mh, time[2])
38. this._setNumberImage(this.elem.ml, time[3])
39. this._setNumberImage(this.elem.sh, time[4])
40. this._setNumberImage(this.elem.sl, time[5])
41. this.elem.date.innerText = date[2] + " " +date[0] + "-" +date[1]
42. this.elem.calendarDate.innerText = calendarDate
43. },
45. // 设置数字图片
46. _setNumberImage: function (elem, value) {
47. elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)";
48. }
49. }
51. var myWatchMeter = new WatchMeter()

送福利了！关注下方的公众号：“优派编程”，搜索关键词“下载”，即可获得软件app下载资源和python、java等编程学习资料~

更多课程和学习资料请登录“方包博客”———http://fang1688.cn

更多资源请关注公众号或点击下方“阅读原文”，回复关键词获取