调⽤⽅式⽐较简单，以下详细介绍
实现代码
由于该⽅法依赖了jquery的，所以请读者在使⽤前先引⼊jquery
该⼯具类或多或少的使⽤到了es6语法，浏览器兼容性问题并未做太多的测试
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.width = width;
this.height = height;
this.lineWidth = lineWidth;
this.italics = italics;
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);
}
setValue(v, random){
let styleLed ='';
String()){
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";
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.-]+$/.String())){
alert("请传⼊数字类型的值!");
return;
}*/
let vArr = String().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} >
<div class="led-segment-float">
<div class="float-v"></div>
</div>
</div>
`;
}else{
ledHtml +=`
<div class=${random} >
<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');
*/
使⽤⽅式
为了尽可能的简化调⽤，我把所有的代码都封装进了js⾥⾯，⽆需其他css，调⽤的时候直接把以上代码粘贴下来，引⼊到html⽂档⾥⾯即可（依赖于jquery，请在引⼊此js⽂件之前引⼊jquery）
html代码
以下为我的⽰例⽂档调⽤的⽅式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--请务必先引⼊jquery-->
<script src="js/jquery.min.js"></script>
<!--此为本led样式的脚本-->
<script src="js/ledstyle.js"></script>
</head>
<style type="text/css">
</style>
<body>
<h1>html页⾯实现led样式的效果预览</h1>
<h3>宽为50像素，⾼为100像素，灯亮部分为5像素，颜⾊为橘⼦⾊，像右边倾斜10度的led效果</h3>
<div class="test1"></div>
<h3>宽为50像素，⾼为100像素，灯亮部分为5像素，颜⾊为红⾊，像左边倾斜30度的led效果</h3>
<div class="test11"></div>
<h3>宽为100像素，⾼为200像素，灯亮部分为10像素，颜⾊为天空蓝，不倾斜的led效果</h3>
<div class="test2"></div>
</body>
<script type="text/javascript">
let led =new LedStyle(50,100,5,'.test1','orange','-10');
led.setValues('012345678.9');
let led11 =new LedStyle(50,100,5,'.test11','red','30');
led11.setValues('-012345678.9');
let led1 =new LedStyle(100,200,10,'.test2','skyblue');
led1.setValues('1.23');
</script>
</html>
该⼯具类使⽤⾯向对象的思想来实现该功能；⽽我认为每⼀个数字是应该对象，即“123”是应该对象，“2323”也是⼀个对象，“-23.3234”也是⼀个对象；
想要使⽤此⼯具类，页⾯⾸先得有⼀个容器，以我上⾯为例，我使⽤
< div class=“test1”></ div>为容器；
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议