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

---

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

---

2、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);
    },
});

---

3、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;
}

---

4、效果演示