当前位置: 首页 > 编程笔记 >

基于JS实现数字动态变化显示效果附源码

芮建茗
2023-03-14
本文向大家介绍基于JS实现数字动态变化显示效果附源码,包括了基于JS实现数字动态变化显示效果附源码的使用技巧和注意事项,需要的朋友参考一下

先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦。

1.目标

以液晶电子表样式,动态变化的在指定元素内显示数字。

目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(number)
效果:多个页面元素中,均以动态效果显示不同的数字,可正可负。并动态改变至少一个元素内的数据。

2.基本原理

(1) 液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧。
 (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实现数字动态变化显示效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 本文向大家介绍基于jQuery实现动态数字展示效果,包括了基于jQuery实现动态数字展示效果的使用技巧和注意事项,需要的朋友参考一下 我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局

  • 本文向大家介绍基于Jquery+Ajax+Json实现分页显示附效果图,包括了基于Jquery+Ajax+Json实现分页显示附效果图的使用技巧和注意事项,需要的朋友参考一下 1.后台action产生json数据。 2.struts.xml相关配置 3.js获取json数据分页显示

  • 本文向大家介绍基于jQuery实现数字滚动效果,包括了基于jQuery实现数字滚动效果的使用技巧和注意事项,需要的朋友参考一下 滚动方向:上下 源代码下载 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍基于JS快速实现导航下拉菜单动画效果附源码下载,包括了基于JS快速实现导航下拉菜单动画效果附源码下载的使用技巧和注意事项,需要的朋友参考一下 这是一个带变形动画特效的下拉导航菜单特效。该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒。 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导

  • 本文向大家介绍Js实现滚动变色的文字效果,包括了Js实现滚动变色的文字效果的使用技巧和注意事项,需要的朋友参考一下 Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。 以下是源代码:

  • 本文向大家介绍js实现显示手机号码效果,包括了js实现显示手机号码效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!