以液晶电子表样式,动态变化的在指定元素内显示数字。
目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(数量)
效果:多个页面元素中,均以动态效果显示不同的数字,可正可负。并动态改变至少一个元素内的数据。
(1)液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧。
,(2)动态变化则通过使用定时器任务来完成,动态显示要确保变化足够的时长,因此,步长需要根据变化量来进行计算,本文默认变化频率为50毫秒一次,动态过程2秒(即2000毫秒),则变化次数为40次,因此步长为变化量除以40得到。
其余则均为规则约束与控制,如支持多元素隔离,动态变化的结束条件,步长计算的方向与时长控制等。
3.1下载字体定义字体名称
最后提供的源码会包含字体文件。在css中定义字体名称以便样式引用。
@font-face {
字体类型:LEDFont;
src: url (“。/UnidreamLED.ttf”);
}
接下来定义显示数字的元素样式,其中便使用到刚定义的字体名称LEDFont。
.dynanum {
字体类型:LEDFont;
字体大小:48 px;
颜色:红色;
填充:10 px;
保证金:10 px;
显示:inline-block;
宽度:200 px;
text-align:正确;
边界:1 px固体# bbbbff;
}
3.2接口定义
使用者能提供的就是有显示的DOM元素ID,和要显示的数的值,那这里向外提供的接口方法就出来了,形如:函数(elementId、数量).
3.3支持多元素操作
为了支持多元素的简易操作,这里定义DOM元素ID与对象的映射变量。
var DynamicNumber={};
DynamicNumber。 NumberList={};
3.4绘制的实现
直接代码说话。嗯,这里说明一下重点。对于实际绘制的对象,接口中以匿名函数的方式创建,在首次涉及到某DOM元素ID时进行创建。如果已经创建,则直接调用渲染方法,调用之前,除了设置新的目标数值,还会清除步长一步,表示需要重新计算步长,当然这些都是封装在接口内部,调用者不需要关心。
对于绘制方法渲染,它所完成的是一步变化的绘制,期间进行结束条件的判断,并在为0时步进行步长的首次计算工作,最后再使用setTimeout启动下一步的定时任务。
详细代码及注释如下,欢迎留言交流。
/* *
*在指定的DOM元素中动态显示数的值
* triplestudio@sina.com
*
* @param elementId: DOM元素ID
* @param号码:数的值
*/DynamicNumber。显示=function (elementId、数量){//1。已建立过对象直接调用
var dynaNum=this.NumberList [elementId];
如果(dynaNum) {
dynaNum。一步=0;
dynaNum.desNumber=数量;
dynaNum.render ();
返回;
}//2。创建动态数字绘制对象
dynaNum=new函数(_elementId) {
这一点。elementId=_elementId;
这一点。preNumber=0;//变化过程值
this.desNumber=0;//目标数值,最终显示值
这一点。一步=0;//变化步长,支持正向反向//绘制过程
这一点。渲染=function () {//(1)结束条件
如果这一点。preNumber==this.desNumber) {
这一点。一步=0;
返回;
}//(2)步长设置(计划2秒完成40 * 50=2000)
如果这一点。一步==0){
这一点。一步=Math.round ((this.desNumber - this.preNumber)/40);
如果这一点。一步==0)。=(this.desNumber -这一步。preNumber祝辞0)& # 63;1:1;
}//(3)走一步
这一点。preNumber +=this.step;
如果这一点。一步& lt;0) {
如果这一点。preNumber & lt;this.desNumber)。preNumber=this.desNumber;
其他}{
如果这一点。preNumber祝辞this.desNumber)。preNumber=this.desNumber;
}//(4)显示
. getelementbyid (this.elementId)。innerHTML=this.preNumber;//(5)每秒绘制20次(非精确值)
var _this=;
setTimeout(函数(){_this.render ();},50);
};
}(elementId);//3。登记绑定元素ID
DynamicNumber。NumberList [elementId]=dynaNum;//4。调用绘制
dynaNum。一步=0;
dynaNum.desNumber=数量;
dynaNum.render ();
};
如接口所定义,使用者只需要关心DOM元素ID与数值即可。这里,我们再用一个定时器,每5秒钟改变一个数值来看看值变化时的动态效果。
