デジタル表示の動的変更を完了するためにどのように教え

1.目的

電子表スタイル液晶、動的変化に指定された要素が表示数を。

ターゲットキーワード：動的変更（タイマー）、指定された要素（DOM要素ID）、デジタル（番号）
効果：ページの複数の要素は、正または負のいずれかの異なるデジタル表示動的効果があります。そして、動的データ要素の少なくとも1つを変更します。

2.基本原理

（1）LCD電子テーブルスタイルは、方法を探してLCDデジタル時計のフォントは他のレンダリング技術を使用せずに、することができます。
（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メソッドを呼び出します。

レンダリング方法は、レンダリングのためには、ステップで0までの間に終了条件を判断するステップ変化、および長い最初のステップの計算を描くようにされて行っている、そして最後に、時限タスクは、次のを開始したsetTimeout。

詳細コードと、次のようにコメント、歓迎のメッセージ交換。

/**
    * 在指定的 DOM 元素中动态显示数值
    * 作者：[email protected]
    *
    * @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.ソースのダウンロード：

時間ディメンションへの世間の注目いいえ、取得するには、「ダイナミック・デジタル」を返信します。