【免费】【JavaScript资源】基于JavaScript实现的网红太空人表盘demo资源-CSDN文库

共22个文件

svg：13个

xml：3个

js：1个

javascript

需积分: 0 177 浏览量更新于2024-04-03 收藏 1.06MB ZIP 举报

这款基于JavaScript的网红太空人表盘是一个充满创意和趣味性的时钟插件。它巧妙地将太空人元素与时钟功能相结合，为用户带来独特的视觉体验。无论是用于个人网页装饰，还是作为项目展示的一部分，这款表盘都能为你的作品增添一份科技感与时尚感。

收起资源包目录

Astronaut Dial Watch.zip （22个子文件）

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

.idea

$PRODUCT_WORKSPACE_FILE$ 461B

JunAlert.iml 458B

workspace.xml 3KB

misc.xml 174B

modules.xml 268B

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