前言

由于最近有个需求是将数字展示为led样式，网上找了很多，很多都是时间倒计时，不能满足需求，而且文档很不齐全，使用方式也不明确。故自己写了此工具类（ps：接触前端不久，代码中可能存在很多的瑕疵，还望各位指正）希望能够帮助各位！！！谢谢

由于此片博客使用的方式是大量操作dom，未使用canvas，我已经重新使用canvas的方式写了一篇博客，两种方式各有优劣。此文使用的方式数字可以换行展示，且字体特别小的时候可能会出现线的粗细不一致，但是这种方式清晰度很高，并且放大缩小比较方便。我使用canvas的方式暂时不支持换行展示，但是代码简单，操作dom很少，效率高，但是清晰度偏低，放大缩小会模糊。

此方案暂时未做支持“ : ”符号。如有需要支持“ : ”请转至=>使用canvas实现led效果数字字体的链接

效果图

以下是功能的效果图

调用方式比较简单，以下详细介绍

实现代码

由于该方法依赖了jquery的，所以请读者在使用前先引入jquery
该工具类或多或少的使用到了es6语法，浏览器兼容性问题并未做太多的测试

//显示led类型的数字的js代码工具类
class LedStyle {/*width:led容器的宽度，默认为50pxheight：led容器的高度，默认为100px（实际高度要大于100px,实际高度为height+lineWidth）lineWidth:led灯的宽度，默认为5pxselector:需要展示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');
*/

使用方式

为了尽可能的简化调用，我把所有的代码都封装进了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>为容器；

调用的时候首先是创建一个数字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>

html前端实现led样式数字的效果（数码管效果展示数据）相关推荐

【案例】前端对接LED设备发送指令
需求需求:前端对接LED显示屏,且可以根据LED指令说明灵活性设置了解了解:设备LED指令是按照gb2312编码(16进制)来实现思路思路:需要将输入的内容转为16进制的gb2312编码格式 ...
WPF数据可视化控件（一） LED风格数字控件
原帖地址:https://blog.csdn.net/zhuo_wp/article/details/81561190 资源源码:https://download.csdn.net/download/ ...
后台管理系统界面和样式，点击左边新建标签效果
后台管理系统界面和样式,点击左边新建标签效果 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术. 在他的帮助下,我们可以创建很多伟大的事情.丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效 ...
Javascript前端加载等待圆型圈提示实现效果
Javascript前端加载等待圆型圈提示实现效果 CSS内容 #loading {background-color: #9f9f9f;opacity: 0.15;height: 100%;width ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
Button自定义样式、水波纹、按压效果详解
文章目录默认按钮样式 Background设置颜色 Background设置Drawable文件设置颜色.圆角设置按压效果拓展水波纹效果 shape 标签默认按钮样式按钮用Button按 ...
Unity3D制作LED滚动字幕（跑马灯）效果
Unity3D制作LED滚动字幕(跑马灯)效果搭建场景建立世界坐标的Canvas 新建LED模型 Text节点 Mask节点查看效果美化一下编写代码 DOTween插件设置属性编写文字滚 ...
不一样的 9 宫格图片展示，仿 Nice 首页图片列表 9 图样式，并实现拖拽效果
ImageNice9Layout 项目地址:wobiancao/ImageNice9Layout 简介:不一样的 9 宫格图片展示,仿 Nice 首页图片列表 9 图样式,并实现拖拽效果写在开头: ...

html前端实现led样式数字的效果（数码管效果展示数据）

前端实现led样式数字的效果

前言

效果图

实现代码

使用方式

html代码

该工具类使用面向对象的思想来实现该功能；而我认为每一个数字是应该对象，即“123”是应该对象，“2323”也是一个对象，“-23.3234”也是一个对象；

示例

html前端实现led样式数字的效果（数码管效果展示数据）相关推荐

最新文章

热门文章