js 模拟LED数字电子显示（分段式）

vue 模拟LED数字电子显示，分段式

效果图

#led.vue
<template><div class="num-wrap"><template v-for="(num, index) of numList"><ul class="num-box" v-if="!num.isPoint" :style="{width: (fontSize*4/3)+'px', height: (fontSize*5/2)+'px'}"><li v-for="(item, l) of num.list" :style="{width: item.width+'px', height: item.height+'px', left: item.left+'px', top: item.top+'px'}"><div :style="{width: item.width+'px',height: item.height+'px'}" v-if="l%2 != 0"><span style="display: inline-block; padding: 0; margin: 0; float: left; box-sizing: content-box;" class="numleft" :style="{borderWidth: item.height/2+'px ' + item.height/2 + 'px ' +item.height/2+'px 0', borderColor: 'transparent '+(item.isFront? frontColor : backColor) +' transparent transparent' }"></span><span style="display: inline-block; padding: 0; margin: 0; float: left;" :style="{width: (item.width-item.height) + 'px', height: item.height + 'px', background: item.isFront? frontColor : backColor}"></span><span style="display: inline-block; padding: 0; margin: 0; float: left; box-sizing: content-box;" class="numright" :style="{borderWidth: item.height/2+'px  0 ' + item.height/2 + 'px ' +item.height/2+'px', borderColor: 'transparent transparent transparent '+(item.isFront? frontColor : backColor) }"></span></div><div :style="{width: item.width+'px',height: item.height+'px'}" v-if="l%2 == 0"><div style="padding: 0; margin: 0; box-sizing: content-box;" class="numtop" :style="{borderWidth: '0 ' + item.width/2+'px ' + item.width/2 + 'px ' +item.width/2+'px', borderColor: 'transparent transparent '+(item.isFront? frontColor : backColor) +' transparent' }"></div><div style="padding: 0; margin: 0px; box-sizing: content-box;" :style="{width: item.width + 'px', background: item.isFront? frontColor : backColor,  height: (item.height-item.width) +'px'}"></div><div style="padding: 0; margin: 0; box-sizing: content-box;" class="numbottom" :style="{borderWidth: item.width/2+'px ' + item.width/2 + 'px 0 ' +item.width/2+'px', borderColor: (item.isFront? frontColor : backColor) +' transparent transparent transparent' }"></div></div></li></ul><ul v-if="num.isPoint" :style="{height: (fontSize*5/2)+'px'}"><li v-for="(item, l) of num.list" :style="{marginTop: (fontSize*2 + item.height/2)+'px',height: item.height+'px', width: item.height+'px', background: item.color}"><span></span></li></ul></template></div>
</template><style>
.num-wrap ul{list-style: none;position: relative;float: left;margin-right: 10px;
}
.num-box>li{position: absolute;display: block;
}
.numleft{width:0;height: 0;border-width:10px 10px 10px 0;border-style:solid;border-color:transparent #f00 transparent transparent;
}
.numright{width: 0;height: 0;border-width: 10px 0 10px 10px;border-style: solid;border-color: transparent transparent transparent red;
}
.numtop{position: relative;z-index: 2;width:0;height:0;border-width:0 10px 10px 10px;border-style:solid;border-color:transparent transparent red transparent;
}
.numbottom{width:0;height:0;border-top: 10px solid red;border-right: 10px solid transparent;border-left: 10px solid transparent;
}
</style><script>
export default {props: {rect: {type: Object,default: () => {return {}}}},data(){return {numArray: [],numRulsArr: ["0 1 2 4 5 6","2 6","1 2 3 4 5","1 2 3 5 6","0 2 3 6","0 1 3 5 6","0 1 3 4 5 6","1 2 6","0 1 2 3 4 5 6","0 1 2 3 5 6", "3"],numList: []}},computed: {val() {return this.rect.options.data || 0;},fontSize() {return this.rect.options.fontSize || 80;},frontColor() {return this.rect.options.frontColor || 'rgba(0, 0, 0, .8)' ;},backColor() {return this.rect.options.backColor || '#ccc' ;},digits() {return this.rect.options.digits || 5;}},watch: {val(v){this.createLedNum(v, {width: this.fontSize});},fontSize(val){this.createNum(this.digits);this.createLedNum(this.val, {width: val});},digits(val){this.createNum(val);this.createLedNum(this.val, {width: this.fontSize});},frontColor(){this.createLedNum(this.val, {width: this.fontSize});},backColor(){this.createNum(this.digits);this.createLedNum(this.val, {width: this.fontSize});}},methods: {createNum(digits){let width = this.fontSize;let height = parseInt(width/4);this.numList = [];for(let m = 0; m < digits; m++){this.numList.push({isPoint: false, num:'', codeNum: [], list:[{width: height, height: width, left: 0, top: height*2/3, isFront: false, bg: ''},{width: width, height: height, left: height*2/3, top: 0, isFront: false, bg: ''}, {width: height, height: width, left: width + height/3, top: height*2/3, isFront: false, bg: ''},{width: width, height: height, left: height*2/3, top: width+parseInt(height/3), isFront: false, bg: ''},{width: height, height: width, left: 0, top: width+height, isFront: false, bg: ''},{width: width, height: height, left: height*2/3, top: width*2+height*2/3, isFront: false, bg: ''},{width: height, height: width, left: width+parseInt(height/3), top: width+height, isFront: false, bg: ''}]});}},createLedNum(value, options){let regPos = /^\d+(\.\d+)?$/; //非负浮点数let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数if(regPos.test(value) || regNeg.test(value)) {let width = options.width;let height = width/4;let valStr = value.toString();let num= valStr.split('');let offset = 0;let len = num.length;let digits = this.digits;if(/\./.test(valStr)) {digits +=1;}if(len < digits) offset = digits - len;else if(len > digits) num = num.slice(0, digits);for(let p=0; p < this.numList.length; p++){if(this.numList[p].isPoint) {this.numList.splice(p, 1);break;}}for(let o = 0; o < this.numList.length; o++){for(let li of this.numList[o].list) {li.isFront = false;}}for(let m=0; m < num.length; m++){let havePoint = false;let n = num[m];let str = '';let cc = [];if(/\d/.test(n)){str = this.numRulsArr[n];cc = str.split(' ');}else if(/-/.test(n)){str = this.numRulsArr[10];cc = str.split(' ');}else if(/\./.test(n)){havePoint = true;}if(havePoint) {this.numList.splice(m + offset, 0, {isPoint: true, num: '', codeNum: [], isFront: true, list: [{width: width, height: height, color: this.frontColor }]});continue;}for(let i=0; i < 7; i++){let isFront = false;for(let j=0; j<cc.length; j++){if(i == cc[j]) {isFront = true;break;}else isFront = false;}if(isFront) this.numList[m + offset].list[i].isFront = true;else this.numList[m + offset].list[i].isFront = false;}}} else {this.$Message.error({content: '不是数值',duration: 3});}}},mounted(){const _this = this;this.createNum(this.digits);this.createLedNum(this.val, {width: this.fontSize});},destroyed() {var child = this.$el;child.parentNode.removeChild(child);}
}
</script>

使用

#引入
import led from './led.vue';
Vue.component('led', led);

<led :rect="rect"></led>

rect参数

{options: {data: 123.456, //要显示数字fontSize: 80, //led字体大大小frontColor： ‘rgba(227，47，47,.8)’，//前景色（数字颜色）backColor: '#ccc',  //背景色digits： 5 //数字显示位数}
}

js 模拟LED数字电子显示（分段式）相关推荐

VB.NET模拟LED数字钟
VB.NET模拟LED数字钟一.模拟功能 1.实时显示系统时间: 2.模拟LED显示"时-分-秒". 二.程序界面设计: 图1 程序界面设计三.程序代码: Public Cla ...
multism中ui和uo应该怎么表示_Multisim在模拟与数字电子技术中的应用（最终版）最新版...
<Multisim在模拟与数字电子技术中的应用.doc>由会员分享,可免费在线阅读全文,更多与<Multisim在模拟与数字电子技术中的应用(最终版)>相关文档资源请在帮帮文库 ...
JS中给数字添加千分符
一些项目在开发过程中,会遇到给表格.图表中的数字添加千分符的问题,下面分享一个简单实用的函数给大家. const thousands = (str) => {//str 字符类型的数字let t ...
模拟与数字电子技术【1】
1.一位十六进制数可以用多少位二进制数来表示?() A.1 B.2 C.3 D.16 2.以下电路中常用于总线应用的是() A.TSL门 B.OC门 C.漏极开路门 D.CMOS与非门 3.以下表达式 ...
模拟和数字电子电路基础-2-电阻网络
基尔霍夫电流定律(KCL) 电路中流出任何一个节点的电流等于流入该节点的电流.即流入任意节点的支路电流的代数和为零. 流经两个/一系列串联原件的支路电流相等基尔霍夫电压定律(KVL) 网络中任何闭合 ...
二进制在计算机电路中得到广泛的应用,模拟电子和数字电子技术的区别及应用...
模电是解决一般都是模拟信号,输出也是模拟信号.数电解决的是0和1的数字信号,输出也是0和1..两者需要数模或模数转换进行联系.一般是先进行模拟电路中放大,转化成数字信号,储存,输出时再变换成模拟信号等 ...
FPGA课程设计——数字电子时钟VERILOG（基于正点原子新起点开发板，支持8位或6位共阳极数码管显示时分秒毫秒，可校时，可设闹钟，闹钟开关，led指示）
2019级电子科学与技术专业FPGA课程设计报告 2022 年 5 月 20 日多功能数字电子钟的设计摘要电子设计自动化(EDA)是一种实现电子系统或电子产品自动化设计的技术,使用ED ...
数字电子计算机处理信号shi,余洪伟基于单片机数字电子时钟设计(led显示).doc...
余洪伟基于单片机数字电子时钟设计(led显示) 沈阳航空航天大学课程设计 (论文) 题目基于单片机的数字电子时钟设计 (LED显示) 班级学号 2013040701060 学生姓 ...
74ls20设计半加器_模拟数字电子技术实验指导及实验室规划方案,上海求育
原标题:模拟数字电子技术实验指导及实验室规划方案,上海求育上海求育QY-DZ535G电子学综合实验装置上海求育QY-DZ535G电子学综合实验装置是结合模拟.数字电路两门课程的实验教学特点,采用模 ...

js 模拟LED数字电子显示（分段式）

vue 模拟LED数字电子显示，分段式

js 模拟LED数字电子显示（分段式）相关推荐

最新文章

热门文章