【免费】华为手表太空人主题.zip资源-CSDN文库

共17个文件

svg：13个

css：1个

gif：1个

需积分: 0 53 浏览量 2023-04-25 13:21:45 上传评论收藏 88KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

华为手表太空人主题.zip （17个子文件）

Watch

assets

timeGeneration.js 4KB

img

2.svg 681B

0.svg 792B

ring.svg 14KB

4.svg 599B

6.svg 747B

1.svg 577B

human.svg 17KB

rect.svg 1KB

7.svg 534B

3.svg 673B

5.svg 688B

9.svg 791B

8.svg 806B

human.gif 67KB

css

style.css 2KB

index.html 3KB

<html> <head> <title>太空人表盘</title> <meta charset="UTF-8"> <link href="./assets/css/style.css" rel="stylesheet"> <script src="./assets/js/timeGeneration.js"></script> </head> <body> <div class="jun-meter"> <div class="jun-time-h-h" id="hh"></div> <div class="jun-time-h-l" id="hl"></div> <div class="jun-time-rect"></div> <div class="jun-human"></div> <div class="jun-time-m-h" id="mh"></div> <div class="jun-time-m-l" id="ml"></div> <div class="jun-time-s-h" id="sh"></div> <div class="jun-time-s-l" id="sl"></div> <div class="jun-date" id="date"></div> <div class="jun-calendar-date" id="calendarDate"></div> </div> </body> <script> function WatchMeter() { // 初始化dom this._initDom() // 更新 this.update() this.date = new TimeGeneration() } // 修改原型 WatchMeter.prototype = { constructor: WatchMeter, // 初始化Dom _initDom: function () { this.elem = {} this.elem.hh = document.getElementById('hh') this.elem.hl = document.getElementById('hl') this.elem.mh = document.getElementById('mh') this.elem.ml = document.getElementById('ml') this.elem.sh = document.getElementById('sh') this.elem.sl = document.getElementById('sl') this.elem.date = document.getElementById('date') this.elem.calendarDate = document.getElementById('calendarDate') }, // 更新 update: function () { var _this = this setInterval(function () { _this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime()) }, 1000) }, // 渲染 _render: function (date, calendarDate, time) { this._setNumberImage(this.elem.hh, time[0]) this._setNumberImage(this.elem.hl, time[1]) this._setNumberImage(this.elem.mh, time[2]) this._setNumberImage(this.elem.ml, time[3]) this._setNumberImage(this.elem.sh, time[4]) this._setNumberImage(this.elem.sl, time[5]) this.elem.date.innerText = date[2] + " " +date[0] + "-" +date[1] this.elem.calendarDate.innerText = calendarDate }, // 设置数字图片 _setNumberImage: function (elem, value) { elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)"; } } var myWatchMeter = new WatchMeter() </script> </html>

评论收藏

内容反馈