下载资源前端资源详情
Watch.zip
大小:1.07MB
价格:41积分
下载量:0
评分:
5.0
上传者:weixin_43532890
更新日期:2021-03-21

基于JavaScript网红太空人表盘

资源文件列表(大概)

文件名
大小
Watch/
-
__MACOSX/._Watch
310B
Watch/.DS_Store
6KB
__MACOSX/Watch/._.DS_Store
120B
Watch/demo.html
2.51KB
__MACOSX/Watch/._demo.html
276B
Watch/assets/
-
Watch/.idea/
-
Watch/assets/.DS_Store
6KB
__MACOSX/Watch/assets/._.DS_Store
120B
Watch/assets/css/
-
Watch/assets/js/
-
Watch/assets/img/
-
Watch/.idea/JunAlert.iml
458B
Watch/.idea/$PRODUCT_WORKSPACE_FILE$
461B
Watch/.idea/workspace.xml
3.04KB
Watch/.idea/modules.xml
268B
Watch/.idea/misc.xml
174B
Watch/assets/css/style.css
2.23KB
Watch/assets/js/.DS_Store
6KB
__MACOSX/Watch/assets/js/._.DS_Store
120B
Watch/assets/js/timeGeneration.js
3.5KB
Watch/assets/img/rect.svg
1.13KB
__MACOSX/Watch/assets/img/._rect.svg
312B
Watch/assets/img/human.gif
1.04MB
__MACOSX/Watch/assets/img/._human.gif
312B
Watch/assets/img/9.svg
791B
__MACOSX/Watch/assets/img/._9.svg
312B
Watch/assets/img/8.svg
806B
__MACOSX/Watch/assets/img/._8.svg
312B
Watch/assets/img/0.svg
792B
__MACOSX/Watch/assets/img/._0.svg
312B
Watch/assets/img/1.svg
577B
__MACOSX/Watch/assets/img/._1.svg
312B
Watch/assets/img/3.svg
673B
__MACOSX/Watch/assets/img/._3.svg
312B
Watch/assets/img/2.svg
681B
__MACOSX/Watch/assets/img/._2.svg
312B
Watch/assets/img/6.svg
747B
__MACOSX/Watch/assets/img/._6.svg
312B
Watch/assets/img/7.svg
534B
__MACOSX/Watch/assets/img/._7.svg
312B
Watch/assets/img/5.svg
688B
__MACOSX/Watch/assets/img/._5.svg
312B
Watch/assets/img/4.svg
599B
__MACOSX/Watch/assets/img/._4.svg
312B
Watch/assets/img/human.svg
17.4KB
__MACOSX/Watch/assets/img/._human.svg
312B
Watch/assets/img/ring.svg
14.37KB
__MACOSX/Watch/assets/img/._ring.svg
312B

资源内容介绍

网红太空人表盘
<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>

用户评论 (0)

发表评论

captcha