html前端实现led样式数字的效果（数码管效果展示数据）
前端实现led样式数字的效果
- 前言
- 效果图
- 实现代码
- 使用方式
- html代码
- 该工具类使用面向对象的思想来实现该功能；而我认为每一个数字是应该对象，即“123”是应该对象，“2323”也是一个对象，“-23.3234”也是一个对象；
- 示例
前言
由于最近有个需求是将数字展示为led样式，网上找了很多，很多都是时间倒计时，不能满足需求，而且文档很不齐全，使用方式也不明确。故自己写了此工具类（ps：接触前端不久，代码中可能存在很多的瑕疵，还望各位指正）希望能够帮助各位！！！谢谢
由于此片博客使用的方式是大量操作dom，未使用canvas，我已经重新使用canvas的方式写了一篇博客，两种方式各有优劣。此文使用的方式数字可以换行展示，且字体特别小的时候可能会出现线的粗细不一致，但是这种方式清晰度很高，并且放大缩小比较方便。我使用canvas的方式暂时不支持换行展示，但是代码简单，操作dom很少，效率高，但是清晰度偏低，放大缩小会模糊。
使用canvas实现led效果数字字体的链接
效果图
以下是功能的效果图
调用方式比较简单，以下详细介绍
实现代码
由于该方法依赖了jquery的，所以请读者在使用前先引入jquery
该工具类或多或少的使用到了es6语法，浏览器兼容性问题并未做太多的测试
//显示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 = `
`;
$("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 = '';
$("body").append(style);
$(selector).append(ledHtml);
}
}
/*
使用示例
html部分：
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”>为容器；
调用的时候首先是创建一个数字led对象，这个数字的每个值的大小为50像素、高度为100像素（实际像素其实为100+5，因为多了5像素的灯亮宽度，由于影响不大，我并未做处理）、灯亮的宽度为5px，将此数字对象插入到名称为test1的类选择器里面（即上面的div容器里面），设置灯的颜色为orange（橘色）、并且向右倾斜10度（可以不写或者写0就是不倾斜，倾斜角度可以为负数，负数为向左倾斜）
let led = new LedStyle(50,100,5,’.test1’,‘orange’,’-10’);
给led数字对象进行赋值，赋值很简单，只需要调用led对象里面的setValues方法，然后把值传入即可：
led.setValues(‘012345678.9’);
示例
以下是本图片的调用代码
<!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效果；想要不显示数字只需要传入非数字与小数点、负数符号的即可，如此处
-0123abc=45678.9；只会识别数字的内容
</h3>
<div class="test11"></div>
<h3>30，高为60像素，灯亮部分为3像素,颜色为天空蓝，不倾斜的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('-0123abc=45678.9');
let led1 = new LedStyle(30,60,3,'.test2','skyblue');
led1.setValues('1.23');
</script>
</html>