快捷導(dǎo)航

基于JS實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化顯示效果附源碼

更新時(shí)間：2019年07月18日 09:36:22 作者：三人行工作室

我們經(jīng)?？吹揭壕щ娮颖順邮剑瑪?shù)字動(dòng)態(tài)顯示，動(dòng)態(tài)變化的在指定元素內(nèi)顯示數(shù)字。怎么實(shí)現(xiàn)效果呢？下面小編給大家?guī)砹嘶贘S實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化顯示效果，感興趣的朋友一起看看吧

先給大家展示下效果，感覺不錯(cuò)，可以參考實(shí)現(xiàn)代碼，文末附有源碼哦。

1.目標(biāo)

以液晶電子表樣式，動(dòng)態(tài)變化的在指定元素內(nèi)顯示數(shù)字。

目標(biāo)關(guān)鍵詞：動(dòng)態(tài)變化（定時(shí)器），指定元素（DOM元素ID），數(shù)字（number）
效果：多個(gè)頁面元素中，均以動(dòng)態(tài)效果顯示不同的數(shù)字，可正可負(fù)。并動(dòng)態(tài)改變至少一個(gè)元素內(nèi)的數(shù)據(jù)。

2.基本原理

（1）液晶電子表樣式，找一種液晶電子表字體即可，無須使用別的繪制技巧。
（2）動(dòng)態(tài)變化則通過使用定時(shí)器任務(wù)來完成，動(dòng)態(tài)顯示要確保變化足夠的時(shí)長，因此，步長需要根據(jù)變化量來進(jìn)行計(jì)算，本文默認(rèn)變化頻率為 50 毫秒一次，動(dòng)態(tài)過程 2 秒（即 2000 毫秒），則變化次數(shù)為 40 次，因此步長為變化量除以 40 得到。

其余則均為規(guī)則約束與控制，如支持多元素隔離，動(dòng)態(tài)變化的結(jié)束條件，步長計(jì)算的方向與時(shí)長控制等。

3.步步實(shí)現(xiàn)

3.1下載字體定義字體名稱

最后提供的源碼會(huì)包含字體文件。在css中定義字體名稱以便樣式引用。

@font-face {
 font-family: LEDFont;
 src: url("./UnidreamLED.ttf"); 
}

接下來定義顯示數(shù)字的元素樣式，其中便使用到剛定義的字體名稱 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，和要顯示的數(shù)值，那這里向外提供的接口方法就出來了，形如：function (elementId, number)。

3.3支持多元素操作

為了支持多元素的簡易操作，這里定義DOM元素ID與對象的映射變量。

var DynamicNumber = {};
DynamicNumber.NumberList = {};

3.4繪制的實(shí)現(xiàn)

直接代碼說話。嗯，這里說明一下重點(diǎn)。對于實(shí)際繪制的對象，接口中以匿名函數(shù)的方式創(chuàng)建，在首次涉及到某DOM元素ID時(shí)進(jìn)行創(chuàng)建。如果已經(jīng)創(chuàng)建，則直接調(diào)用 render 方法，調(diào)用之前，除了設(shè)置新的目標(biāo)數(shù)值，還會(huì)清除步長 step，表示需要重新計(jì)算步長，當(dāng)然這些都是封裝在接口內(nèi)部，調(diào)用者不需要關(guān)心。

對于繪制方法 render，它所完成的是一步變化的繪制，期間進(jìn)行結(jié)束條件的判斷，并在 step 為 0 時(shí)進(jìn)行步長的首次計(jì)算工作，最后再使用 setTimeout 啟動(dòng)下一步的定時(shí)任務(wù)。

詳細(xì)代碼及注釋如下，歡迎留言交流。

/**
 * 在指定的 DOM 元素中動(dòng)態(tài)顯示數(shù)值
 * 作者：triplestudio@sina.com
 *
 * @param elementId :  DOM 元素ID
 * @param number  :  數(shù)值
 */
DynamicNumber.show = function (elementId, number) {
 // 1. 已建立過對象直接調(diào)用
 var dynaNum = this.NumberList[elementId];
 if (dynaNum) {
  dynaNum.step = 0;
  dynaNum.desNumber = number;
  dynaNum.render();
  return;
 }
 // 2. 創(chuàng)建動(dòng)態(tài)數(shù)字繪制對象
 dynaNum = new function (_elementId) {
  this.elementId = _elementId;
  this.preNumber = 0; // 變化過程值
  this.desNumber = 0; // 目標(biāo)數(shù)值，最終顯示值
  this.step = 0;  // 變化步長，支持正向反向
  // 繪制過程
  this.render = function () {
   // （1）結(jié)束條件
   if (this.preNumber == this.desNumber) {
    this.step = 0;
    return;
   }
   // （2）步長設(shè)置（計(jì)劃 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. 調(diào)用繪制
 dynaNum.step = 0;
 dynaNum.desNumber = number;
 dynaNum.render();
};

4.使用方式

如接口所定義，使用者只需要關(guān)心DOM元素ID與數(shù)值即可。這里，我們再用一個(gè)定時(shí)器，每5秒鐘改變一個(gè)數(shù)值來看看值變化時(shí)的動(dòng)態(tài)效果。

DynamicNumber.show("num1", 128);
DynamicNumber.show("num2", 12345);
DynamicNumber.show("num3", -8769);
DynamicNumber.show("num4", 987102);
DynamicNumber.show("num5", -30);
// 每 5 秒把 num1 中的數(shù)值改變
setInterval(function () { 
 DynamicNumber.show("num1", DynamicNumber.NumberList["num1"].desNumber + 300);
}, 5000);

源碼下載：

https://github.com/triplestudio/helloworld/tree/master/dynamic_number?from=singlemessage&isappinstalled=0

總結(jié)

以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化顯示效果 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: