0
0

数显管DigitalTube类和数显管组 DigitalTubes类的构建与使用

数显管

类：DigitalTube

序号参数名类型描述是否必须默认/等效值/必填留空报错1element

null

undefined

object SVGSVGElement

object HTMLSVGElement

用于七段数码管显示的SVG元素否

undefined

/ 

null

2data

number

否0

方法列表

序号方法名参数描述1setDatadata（重新）设置显示数据。2setNumnum, point

setData

的额外封装方法。如果只需要显示数字（而不是自定义内容）则可以使用该方法，更加方便快捷。3setHeightheight设置SVG显示高度。4setColorcolor, elementNumber设置数码管颜色，可以选择设置背景、显示或不显示的颜色。5getElement无获取数码管的元素引用。

方法详细描述

  1. 方法：setData序号参数名类型描述是否必须默认/等效值/必填留空报错1datanumber显示数据，0~255的整数，实际是一个8位二进制数值是不填写则抛出TypeError错误超出范围则抛出RangeError错误
  2. 方法：setNum序号参数名类型描述是否必须默认/等效值/必填留空报错1numnumber需要显示的数字，0~9的整数是不填写则抛出TypeError错误超出范围则抛出RangeError错误2pointboolean是否需要显示小数点否false
  3. 方法：setHeight序号参数名类型描述是否必须默认/等效值/必填留空报错1heightstring``````number更改的目标高度，如果是数值，则认为是以px为单位的高度；否则需要带上等同于CSS中的长度单位，这样则为字符串是不填写则抛出TypeError错误
  4. 方法：setColor序号参数名类型描述是否必须默认/等效值/必填留空报错1colorstring要设置的颜色，使用CSS支持的颜色格式是不填写则抛出TypeError错误2elementNumbernumber要更改颜色的元素编号：0（前景）、1（背景）、2（矩形背景）否0
  5. 方法：getElement序号参数名类型描述是否必须默认/等效值/必填留空报错-无-获取数码管的SVG元素引用--

介绍：显示数据

1

如图所示，靠上的灯编码为0，按顺时针顺序接下来是1、2、3、4、5；接着是中间的灯，编码为6；最后是小数点，编码为7。

依照 二进制从右（为0）到左（为7） 的顺序，按照0代表熄灭，1代表亮起的规则，进行显示数据的编写。

比如需要显示1，则需要让1号、2号亮起。此时二进制的显示数据应当是

0b00000110

，可以使用16进制表达为

0x06

；显示2则使用

0b01011011

，可以使用16进制表达为

0x5b

，想要同时显示小数点只需要将第1位二进制值（从右往左最后一个）更改为1即可，或者直接将显示数字的基本显示数据数值增加128即可。

类：DigitalTubes

序号参数名类型描述是否必须默认/等效值/必填留空报错1element

undefined

string

object HTMLDivElement

包含多个数码管的DIV元素否

undefined

2datas

array

number

数码管对象数组，或者定义数码管数量的非负整数否0

方法列表

序号方法名参数描述1addTubetubeClass添加一个数码管。2removeTubeindex移除指定索引的数码管。3setDatasdatas设置所有数码管的显示数据。4setDataindex, data设置指定数码管的显示数据。5setNumsnums设置所有数码管的显示数字。6setNumindex, num设置指定数码管的显示数字。7setHeightsheights设置所有数码管的高度。8setHeightindex, height设置指定数码管的高度。9setColorscolors设置所有数码管的颜色。10setColorindex, color设置指定数码管的颜色。11getDatas无获取所有数码管的显示数据。12getDataindex获取指定数码管的显示数据。13getTubes无获取所有数码管对象。14getElement无获取数码管的DIV容器元素引用。

