基于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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js实现下一页页码效果
2017/03/07 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python3中for循环踩过的坑记录
2020/12/14 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
挂牌仪式主持词
2014/03/20 职场文书
安全协议书范本
2014/04/21 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
办理房产过户的委托书
2014/09/14 职场文书
社会实践单位意见
2015/06/05 职场文书
工作感言一句话
2015/08/01 职场文书
优质护理心得体会
2016/01/22 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技