“抖音”旋转太空人源码_太空人小电视代码

作者：AllinToyou | 2024-06-12 16:03:12

踩

太空人小电视代码

以下代码来自GitHub

```<html>
<head>
    <title>太空人表盘</title>
    <meta charset="UTF-8">
    <link href="./assets/css/style.css" rel="stylesheet">
    <script src="./assets/js/timeGeneration.js"></script>
    <!-- <style>
        body {
            transform: scale(0.5) translate(1300px,50px);
        }
    </style> -->
</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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/708687