如何用HTML技术制作一个简单的数字表盘

这就是表盘的真面目，如果要直接在要添加的位置加入数字表盘的话，要先在添加的位置写：

<div class="style__panel" id="demo-panel">
    <!--此处仅用3位数，毕竟懒癌犯了，而且多了不利于阅读-->
    <div class="style__digit">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
    <div class="style__digit">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
    <div class="style__digit">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
</div>

加入CSS

.style__digit ul{
    margin:0;padding:0
}
.style__panel{
    border:1px solid #fff;
    background:#000;
    margin:auto
}
.style__panel,.style__panel .style__digit{
    height:50px;
    font-size:45px;
    line-height:50px
}
.style__panel .style__digit{
    float:left;
    display:inline-block;
    overflow:hidden;
    box-sizing:border-box;
    width:50px;
    border:none
}
.style__panel .style__digit ul{
    transition:margin-top .5s ease
}
.style__panel .style__digit+.style__digit{
    border-left:1px solid #fff
}
.style__panel .style__digit li{
    width:50px;
    height:50px;
    color:#fff;
    text-align:center
}

最后用JS初始化，数字表盘就OK了：

var panel = {
    digit:null,
    selector:null,
    launch:function(selector){
        let e;
        if(!(e = document.querySelector(selector))) return console.error(`Element ${selector} does not exist!`);
        this.element=e;
        this.selector=selector;
        return true;
    },
    update:function(number){
        console.log(this);
        if(isNaN(number)) return console.error(TypeError(`${number} is not a number!`));
        var digits = document.querySelectorAll(`${this.selector} ul`).length;
        var n = Number(number).toString();
        n = n.length<digits?"0".repeat(digits-n.length) + n:n;
        for(let i = digits; i>0; i--) document.querySelector(`${this.selector} .style__digit:nth-child(${i}) ul`).style.marginTop=`-${50*n[i-1]}px`;
        return this.digit = n;
    }
};
panel.launch("#demo-panel");
panel.update(Math.random()*6666);

如果认为很麻烦的话，我还写了个自动初始化脚本，只要引入了jQuery就可以使用：

~(function(){
    'use strict';
    var options={
        /*你的设定，请修改！*/
        globals:"_0xdigitPanel",/*全局存储变量名称*/
        digits:10,/*数字数量，暂不支持自动*/
        update:function(){
            /*返回要显示的数字*/
            return Date.parse(new Date())/1000|0;
        },
        updateInterval:50,/*更新频率(毫秒)*/
        selector:"body",/*容器的CSS选择器，务必修改*/
        loadStyleSheet:true/*自动载入样式表*/
    };
    /*开始工作！*/
    /*载入样式表*/
    if(options.loadStyleSheet) $("head").append($("<style></style>").html(".digit ul{margin:0;padding:0}.panel{border:1px solid #fff;background:#000}.panel,.panel .digit{height:50px;font-size:45px;line-height:50px}.panel .digit{float:left;display:inline-block;overflow:hidden;box-sizing:border-box;width:50px;border:none}.panel .digit ul{transition:margin-top .5s ease}.panel .digit+.digit{border-left:1px solid #fff}.panel .digit li{width:50px;height:50px;color:#fff;text-align:center}"));
    /*生成随机元素ID*/
    var _id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
    /*放置元素*/
    var html = "<div class=\"digit\"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul></div>";
    html="<div id=\""+_id+"\" class=\"panel\">"+(html.repeat(options.digits))+"</div>";
    $(options.selector).append(html);
    window[options.globals]={
        /*载入全局配置*/
        eid:_id,
        update:options.update,
        updateInterval:options.updateInterval,
        selector:options.selector,
        digits:options.digits,
        /*循环数据存储*/
        _updater:function(){
            /*内嵌更新函数*/
            var cachedDigits = this.update().toString();
            if(cachedDigits.length<this.digits) cachedDigits="0".repeat(this.digits-cachedDigits.length)+cachedDigits;
            this._lastDigit=cachedDigits;
            for(var i = this.digits; i >0; i--) $("#"+this.eid+" .digit:nth-child("+(i)+") ul").css('margin-top','-'+(Number(cachedDigits[i-1])*50)+'px');
        },
        intervalId:setInterval("window[\""+options.globals+"\"]"+"._updater()",options.updateInterval),
        _lastDigit:null,
        /*开始控制器部分*/
        readLastDigit:function(){
            return this._lastDigit;
        },
        restart:function(updater=null,interval=null){
            clearInterval(this.intervalId);
            this.update=updater||this.update;
            this.updateInterval=interval||this.updateInterval;
            this.intervalId=setInterval("window[\""+options.globals+"\"]"+"._updater()",this.updateInterval);
        }
    };
})();

最后，祝你使用愉快，再见。