css3+js简单数字时钟代码-精品资源网

这是一款简单的自动获取本地时间的css3+js简单数字时钟代码，时分秒上下滚动动画切换网页时钟特效。

js代码

<script>
\'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);
</script>