CSS3和js简单数字时钟代码.zip

时间:2022-07-31 04:55:45
【文件属性】:

文件名称:CSS3和js简单数字时钟代码.zip

文件大小:46KB

文件格式:ZIP

更新时间:2022-07-31 04:55:45

js特效-CSS3和js简单数字时钟代码

js代码 [removed] 'use strict'; var size = 86; var columns = Array.from(document.getElementsByClassName('column')); var d = undefined, c = undefined; var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant']; var use24HourClock = true; function padClock(p, n) { return p ('0' n).slice(-2); } function getClock() { d = new Date(); return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, ''); } function getClass(n, i2) { return classList.find(function (class_, classIndex) { return i2 - classIndex === n || i2 classIndex === n; }) || ''; } var loop = setInterval(function () { c = getClock(); columns.forEach(function (ele, i) { var n = c[i]; var offset = -n * size; ele.style.transform = 'translateY(calc(50vh ' offset 'px - ' size / 2 'px))'; Array.from(ele.children).forEach(function (ele2, i2) { ele2.className = 'num ' getClass(n, i2); }); }); }, 200 Math.E * 10); [removed] 这是一款简单的自动获取本地时间的css3 js简单数字时钟代码,时分秒上下滚动动画切换网页时钟特效。


【文件预览】:
CSS3和js简单数字时钟代码
----QQ截图20180103095324.png(47KB)
----index.html(4KB)

网友评论