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

 


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

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

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

− 1 = 5