基本信息
源码名称：html+css+js制作华为太空人表盘
源码大小：1.06M
文件格式：.zip
开发语言：js
更新时间：2021-05-19
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 4 元　
   源码介绍

中间这个太空人是一个gif动图 

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