方法详细描述

  1. 方法：addTube序号参数名类型描述是否必须默认/等效值/必填留空报错1tubeClassDigitalTube要添加的数码管对象是不填写则抛出TypeError错误
  2. 方法：removeTube序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber要移除的数码管的索引是不填写或超出范围则抛出RangeError错误
  3. 方法：setDatas序号参数名类型描述是否必须默认/等效值/必填留空报错1datasarray包含每个数码管的显示数据的数组是不填写则抛出TypeError错误长度不匹配则抛出RangeError错误
  4. 方法：setData序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber数码管的索引是2datanumber显示数据，0~255的整数是不填写则抛出TypeError错误超出范围则抛出RangeError错误
  5. 方法：setNums序号参数名类型描述是否必须默认/等效值/必填留空报错1numsarray包含每个数码管显示数字的数组，数组元素为0~9的整数是不填写则抛出TypeError错误长度不匹配则抛出RangeError错误
  6. 方法：setNum序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber数码管的索引是不填写或超出范围则抛出RangeError错误2numnumber要显示的数字，0~9的整数是不填写则抛出TypeError错误超出范围则抛出RangeError错误
  7. 方法：setHeights序号参数名类型描述是否必须默认/等效值/必填留空报错1heightsarray包含每个数码管高度的数组，数组元素为string或number类型是不填写则抛出TypeError错误长度不匹配则抛出RangeError错误
  8. 方法：setHeight序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber数码管的索引是不填写或超出范围则抛出RangeError错误2heightstring``````number更改的目标高度是不填写则抛出TypeError错误
  9. 方法：setColors序号参数名类型描述是否必须默认/等效值/必填留空报错1colorsarray包含每个数码管颜色的数组，数组元素为string类型是不填写则抛出TypeError错误长度不匹配则抛出RangeError错误
  10. 方法：setColor序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber数码管的索引是不填写或超出范围则抛出RangeError错误2colorstring要设置的颜色是不填写则抛出TypeError错误
  11. 方法：getData序号参数名类型描述是否必须默认/等效值/必填留空报错1indexnumber数码管的索引是不填写或超出范围则抛出RangeError错误

显示效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码如下：

作者：农药君
CSDN：农药君：https://blog.csdn.net/qq_69128903
WebCat：bilinyj(14739)：http://space.webcat.top/page/my_source.html?uid=14739
GitHub：cnbilinyj：https://www.github.com/cnbilinyj
代码链接：https://gist.github.com/cnbilinyj/855b978596641deaf61c27d714151465

代码：

