360°动态罗盘时钟显示（附带源码）

作者：很楠不爱3 | 2024-05-29 03:18:21

踩

360°动态罗盘时钟显示（附带源码）

360°动态罗盘时钟显示

效果图及教程
部分源码
领取源码
下期更新预报

效果图及教程

在这里插入图片描述

下面是加背景图片代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			background-image: url(img/untitled.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
	<body>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述
加完图片改一下时钟位置，然后就完美

部分源码

var yearList = [];
var monthList = [];
var dayList = [];
var weekList = [];
var hourList = [];
var minuteList = [];
var secondsList = [];

/**
 * 分析，完成效果:
 * 1. 实现时钟排列
 * 
 * 步骤：
 * 1. 初始化，渲染dom
 * 2. 实现随着时间高亮
 * 3. 添加动画，使之移动
 */

var textList = [
    [yearText, yearList],
    [monthText, monthList],
    [dayText, dayList],
    [weekText, weekList],
    [hourText, hourList],
    [minuteText, minuteList],
    [secondsText, secondsList],

]


window.onload = function () {
    init();

    setTimeout(function () {

        initTransition();

    }, 0)

    setTimeout(function () {

        var timeArr = [0, 0, 0, 0, 0, 0, 0]

        rotateTransition(timeArr)
        setInterval(function () {
            runtime()
        }, 1000)

    }, 1000)

    // setInterval(function () {
    //     runtime()
    // }, 100)

};

// 初始化函数
// function init() {
//     clock = document.getElementById('clock');
//     // 生成标签 存放文字展示
//     for (var i = 0; i < textList.length; i++) {
//         for (var j = 0; j < textList[i][0].length; j++) {
//             var temp = createLabel(textList[i][0][j]);
//             clock.appendChild(temp);
//             // 将生成的标签存放在数组list中
//             textList[i][1].push(temp);
//         }
//     }

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

领取源码

360°动态罗盘时钟显示源码领取地址：https://www.123pan.com/s/ji8kjv-frPU3.html提取码:关注微信公众号祖龙科技工作室回复时钟即可获取

下期更新预报

网站源码

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