本文介绍如何使用JavaScript实现数字在指定DOM元素内的动态变化显示效果。通过引入液晶电子表字体，结合定时器任务计算步长，实现数字的正负动态切换与平滑过渡。文章提供了完整的接口定义、多元素支持方案及源码下载链接，帮助开发者快速掌握该特效的实现原理。
首先展示实现效果，若感兴趣可参考后续代码，文末提供完整源码。
目标与基本原理
1.目标
以液晶电子表样式，在指定元素内动态显示数字。
核心要素包括：动态变化（依赖定时器）、指定元素（通过DOM元素ID定位）、数字（number类型）。效果要求：多个页面元素均以动态效果显示不同数值，支持正负数，并能动态改变至少一个元素的数据。
2.基本原理
（1）采用液晶电子表字体，无需额外绘制技巧。\n（2）动态变化通过定时器任务实现。为确保视觉上的动态时长，需根据变化量计算步长。本文默认变化频率为50毫秒一次，动态过程持续2秒（即2000毫秒），因此变化次数为40次，步长等于变化量除以40。
其余部分为规则约束与控制逻辑，包括支持多元素隔离、动态变化的结束条件、步长计算方向及时长控制等。
实现步骤与代码解析
3.步步实现
3.1下载字体定义字体名称
最终提供的源码中包含字体文件。需在CSS中定义字体名称以便样式引用。
@font-face {
font-family: LEDFont;
src: url("./UnidreamLED.ttf");
}接下来定义显示数字的元素样式，其中使用刚定义的字体名称LEDFont。
.dynanum{
font-family: LEDFont;
font-size: 48px;
color:red;
padding:10px;
margin:10px;
display:inline-block;
width:200px;
text-align:right;
border:1px solid #bbbbff;
}3.2接口定义
使用者需提供显示的DOM元素ID和要显示的数值，因此向外提供的接口方法形如：function (elementId, number)。
3.3支持多元素操作
为支持多元素的简易操作，定义DOM元素ID与对象的映射变量。
var DynamicNumber = {};
DynamicNumber.NumberList = {};3.4绘制的实现
具体逻辑见代码。重点说明：实际绘制的对象以匿名函数方式创建，在首次涉及某DOM元素ID时进行。若已创建，则直接调用render方法。调用前，除设置新目标数值外，还需清除步长step，表示需重新计算步长。这些封装在接口内部，调用者无需关心。
绘制方法render完成一步变化的绘制，期间进行结束条件判断。当step为0时进行步长的首次计算，最后使用setTimeout启动下一步的定时任务。
详细代码及注释如下，欢迎留言交流。
/**
* 在指定的 DOM 元素中动态显示数值
* 作者：triplestudio@sina.com
*
* @param elementId : DOM 元素ID
* @param number : 数值
*/
DynamicNumber.show = function (elementId, number) {
// 1. 已建立过对象直接调用
var dynaNum = this.NumberList[elementId];
if (dynaNum) {
dynaNum.step = 0;
dynaNum.desNumber = number;
dynaNum.render();
return;
}
// 2. 创建动态数字绘制对象
dynaNum = new function (_elementId) {
this.elementId = _elementId;
this.preNumber = 0; // 变化过程值
this.desNumber = 0; // 目标数值，最终显示值
this.step = 0; // 变化步长，支持正向反向
// 绘制过程
this.render = function () {
// （1）结束条件
if (this.preNumber == this.desNumber) {
this.step = 0;
return;
}
// （2）步长设置（计划 2 秒完成 40*50=2000）
if (this.step == 0) {
this.step = Math.round((this.desNumber - this.preNumber) / 40);
if (this.step == 0) this.step = (this.desNumber - this.preNumber > 0) ? 1 : -1;
}
// （3）走一步
this.preNumber += this.step;
if (this.step < 0) {
if (this.preNumber < this.desNumber) this.preNumber = this.desNumber;
} else {
if (this.preNumber > this.desNumber) this.preNumber = this.desNumber;
}
// （4）显示
document.getElementById(this.elementId).innerHTML = this.preNumber;
// （5）每秒绘制 20 次（非精确值）
var _this = this;
setTimeout(function () { _this.render(); }, 50);
};
} (elementId);
// 3. 登记绑定元素ID
DynamicNumber.NumberList[elementId] = dynaNum;
// 4. 调用绘制
dynaNum.step = 0;
dynaNum.desNumber = number;
dynaNum.render();
};使用方式与总结
4.使用方式
如接口定义，使用者只需关心DOM元素ID与数值。此处使用一个定时器，每5秒钟改变一个数值以展示动态效果。
DynamicNumber.show("num1", 128);
DynamicNumber.show("num2", 12345);
DynamicNumber.show("num3", -8769);
DynamicNumber.show("num4", 987102);
DynamicNumber.show("num5", -30);
// 每 5 秒把 num1 中的数值改变
setInterval(function () {
DynamicNumber.show("num1", DynamicNumber.NumberList["num1"].desNumber + 300);
}, 5000);源码下载：
https://github.com/triplestudio/helloworld/tree/master/dynamic_number?from=singlemessage&isappinstalled=0
总结
以上介绍基于JS实现数字动态变化显示效果，希望对大家有所帮助。如有任何疑问请留言，小编会及时回复。感谢大家对本站网站的支持！\n\n如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！