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


Posted in Javascript onJuly 18, 2019

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

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

1.目标

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

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

2.基本原理

(1) 液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧。
 (2) 动态变化则通过使用定时器任务来完成,动态显示要确保变化足够的时长,因此,步长需要根据变化量来进行计算,本文默认变化频率为 50 毫秒一次,动态过程 2 秒(即 2000 毫秒),则变化次数为 40 次,因此步长为变化量除以 40 得到。

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

其余则均为规则约束与控制,如支持多元素隔离,动态变化的结束条件,步长计算的方向与时长控制等。

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实现数字动态变化显示效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
js中数组的常用方法小结
Dec 30 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 #Javascript
vue使用video.js进行视频播放功能
Jul 18 #Javascript
百度小程序之间的页面通信过程详解
Jul 18 #Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 #Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
You might like
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP如何使用Memcached
2016/04/05 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python的等深分箱实例
2019/11/22 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python有几个版本
2020/06/17 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
小区停车场管理制度
2014/01/27 职场文书
团日活动策划书
2014/02/01 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
课外访万家心得体会
2014/09/03 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
小学校园广播稿
2015/08/18 职场文书
大学军训心得体会800字
2016/01/11 职场文书