web前端实现液晶显示数字、LED、十位、个位、includes_前端 led样式

4、效果演示

HTML部分

<!-- 页面 -->
<div id="app">
	<div class="tem-bit-box">
		<number-component :num="secondTem"></number-component>
		<number-component :num="secondBit"></number-component>
	</div>
</div>

<!-- 组件 -->
<template id="numberComponent">
	<div class="number-box">
		<div class="transverse-box">
			<div :class="{'transverse-block': true, 'show-color': [0,2,3,4,5,6,7,8,9].includes(num)}"></div>
			<div :class="{transverse: true, 'show-color': [0,2,3,5,6,7,8,9].includes(num)}"></div>
			<div :class="{'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}"></div>
		</div>

		<div class="portrait-box">
			<div :class="{portrait: true, 'show-color': [0,4,5,6,8,9].includes(num)}"></div>
			<div :class="{portrait: true, 'show-color': [0,1,2,3,4,7,8,9].includes(num)}"></div>
		</div>

		<div class="transverse-box">
			<div :class="{'transverse-block': true, 'show-color': [0,2,3,4,5,6,8,9].includes(num)}"></div>
			<div :class="{transverse: true, 'show-color': [2,3,4,5,6,8,9].includes(num)}"></div>
			<div :class="{'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}"></div>
		</div>

		<div class="portrait-box">
			<div :class="{portrait: true, 'show-color': [0,2,6,8].includes(num)}"></div>
			<div :class="{portrait: true, 'show-color': [0,1,3,4,5,6,7,8,9].includes(num)}"></div>
		</div>

		<div class="transverse-box">
			<div :class="{'transverse-block': true, 'show-color': [0,2,3,5,6,8,9].includes(num)}"></div>
			<div :class="{transverse: true, 'show-color': [0,2,3,5,6,8,9].includes(num)}"></div>
			<div :class="{'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}"></div>
		</div>
	</div>
</template>
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

以上代码需要引入以下文件：
1、<link rel="stylesheet" href="./index.css">
2、<script src="/node_modules/vue/dist/vue.js"></script>
3、<script src="./index.js"></script>

JavaScript部分

// 子组件
let NumberComponent = {
    name: 'numberComponent',
    template: '#numberComponent',
    props: ['num'],
};

// 页面
new Vue({
    el: "#app",
    components: { NumberComponent },
    data() {
        return {
            houseTem: null,
            houseBit: null,
            minuteTem: null,
            minuteBit: null,
            secondTem: null,
            secondBit: null,
        }
    },
    created() {
        setInterval(() => {
            let dateTime = new Date(),
                // yer = dateTime.getFullYear(),
                // moth = String(dateTime.getMonth() + 1),
                // day = dateTime.getDate().toString(),
                house = dateTime.getHours().toString(),
                minute = dateTime.getMinutes().toString(),
                second = dateTime.getSeconds().toString();

            // 补〇
            // moth = ('00' + moth).slice(moth.length);
            // day = ('00' + day).slice(day.length);
            house = ('00' + house).slice(house.length);
            minute = ('00' + minute).slice(minute.length);
            second = ('00' + second).slice(second.length);

            this.houseTem = Number(house[0]);
            this.houseBit = Number(house[1]);
            this.minuteTem = Number(minute[0]);
            this.minuteBit = Number(minute[1]);
            this.secondTem = Number(second[0]);
            this.secondBit = Number(second[1]);
        }, 1000);
    },
});
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

css部分

body {
    background-color: #333;
}

#app {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.tem-bit-box {
    width: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.number-box {
    width: 60px;
}

/* 横向容器 */
.transverse-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 方块 */
.transverse-block {
    width: 10px;
    height: 10px;
    /* background-color: #8B0000; */
    transition: all 1s;
    opacity: .5;
}

/* 横向显示 */
.transverse {
    width: 40px;
    height: 10px;
    /* background-color: #8B0000; */
    transition: all 1s;
    opacity: .5;
}

/* 纵向容器 */
.portrait-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 纵向显示 */
.portrait {
    width: 10px;
    height: 30px;
    /* background-color: #8B0000; */
    /* 过度 */
    transition: all 1s;
    /* 透明度 */
    opacity: .5;
}

.show-color {
    background-color: #FF0000;
    opacity: 1;
}
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