先给大家看看效果，感觉还不错，可以参考实现代码，源代码附在文末。

1.目标

以液晶电子表的样式动态显示指定元素中的数字。

目标关键词：动态变化(计时器)、指定元素(DOM元素ID)、数字效果：在多个页面元素中，不同的数字以动态效果显示，可以是正的，也可以是负的。并且动态地改变至少一个元素中的数据。

2.基本原则

(1)液晶电子表的风格，找一个液晶电子表的字体，不用使用其他的绘图技巧。(2)动态变化采用定时器任务完成，动态显示应保证足够的变化持续时间。因此，步长应该根据变化量来计算。本文默认的变化频率为50毫秒，动态过程为2秒(即2000毫秒)，那么变化次数为40次，因此步长是用变化量除以40得到的。

其余的是规则约束和控制，例如支持多元素隔离、动态更改结束条件以及控制步长计算的方向和持续时间。

3.逐步地

3.1下载字体定义字体名称

最后，提供的源代码将包含字体文件。在css中定义字体名称以供样式参考。

@ font-face { font-family : LedFont；src: url('。/unidreamled . TTF ')；}接下来，定义显示数字的元素样式，其中使用了刚才定义的字体名称LEDFont。dyna num { font-family : LedFont；font-size : 48px；color:redpadding:10pxmargin:10pxdisplay : inline-block；宽度width:200pxtext-align : right；border:1px实心# bbbbbbff；}3.2接口定义

用户能提供的是要显示的DOM元素ID和要显示的数值，然后这里提供的接口方法就出来了，比如函数(element ID，number)。

3.3支持多元素操作

为了支持多个元素的简单操作，这里定义了DOM元素ID和对象之间的映射变量。

var dynamic number={ }；动态号码。number list={ }；3.4图纸的实施

直接说代码。重点是。实际绘制的对象是作为接口中的匿名函数创建的，并且是在第一次涉及DOM元素ID时创建的。如果已经创建，将直接调用呈现方法。在调用之前，除了设置新的目标值外，步长将被清除，这表明需要重新计算步长。当然，这些都封装在接口内部，调用者不需要关心。

对于渲染方法render，它完成的是一步渲染，期间判断结束条件，当step为0时，第一次计算步长，最后通过setTimeout启动下一个计时任务。

详细的代码和注释如下。请留言交流。

/** * 在指定的数字正射影像图元素中动态显示数值* 作者：[电子邮件保护]* * @ param ElEMENTid : DOM元素标识* @参数号：数值*/动态号码。show=function(元素id，编号){ //1 .已建立过对象直接调用var dynaNum=this .数字列表[ElEMENTID]；if(Dynaminum){ Dynaminum。step=0；dyna num . desnumber=number dyna num。render()；返回；} //2.创建动态数字绘制对象dynaNum=新函数(_ ElEMENTid){ this。ElEMENTid=_ ElEMENTid这个。prenumber=0；//变化过程值这个。desnumber=0；//目标数值，最终显示值这个。step=0；//变化步长，支持正向反向//绘制过程this.render=function () { //(1)结束条件如果(这个。prenumber==这个。desnumber){这个。step=0；返回；} //(2)步长设置（计划2秒完成40 * 50=2000)如果(这个。step==0){ this。step=数学。圆((这个。设计这个。prenumber)/40)；如果(这个。step==0)这个。step=(这个。设计这个。prenumber 0)？1 : -1;} //(3)走一步这个。prenumber=这个。步骤；如果(这个。步骤0){ if(this。给这个号码。这个。prenumber=这个。desnumber} else { if(this。给这个号码。这个。prenumber=这个。desnumber} //(4)显示文件。getelementbyid(这。元素id ).innerHTML=this.preNumber//(5)每秒绘制20 次（非精确值)var _ this=thissetTimeout(函数(){ _ this。render()；}, 50);};}(ElEMENTID)；//3.登记绑定元素身份证动态号码号码列表[ElEMENTID]=Dynaminum；//4.调用绘制戴纳姆。step=0；dyna num . desnumber=number dyna num。render()；};4.使用方式

如接口所定义，使用者只需要关心数字正射影像图元素身份与数值即可。这里，我们再用一个定时器，每5秒钟改变一个数值来看看值变化时的动态效果。

DynamicNumber.show('num1 '，128)；DynamicNumber.show('num2 '，12345)；DynamicNumber.show('num3 '，-8769)；DynamicNumber.show('num4 '，987102)；DynamicNumber.show('num5 '，-30)；//每5秒把num1中的数值改变setInterval()函数(){ DynamicNumber.show('num1 '，DynamicNumber .数字列表['num1'].desNumber 300)；}, 5000);源码下载：

https://github。com/triple studio/hello world/tree/master/dynamic _ number？from=singlemessageisappinstalled=0

总结

以上所述是小编给大家介绍的基于射流研究…实现数字动态变化显示效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！