011-02-stroke-animation-creative/timer.html at main · JIEJOE-WEB-Tutorial/011-02-stroke-animation-creative · GitHub

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>timer</title>
    <style>
        * {
            font-size: 2vmin;
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #171717;
        }

        .container {
            position: absolute;
        }

        svg {
            width: 5rem;
            overflow: visible;
            margin-right: 1.5rem;
        }

        .container svg:nth-child(even) {
            margin-right: 4rem;
        }

        polygon {
            fill: none;
            stroke-width: 8;
            stroke: #17f700;
            transition: stroke-dasharray 0.5s ease;
            /* 初始默认时间显示为0 */
            stroke-dasharray: 0 70 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 70 0;
        }

    </style>
</head>

<body>
    <div class="container">
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewbox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
    </div>
</body>
<script>
    // JIEJOE produce
    // b站主页：https://space.bilibili.com/3546390319860710
    // 用getTotalLength获取线段总长为560，每一条边长为560 / 8=70，线段间隔为线段边长的六分之一，间隔为5，边长成为60
    console.log(document.querySelector("polygon").getTotalLength());
    // dasharray_data里面的每一个数组所储存的是对应数字的八条边信息，数组内排列顺序为划线顺序，
    // 划线顺序可通过polygon标签看出，某一条边为实线则为1，没有则为0
    let dasharray_data = [
        [0, 1, 1, 1, 1, 1, 1, 0],//0
        [0, 0, 0, 1, 1, 0, 0, 0],//1
        [1, 0, 1, 1, 0, 1, 1, 0],//2
        [1, 0, 1, 1, 1, 1, 0, 0],//3
        [1, 1, 0, 1, 1, 0, 0, 0],//4
        [1, 1, 1, 0, 1, 1, 0, 0],//5
        [1, 1, 1, 0, 1, 1, 1, 0],//6
        [0, 0, 1, 1, 1, 0, 0, 0],//7
        [1, 1, 1, 1, 1, 1, 1, 0],//8
        [1, 1, 1, 1, 1, 1, 0, 0],//9
    ];
    // 将dasharray_data的划线信息转换为为css的stroke-dasharray字符串信息
    dasharray_data = dasharray_data.map(arry => {
        // 第一个位置在stroke-dasharray为实线描边，需为0
        let str = "0";
        arry.forEach(nums => {
            // 如果当前边为实线，则按照‘间隙，实线，间隙’设置
            if (nums) str += ' 5 60 5 0';
            // 如果当前边为空白，则按照‘一大段间隙’设置
            else str += ' 70 0';
        });
        return str;
    });
    // 获取所有的polygon标签
    let polygons = [...document.querySelectorAll('polygon')];
    // 每1秒更新界面的时间信息
    setInterval(() => {
        // 将时、分、秒直接转换为两位数字数组，例如12.19.25转化为[1,2,1,9,2,5]
        let times = [
            new Date().getHours(),
            new Date().getMinutes(),
            new Date().getSeconds()
        ].flatMap(time => [Math.floor(time / 10), time % 10]);
        // 将时间所对应的描边信息，设置到对应位置polygon元素上去
        polygons.forEach((ele, index) => {
            ele.style.strokeDasharray = dasharray_data[times[index]];
        });
    }, 1000);
</script>

</html>