classDigitalTube{
    #path_datas
    #fg_path
    #bg_path
    #rect
    #element

    constructor(element, data){switch(typeof element){case'undefined':// 没有参数1则创建一个新的SVG元素this.#element = document.createElementNS("http://www.w3.org/2000/svg","svg");this.#element.setAttribute("height","300px");this.#element.setAttribute("viewBox","0 0 84 128");break;case'string':// 如果参数1是字符串，则认为这是字符串格式的元素选择器if(document.querySelectorAll(element).length ===1){let _element = document.querySelector(element);if(this.#isElement(_element)){if(_element.tagName ==="SVG"){this.#element = _element;}else{thrownewTypeError('Parameter 1 should be an HTML/XML DOM element (SVG).')}}else{thrownewTypeError('Parameter 1 should be an element selector String of type String or a DOM element of type Object(Element).');}this.#element = _element;}else{thrownewTypeError('The passed-in string parameter 1 cannot be selected and only one element is selected.')}break;case'object':// 如果参数1是JavaScript对象，则判断是不是JavaScript DOM元素(SVG)if(this.#isElement(element)){if(element.tagName ==="SVG"){this.#element = element;}else{thrownewTypeError('Parameter 1 should be an HTML/XML DOM element (SVG).')}}elseif(element ===null){this.#element = document.createElementNS("http://www.w3.org/2000/svg","svg");this.#element.setAttribute("height","300px");this.#element.setAttribute("viewBox","0 0 84 128");}else{thrownewTypeError('Parameter 1 should be an element selector String of type String or a DOM element of type Object(Element).');}break;default:thrownewTypeError('Parameter 1 should be an element selector String of type String or a DOM element of type Object(Element).');}// 获取内部引用，方便后续操作let $element =this.#element;// 清空元素
        $element.innerHTML ="";// 创建背景this.#rect = document.createElementNS("http://www.w3.org/2000/svg","rect");this.#rect.setAttribute("fill","#161616");this.#rect.setAttribute("x","-1");this.#rect.setAttribute("y","-1");this.#rect.setAttribute("width","86");this.#rect.setAttribute("height","130");
        $element.appendChild(this.#rect);// 设置路径数据，用于定义数码管每个段的位置this.#path_datas =["M25 10l8 -6h40l4 6l-8 6h-40l-4 -6z",// 0 (top)"M78 11l4 6l-5 40l-8 6l-4 -6l5 -40l8 -6z",// 1 (right top)"M69 65l4 6l-5 40l-8 6l-4 -6l5-40l8 -6z",// 2 (right bottom)"M7 118l8 -6h40l4 6l-8 6h-40l-4 -6z",// 3 (bottom)"M15 65l4 6l-5 40l-8 6l-4 -6l5 -40l8 -6z",// 4 (left bottom)"M24 11l4 6l-5 40l-8 6l-4 -6l5-40l8 -6z",// 5 (left top)"M16 64l8 -6h40l4 6l-8 6h-40l-4 -6z",// 6 (center)"M75 115a5 5 0 0 0 0 10a5 5 0 0 0 0 -10z"// 7 (point)];// 创建不显示部分的路径this.#bg_path = document.createElementNS("http://www.w3.org/2000/svg","path");this.#bg_path.setAttribute("d",this.#path_datas.join(""));this.#bg_path.setAttribute("fill","#313131");
        $element.appendChild(this.#bg_path);// 创建显示部分的路径this.#fg_path = document.createElementNS("http://www.w3.org/2000/svg","path");this.#fg_path.setAttribute("fill","#cf0000");
        $element.appendChild(this.#fg_path);// 如果传入了数据，设置数据if(data ==0||!!data){this.setData(data);}}#isElement(element){return element instanceofElement|| element instanceofHTMLDocument;}// 设置数码管的显示数据（0-255，用其二进制下的每一位分别表示8段的状态）setData(data){if((typeof data)!=="number"|| Math.floor(data)!== data)thrownewTypeError('Parameter should be of type Number.');if(data >255|| data <0)thrownewRangeError('Parameter should be a value from 0 (0x00) to 255 (0xff).');// 将数据转换为二进制字符串，并根据每一位决定是否显示对应段let data_bin = data.toString(2).padStart(8,"0");this.#fg_path.removeAttribute("d");let path_data ="";for(let str_index =0;str_index <8;str_index++){
            path_data +=(data_bin[str_index]!=="0")?(this.#path_datas[7- str_index]):("");}this.#fg_path.setAttribute("d", path_data);returnthis;}// 设置显示的数字（0-9），可选是否显示小数点setNum(num, point){if((typeof num)!=="number"|| Math.floor(num)!== num)thrownewTypeError('Parameter should be of type Number.');if(num >=10|| num <0)thrownewRangeError('Parameter should be a value from 0 to 9.');let data =0;// 预定义的数码管显示编码
        data +=([0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f])[num];// 如果需要显示小数点，添加相应值
        data +=(point)?128:0;this.setData(data);returnthis;}// 设置数码管颜色，可以选择设置背景/显示或不显示的颜色setColor(color, elementNumber =0){if(typeof color !=="string")thrownewTypeError('Parameter No.1 should be of type String.');if(typeof elementNumber !=="number")thrownewTypeError('Parameter No.2 should be of type Number.');if(elementNumber <0|| elementNumber >2|| Math.floor(elementNumber)!= elementNumber)thrownewRangeError('Parameter No.2 should be a value from 0 to 2.');
        console.log((["#fg_path","#bg_path","#rect"])[elementNumber])eval(`this.${(["#fg_path","#bg_path","#rect"])[elementNumber]}`).setAttribute("fill", color);}setHeight(height){switch(typeof height){case"number":this.#element.style.height =`${height}px`;break;case"string":this.#element.style.height = height;default:thrownewTypeError('Parameter should be of type Number or String.');}returnthis;}getElement(){returnthis.#element;}}classDigitalTubes{
    #tubes =[];
    #element;constructor(element, datas){switch(typeof element){case'undefined':this.#element = document.createElement("div");break;case'string':if(document.querySelectorAll(element).length ===1){this.#element = document.querySelector(element);}else{thrownewError('The provided string parameter cannot select an element or selects more than one element.');}break;case'object':if(this.#isElement(element)){if(element.tagName ==="DIV"){this.#element = element;}else{thrownewTypeError('Parameter 1 must be a DIV DOM element.');}}elseif(element ===null){this.#element = document.createElement("div");}else{thrownewTypeError('Parameter 1 must be a selector string or a DIV DOM element.');}break;default:thrownewTypeError('Parameter 1 must be a selector string or a DIV DOM element.');}if(Array.isArray(datas)){if(!datas.every(tube=> tube instanceofDigitalTube)){thrownewTypeError('All elements in the datas array must be instances of DigitalTube.');}this.#tubes = datas;}elseif(typeof datas ==='number'&& datas >=0){for(let i =0; i < datas; i++){this.addTube(newDigitalTube());}}else{thrownewTypeError('Parameter 2 must be an array of DigitalTube objects or a non-negative integer.');}this.#tubes.forEach(tube=>{this.#element.appendChild(tube.getElement());});}#isElement(element){return element instanceofElement|| element instanceofHTMLDocument;}addTube(tubeClass){if(!(tubeClass instanceofDigitalTube)){thrownewTypeError('The parameter must be an instance of DigitalTube.');}this.#tubes.push(tubeClass);this.#element.appendChild(tubeClass.getElement());}removeTube(index){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}let tube =this.#tubes.splice(index,1)[0];this.#element.removeChild(tube.getElement());return tube;}setDatas(datas){if(!Array.isArray(datas))thrownewTypeError('The parameter must be an array.');if(datas.length !==this.#tubes.length)thrownewRangeError('The length of the data array must match the number of tubes.');
        datas.forEach((data, i)=>this.#tubes[i].setData(data));}setData(index, data){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}this.#tubes[index].setData(data);}setNums(nums){if(!Array.isArray(nums))thrownewTypeError('The parameter must be an array.');if(nums.length !==this.#tubes.length)thrownewRangeError('The length of the number array must match the number of tubes.');
        nums.forEach((num, i)=>this.#tubes[i].setNum(num));}setNum(index, num){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}this.#tubes[index].setNum(num);}setHeights(heights){if(!Array.isArray(heights))thrownewTypeError('The parameter must be an array.');if(heights.length !==this.#tubes.length)thrownewRangeError('The length of the height array must match the number of tubes.');
        heights.forEach((height, i)=>this.#tubes[i].setHeight(height));}setHeight(index, height){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}this.#tubes[index].setHeight(height);}setColors(colors){if(!Array.isArray(colors))thrownewTypeError('The parameter must be an array.');if(colors.length !==this.#tubes.length)thrownewRangeError('The length of the color array must match the number of tubes.');
        colors.forEach((color, i)=>this.#tubes[i].setColor(color));}setColor(index, color){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}this.#tubes[index].setColor(color);}getDatas(){returnthis.#tubes.map(tube=> tube.getData());}getData(index){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}returnthis.#tubes[index].getData();}getColors(){returnthis.#tubes.map(tube=> tube.getColor());}getColor(index){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}returnthis.#tubes[index].getColor();}getHeights(){returnthis.#tubes.map(tube=> tube.getHeight());}getHeight(index){if(typeof index !=='number'|| index <0|| index >=this.#tubes.length){thrownewRangeError('Index out of range.');}returnthis.#tubes[index].getHeight();}getTubes(){returnthis.#tubes;}getElement(){returnthis.#element;}}
标签： javascript 前端 ui
本文转载自: https://blog.csdn.net/qq_69128903/article/details/142708391
版权归原作者 农药君 所有， 如有侵权，请联系我们删除。
登录后发布评论

“数显管DigitalTube类和数显管组 DigitalTubes类的构建与使用”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航