由于最近有个需求是将数字展示为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)
以下为我的示例文档调用的方式
<!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>
想要使用此工具类,页面首先得有一个容器,以我上面为例,我使用
< 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>