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

1、HTML部分

 <div id="app"> <div class="tem-bit-box"> <number-component :num="secondTem"> <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)}">'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}">'transverse-block': true, 'show-color': [0,2,3,4,5,6,8,9].includes(num)}">'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}">'transverse-block': true, 'show-color': [0,2,3,5,6,8,9].includes(num)}">'transverse-block': true, 'show-color': [0,1,2,3,4,5,6,7,8,9].includes(num)}"> 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、效果演示