基于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连接access数据库的方法
Nov 17 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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发电子邮件
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php简单防盗链实现方法
2015/07/29 PHP
zend framework重定向方法小结
2016/05/28 PHP
phpinfo的知识点总结
2019/10/10 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
基于Three.js实现360度全景图片
2018/12/30 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
python中pygame模块用法实例
2014/10/09 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python3处理word文档实例分析
2020/12/01 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
刑事和解协议书范本
2014/11/19 职场文书
公务员年度个人总结
2015/02/12 职场文书
追悼词范文大全
2015/06/23 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers