@font-face {
 font-family: LEDFont;
 src: url("./UnidreamLED.ttf"); 
}

.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;
}

var DynamicNumber = {};
DynamicNumber.NumberList = {};

/**
 * 在指定的 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) "color: #ff0000">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"color: #ff0000">总结
以上所述是小编给大家介绍的基于JS实现数字动态变化显示效果 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！