【免费】WordPress华为太空人表盘html网页源码GT2HTML源码

共17个文件

svg：13个

css：1个

gif：1个

javascript

html

需积分: 0 57 浏览量 2024-09-14 11:43:55 上传评论收藏 1.06MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

tkr太空人表盘.zip （17个子文件）

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 1.04MB

css

style.css 2KB

index.html 2KB

<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.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>

评论收藏

内容反馈