[用css实现滚动效果]JS+CSS实现滚动数字时钟效果

【www.bbyears.com--js教程】

本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果，这个效果一般都是用在网页开场动画以及区域的时间显示中，非常好看，动画效果也很个性，我们先来看下运行后的效果：

下面就是这个滚动时钟动画的全部代码：

 0
 1
 2


 0
 1
 2
 3
 4
 5
 6
 7
 8
 9



 0
 1
 2
 3
 4
 5


 0
 1
 2
 3
 4
 5
 6
 7
 8
 9



 0
 1
 2
 3
 4
 5


 0
 1
 2
 3
 4
 5
 6
 7
 8
 9

<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>

注意：其中最上面的是CSS样式内容，大家可以在其中进行调整颜色字体等

JS代码主要就是控制动画的滚动效果，CSS用来控制数字的大小等内容。

本文来源：http://www.bbyears.com/wangyezhizuo/144470.html