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;
}
/* ---------------------组件样式--------------------- */