Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:#404040;
	font-family:Roboto,sans-serif,arial;
}
.panel {
	height:50px;
	line-height:50px;
	position:absolute;
	left:50%;
	top:50%;
	border:1px solid rgba(256,256,256,1);
	transform:translate(-50%,-50%);
	font-size:45px;
	background:black;
	z-index:2;
	width: 500px;
}
.panel .digit {
	width:50px;
	line-height:50px;
	font-size:45px;
	height:50px;
	overflow:hidden;
	display:inline-block;
	border:none;
	float:left;
	box-sizing:border-box;
}
.panel .digit ul {
	transition:margin-top .5s ease;
}
.panel .digit+.digit {
	border-left:1px solid white;
}
.panel .digit li {
	width:50px;
	height:50px;
	color:white;
	text-align:center;
}
.setting {
	position:absolute;
	left:50%;
	top:65%;
	transform:translate(-50%,-50%);
	z-index:1;
}
.setting #custom-number {
	height:50px;
	width:500px;
	line-height:50px;
	font-size:45px;
	background:black;
	border:1px solid white;
	color:white;
}
.setting #custom-number::placeholder {
	color:darkgrey;
}
.setting #error:not(:empty) {
	padding:5px;
	color:red;
	border-bottom:2px solid red;
}
.title {
	position:absolute;
	height:50px;
	line-height:50px;
	font-size:50px;
	left:50%;
	top:40%;
	color:lightblue;
	transform:translate(-50%,-50%);
	/*渐变色字体(仅支持WebKit)*/
				background:-webkit-linear-gradient(left,lightblue,#FFBBAA);
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery滚动数字、计数器(原创)

这是个可以滚动数字的计数器,可以看见最简单的形式就是一个数字盘。

数字盘内默认显示的是现在的unix时间戳,如果想看自定义数字,可以在输入框内输入想要的数字。(如5201314、0x7fffffff等)

当然,想要更简单的话,可以在网站脚本里贴入以下代码初始化一个计数器,确保有足够位置即可:(我可是写了好久呢(○` 3′○))

~(function() {
    'use strict'; /*  滚动数字计数器自动初始化程序,  使用时可去掉注释和版权,可加密、压缩代码。  designed by dffzmxj in 2018. */
    var options = { /*你的设定,请修改!*/
        globals: "_0xdigitpanel",
        /*全局存储变量名称*/ digits: 10,
        /*数字数量,暂不支持自动*/ update: function() { /*应返回要显示的数字*/
            return date.parse(new date()) / 1000 | 0;
        },
        updateinterval: 50,
        /*更新频率(毫秒)*/ selector: "body" /*容器的css选择器,务必修改*/
    }; /*开始工作!*/ /*生成随机元素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 = 0; i < this.digits; i++) $("#" + this.eid + " .digit:nth-child(" + (i + 1) + ") ul").css('margin-top', '-' + (number(cacheddigits[i]) * 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);
        }
    };
})();

css代码复用时请去除z-index、position、left、top和transform:translate(-50%,-50%);这几项。

0