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、<link rel="stylesheet" href="./index.css">
2、<script src="/node_modules/vue/dist/vue.js"></script>
3、<script src="./index.js"></script>

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、效果演示

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

vue项目web前端登录页数字验证码登录流程
1.创建code.js文件夹下面是js代码 function GVerify(options) {console.log(); // 创建一个图形验证码对象,接收options对象为参数this.co ...
不会编程能学前端吗？web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
web前端入门到实战：网页设计十大流行趋势
1.个性化排版设计最近看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特.让字体在体现个性的同时保留专业印刷风格. 2. ...
web前端入门到实战：16个网页设计趋势，你都有知道吗？
时间进入2019年,我们在网页设计中看到旧有风格的重生,也见证了新的设计趋势的诞生.Web 技术的快速发展,不仅让设计和产品足以满足更多更细致深入的需求,也让设计师能够进行更细腻更独特的表达.现今的网 ...
数字开头的正则表达式_初学Web前端要注意什么正则表达式是怎么回事
初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...
正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测字符串是否符合 &q ...
个位数字加百位数字等于千位数字加上十位数字,且该该数为奇数
1.输出所有满足下列条件的四位数. 条件:个位数字加百位数字等于千位数字加上十位数字,且该该数为奇数. 做题思路:1.先单独提取这个四位数的各位数 2.满足相加条件且为奇数例:这个数字为1234 ...
十位数和个位数交换python_Python3实现个位数字和十位数字对调, 其乘积不变
两位数13和62具有很有趣的性质,把它们个位数字和十位数字对调, 其乘积不变, 即 13 * 62 31 * 26 编程序求共有多少对这种性质的两位数,个位与十位相同的不在此列如11.22 重复出现 ...
1，判断一个数是不是质数。 2，选取出100以上、1000以内所有个位数字与十位数字之和被10除所得余数恰好是百位数字的素数（如293）.输出上述这些素数的个数及这些素数的和.
对于大于 1 的数,如果除了 1 和它本身,它不能再被其它正整数整除,那么我们说它是一个质数.晓萌想判断一个数是不是质数,希望找你写个程序,帮助她进行判断. 输入格式输入包括一行,为一个整数 N(1 ...

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

目录

1、HTML部分

2、JavaScript部分

3、css部分

4、效果演示

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

最新文章

热门文章