侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   661

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

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 元素中动态显示数值 * 作者:[email protected] * * @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实现数字动态变化显示效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • countup.js实现数字动态叠加效果
  • countUp.js实现数字动态变化效果


  • 上一条:
    vue使用video.js进行视频播放功能
    下一条:
    vue使用自定义指令实现拖拽
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客