LED、液晶显示时间、数字

1、html部分

<div id="app">  <div class="time-box">  <div class="house-box"> <bit-component :num="houseTem"> <div class="minute-box"> <bit-component :num="minuteTem"> <div class="second-box"> <bit-component :num="secondTem"> <template id="BitComponent"> <div class="clock-box"> <div :class="{transverse: true, 'show-color': [0,2,3,5,6,7,8,9].includes(num)}"> 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); }, }); 

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

4、效果演示