手把手教你完成数字动态变化显示效果
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 元素中动态显示数值 * 作者: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);
效果如下:
5.源码下载:
关注时间维度公众号,回复"动态数字"即可获得。
上一篇: JQuery javascript实现父子页面相互调用
下一篇: 我是如何自学Java到找到工作