手把手教你完成數字動態變化顯示效果

三人行工作室發表於2019-07-18

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.原始碼下載：

關注時間維度公眾號，回覆"動態數字"即可獲得。

相關文章