web前端实现LED功能、液晶显示时间、数字

效果演示

html部分

<div id="app">
	<!-- 页面 -->
	<div class="time-box">
		<!-- 时 -->
		<div class="house-box">
			<bit-component :num="houseTem"></bit-component>
			<bit-component :num="houseBit"></bit-component>
		</div>

		<div class="colon">:</div>

		<!-- 分 -->
		<div class="minute-box">
			<bit-component :num="minuteTem"></bit-component>
			<bit-component :num="minuteBit"></bit-component>
		</div>

		<div class="colon">:</div>

		<!-- 秒 -->
		<div class="second-box">
			<bit-component :num="secondTem"></bit-component>
			<bit-component :num="secondBit"></bit-component>
		</div>
	</div>
</div>

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

以上代码需要引入以下文件：
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 BitComponent = {
    name: 'BitComponent',
    template: '#BitComponent',
    props: ['num'],
};

// 页面
new Vue({
    el: "#app",
    components: { BitComponent },
    data() {
        return {}
    },
    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);
    },
});

css部分

/* ---------------------页面样式--------------------- */
body {
    background-color: #333;
}

.colon {
    font-size: 68px;
    font-weight: 700;
    color: #FF0000;
    margin-top: -20px;
}

.time-box {
    width: 460px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 时分秒 */
.house-box,
.minute-box,
.second-box {
    width: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ---------------------页面样式--------------------- */

/* ---------------------组件样式--------------------- */
.clock-box {
    width: 60px;
}

/* 横向显示 */
.transverse {
    width: 40px;
    height: 10px;
    margin-left: 10px;
    background-color: #444;
}

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

/* 纵向显示 */
.portrait {
    width: 10px;
    height: 30px;
    background-color: #444;
}

.show-color {
    background-color: #FF0000;
}
/* ---------------------组件样式--------------------- */