* {
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;
}
这是个可以滚动数字的计数器,可以看见最简单的形式就是一个数字盘。
数字盘内默认显示的是现在的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%);这几项。