* { 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%);这几项。