1. Goals

Target keywords: dynamic change (timer), specified element (DOM element ID), number
Effect: Among many page elements, different numbers are displayed in dynamic effect, which can be positive or negative. And dynamically change the data in at least one element.

2. Basic Principles

(1) LCD spreadsheet style, find a LCD spreadsheet font can be used, without using other drawing skills.
(2) Dynamic change is accomplished by using the timer task. Dynamic display ensures that the change is long enough. Therefore, step size needs to be calculated according to the change. In this paper, the default change frequency is 50 milliseconds, and in dynamic process 2 seconds (2000 milliseconds), the change number is 40, so the step size is changed. Quantity divided by 40.

Others are rule constraints and controls, such as supporting multi-element isolation, dynamic end conditions, direction and time control of step size calculation, etc.

3. Step by step realization

3.1 Download font definition font name

The final source code will contain the font file. Define font names in css for style references.

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

Next, define the element style for displaying numbers, which uses the newly defined font name, LED Font.

.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

What the user can provide is the DOM element ID with a display, and the value to be displayed. Then the interface method provided here comes out, such as function (elementId, number).

3.3 Supports Multi-element Operations

In order to support easy operation of multiple elements, the mapping variables between DOM element ID and object are defined here.

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

Realization of 3.4 Drawing

Speak directly in code. Well, here's the main point. For the actual drawn object, the interface is created as an anonymous function, which is created when a DOM element ID is first involved. If created, the render method is called directly. Before invoking, besides setting a new target value, the step size is cleared, indicating that the step size needs to be recalculated. Of course, these steps are encapsulated in the interface, and the caller does not need to care about them.

For render, it completes a step-by-step rendering, judges the termination conditions, calculates the first step size when step is 0, and then uses setTimeout to start the next timing task.

Detailed code and comments are as follows. Welcome to exchange messages.

/**
    * Dynamic display of values in specified DOM elements
    * Author: triplestudio@sina.com
    *
    * @param elementId  :      DOM Element ID
    * @param number     :      numerical value
    */
DynamicNumber.show = function (elementId, number) {
    // 1. Object direct invocation has been established
    var dynaNum = this.NumberList[elementId];
    if (dynaNum) {
        dynaNum.step = 0;
        dynaNum.desNumber = number;
        dynaNum.render();
        return;
    }

    // 2. Creating Dynamic Digital Drawing Objects
    dynaNum = new function (_elementId) {
        this.elementId = _elementId;
        this.preNumber = 0; // Change process value
        this.desNumber = 0; // Target value, final display value

        this.step = 0;      // Change step size to support forward and backward
        // Drawing process
        this.render = function () {
            // (1) Termination Conditions
            if (this.preNumber == this.desNumber) {
                this.step = 0;
                return;
            }

            // (2) Step settings (planned 2 seconds to complete 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) Take a step
            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) Display
            document.getElementById(this.elementId).innerHTML = this.preNumber;

            // (5) Draw 20 times per second (imprecise values)
            var _this = this;
            setTimeout(function () { _this.render(); }, 50);
        };
    } (elementId);

    // 3. Register the binding element ID 
    DynamicNumber.NumberList[elementId] = dynaNum;

    // 4. Call Drawing
    dynaNum.step = 0;
    dynaNum.desNumber = number;
    dynaNum.render();
};

4. Usage

As defined by the interface, the user only needs to care about the DOM element ID and value. Here, we use a timer to change a value every five seconds to see the dynamic effect of the change.

DynamicNumber.show("num1", 128);
DynamicNumber.show("num2", 12345);
DynamicNumber.show("num3", -8769);
DynamicNumber.show("num4", 987102);
DynamicNumber.show("num5", -30);
// Change num1 every 5 seconds
setInterval(function () { 
    DynamicNumber.show("num1", DynamicNumber.NumberList["num1"].desNumber + 300);
}, 5000);

The results are as follows:

5. Source download:

Focus on the time dimension of the public number, reply to the "dynamic number" can be obtained.