244 lines
7.3 KiB
JavaScript
244 lines
7.3 KiB
JavaScript
//显示led类型的数字的js代码工具类
|
||
class LedStyle {
|
||
/*
|
||
width:led容器的宽度，默认为50px
|
||
height：led容器的高度，默认为100px（实际高度要大于100px,实际高度为height+lineWidth）
|
||
lineWidth:led灯的宽度，默认为5px
|
||
selector:需要展示led灯的选择器名称
|
||
color:led灯的颜色，默认为红色
|
||
italics:倾斜角度，默认为0（不倾斜）
|
||
|
||
*/
|
||
constructor(width, height, lineWidth,selector, color, italics) {
|
||
this.width = width;
|
||
this.height = height;
|
||
this.lineWidth = lineWidth;
|
||
this.color = color;
|
||
this.italics = italics;
|
||
//创建对象的时候生成一个随机的class编码
|
||
this.selector = selector;
|
||
//如果在初始化的时候没有指定参数，都使用以下默认值进行初始化
|
||
this.setLedStyle(width?width:50, height?height:100, lineWidth?lineWidth:5, color?color:'red', italics?italics:'0')
|
||
}
|
||
|
||
setLedStyle(width = 50, height = 100, lineWidth = 5, color = 'red', italics = '0') {
|
||
let style = `
|
||
<style>
|
||
${this.selector} .led-segment{
|
||
width: ${width + 'px'};
|
||
height: ${height + 'px'};
|
||
position: relative;
|
||
transform: skewX(${italics + 'deg'});
|
||
margin:${lineWidth/2 + 'px'};
|
||
border:none;
|
||
}
|
||
${this.selector} .led-segment1{
|
||
width: calc(100% - ${lineWidth*2 + 'px'});
|
||
height: ${lineWidth + 'px'};
|
||
border-radius: ${lineWidth + 'px'};
|
||
margin: 0 auto;
|
||
border:none;
|
||
}
|
||
${this.selector} .led-segment2{
|
||
width: ${lineWidth + 'px'};
|
||
height: calc(50% - ${lineWidth + 'px'});
|
||
border-radius: ${lineWidth + 'px'};
|
||
border:none;
|
||
position: absolute;
|
||
top: ${lineWidth + 'px'};
|
||
right:0;
|
||
}
|
||
${this.selector} .led-segment3{
|
||
width: calc(100% - ${lineWidth*2 + 'px'});
|
||
height: ${lineWidth + 'px'};
|
||
border-radius: ${lineWidth + 'px'};
|
||
margin: 0 auto;
|
||
border:none;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: ${lineWidth + 'px'};
|
||
}
|
||
${this.selector} .led-segment4{
|
||
width: ${lineWidth + 'px'};
|
||
height: calc(50% - ${lineWidth + 'px'});
|
||
border-radius: ${lineWidth + 'px'};
|
||
margin: 0 0 0 calc(100% - ${lineWidth + 'px'});
|
||
border:none;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
}
|
||
${this.selector} .led-segment5{
|
||
width: calc(100% - ${lineWidth*2 + 'px'});;
|
||
height: ${lineWidth + 'px'};
|
||
border-radius: ${lineWidth + 'px'};
|
||
margin: 0 auto;
|
||
border:none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: ${lineWidth + 'px'};
|
||
}
|
||
${this.selector} .led-segment6{
|
||
width: ${lineWidth + 'px'};
|
||
height: calc(50% - ${lineWidth + 'px'});
|
||
border-radius: ${lineWidth + 'px'};
|
||
position: absolute;
|
||
top: ${lineWidth + 'px'};
|
||
border:none;
|
||
}
|
||
${this.selector} .led-segment7{
|
||
width: ${lineWidth + 'px'};
|
||
height: calc(50% - ${lineWidth + 'px'});
|
||
border-radius: ${lineWidth + 'px'};
|
||
position: absolute;
|
||
bottom: 0px;
|
||
border:none;
|
||
}
|
||
|
||
${this.selector} .led-color{
|
||
background: ${color};
|
||
opacity:0.05;
|
||
}
|
||
|
||
${this.selector} .float-v{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: ${lineWidth + 'px'};
|
||
left: 50%;
|
||
height: ${lineWidth + 'px'};
|
||
border: none;
|
||
background: ${color};
|
||
}
|
||
${this.selector} .led-segment-float{
|
||
width: ${width/2 + 'px'};
|
||
height: ${height + 'px'};
|
||
position: relative;
|
||
transform: skewX(${italics + 'deg'});
|
||
margin:1px;
|
||
float:left;
|
||
border:none;
|
||
}
|
||
</style>
|
||
`;
|
||
|
||
$("body").append(style);
|
||
}
|
||
//对单个led灯的样式进行样式设置
|
||
setValue(v, random) {
|
||
let styleLed = '';
|
||
switch(v.toString()) {
|
||
case '0':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment4,.led-segment5,.led-segment6,.led-segment7";
|
||
break;
|
||
case '1':
|
||
styleLed = ".led-segment2,.led-segment4";
|
||
break;
|
||
case '2':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment3,.led-segment5,.led-segment7";
|
||
break;
|
||
case '3':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment3,.led-segment4,.led-segment5";
|
||
break;
|
||
case '4':
|
||
styleLed = ".led-segment2,.led-segment3,.led-segment4,.led-segment6";
|
||
break;
|
||
case '5':
|
||
styleLed = ".led-segment1,.led-segment3,.led-segment4,.led-segment5,.led-segment6";
|
||
break;
|
||
case '6':
|
||
styleLed = ".led-segment1,.led-segment3,.led-segment4,.led-segment5,.led-segment6,.led-segment7";
|
||
break;
|
||
case '7':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment4";
|
||
break;
|
||
case '8':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment3,.led-segment4,.led-segment5,.led-segment6,.led-segment7";
|
||
break;
|
||
case '9':
|
||
styleLed = ".led-segment1,.led-segment2,.led-segment3,.led-segment4,.led-segment5,.led-segment6";
|
||
break;
|
||
case '-':
|
||
styleLed = ".led-segment3";
|
||
break;
|
||
default:
|
||
styleLed = "";
|
||
break;
|
||
}
|
||
//对当前的单个led样式进行记录，每个led灯的样式都应该是唯一的，所以这里使用了日期加随机数生成class选择器
|
||
var styleLedArr = styleLed.split(',').map((item, index) => {
|
||
return '.' + random + ' ' + item;
|
||
})
|
||
return styleLedArr.join(',') + '{opacity:1 !important} ';
|
||
}
|
||
//设置数值的方法
|
||
setValues(values) {
|
||
let selector = this.selector;
|
||
//清空原值
|
||
$(selector).html("");
|
||
/*此处代码通过自己选择开启，就是一个只允许输入数字，小数点，负数符的正则判断，可以不打开，不打开的时候，输入非数字、小数点、负数符的时候显示空
|
||
if(!/^[\d.-]+$/.test(values.toString())){
|
||
alert("请传入数字类型的值!");
|
||
return;
|
||
}*/
|
||
|
||
let vArr = values.toString().split('');
|
||
var style = '<style>';
|
||
let ledHtml = ``;
|
||
if(vArr) {
|
||
vArr.forEach((item, index) => {
|
||
//通过时间戳加生成随机的class类名，防止页面出现重复的类名
|
||
let random = 'child' + new Date().getTime().toString() + (Math.random() * 10000000).toString().substring(0, 6).replace(/\./g, '');
|
||
if(item == '.'){
|
||
ledHtml += `
|
||
<div class=${random} style="display:inline-block">
|
||
<div class="led-segment-float">
|
||
<div class="float-v"></div>
|
||
</div>
|
||
</div>
|
||
|
||
`;
|
||
}else{
|
||
ledHtml += `
|
||
<div class=${random} style="display:inline-block">
|
||
<div class="led-segment">
|
||
<div class="led-segment1 led-color"></div>
|
||
<div class="led-segment2 led-color"></div>
|
||
<div class="led-segment3 led-color"></div>
|
||
<div class="led-segment4 led-color"></div>
|
||
<div class="led-segment5 led-color"></div>
|
||
<div class="led-segment6 led-color"></div>
|
||
<div class="led-segment7 led-color"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
style += this.setValue(item, random);
|
||
}
|
||
|
||
})
|
||
}
|
||
/*清除inline-block后的间隙问题*/
|
||
style += (selector + '{font-size:0 !important}');
|
||
style += '</style>';
|
||
$("body").append(style);
|
||
$(selector).append(ledHtml);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/*
|
||
使用示例
|
||
html部分：
|
||
<div class="led-segment-parent"></div>
|
||
<div class="led-segment-parent1"></div>
|
||
|
||
js部分：
|
||
给类名为led-segment-parent（命名自定义）的节点显示宽度为50px、高度为100px、灯的线宽5px、颜色为橘色的，向右倾斜10度的led灯
|
||
let led = new LedStyle(50,100,5,'.led-segment-parent','orange','-10');
|
||
led.setValues('0123456789');
|
||
|
||
let led1 = new LedStyle(100,200,10,'.led-segment-parent1','skyblue','10');
|
||
led1.setValues('123');
|
||
*/
|
||
|