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

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

1.目标

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

目标关键词：动态变化(定时器)，指定元素(DOM元素ID)，数字(number)

效果：多个页面元素中，均以动态效果显示不同的数字，可正可负。并动态改变至少一个元素内的数据。

2.基本原理

(1) 液晶电子表样式，找一种液晶电子表字体即可，无须使用别的绘制技巧。

(2) 动态变化则通过使用定时器任务来完成，动态显示要确保变化足够的时长，因此，步长需要根据变化量来进行计算，本文默认变化频率为 50 毫秒一次，动态过程 2 秒(即 2000 毫秒)，则变化次数为 40 次，因此步长为变化量除以 40 得到。

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

3.步步实现

3.1下载字体定义字体名称

最后提供的源码会包