Taught you how to complete the digital display dynamic change

1. Objectives

Electronic table style liquid crystal, dynamic changes in the specified elements display the number .

Target keyword : Dynamic Change (timer), the specified element (DOM element ID), digital (number)
effect : the plurality of page elements, are different digital display dynamic effects, either positive or negative. And dynamically changing at least one of the data elements.

2. The basic principle

(1) LCD electronic table style , looking for a way LCD digital watches font can be, without the use of other rendering techniques.
(2) dynamic change is accomplished by using a timer task, dynamic display to ensure that a sufficient change in the length, and therefore, steps need to be calculated according to the amount of change, this default change frequency is 50 milliseconds, the dynamic process of 2 seconds (i.e. 2000 ms), the change in the number of 40, so the step size obtained by dividing the amount of change is 40.

The rest are control rules and constraints, such as support for multi-element isolation end dynamic conditions, the calculated step size when long direction control.

3. realized step by step

3.1 download font Defines the font name

Finally, the source code provided will include the font file. Define the font name in the css styles for reference.

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

Next, we define digital display elements of style, which will use the font name just defined 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 Interface Definition

The user is able to provide a display of the DOM element ID , and to display the value of that interface methods provided herein outwardly came out, the form: function (elementId, number).

3.3 supports multi-element operation

For ease of operation to support multi-element mapping variables defined herein DOM element ID of the object.

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

Achieve drawn 3.4

Code directly to speak. Ah, here explain focus. For the actual drawing of the object, an interface to an anonymous function is created, created the first time it comes to a DOM element ID. If you have already created, directly call the render method, before calling, in addition to setting a new target value, will also clear step step, expressed the need to recalculate step, of course, these are encapsulated in the internal interfaces, the caller does not need to be concerned about.

For rendering methods render, it has done is to draw a step change to judge end condition during, and long first step calculations to 0 in step, and finally a timed task setTimeout start the next.

Detailed code and comments as follows, welcome message exchange.

/**
    * 在指定的 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. The use

The interface is defined, the user need only be concerned with the value can DOM element ID. Here, we then a timer, change every five seconds a numerical look at the dynamic effect of changes in value.

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);

Results are as follows:

5. Source Download:

No public attention to the time dimension, reply "Dynamic Digital" to get.