JS+CSS3创意的数字时钟代码

一款JS+CSS3创意的数字时钟代码，时分秒都是通过竖直排列的数字来显示的，秒位的数字不停的变换着，数字10则用0来表示。

分类：日期时间 > 计时器难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需简单设置页面元素的样式，代码如下：

html,
body {
  background-color: #1f1f1f;
  margin: 0;
  font-size: 24px;
  color: white;
  text-align: center;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}

#clock {
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -175px;
}

.digit-group {
  display: inline-block;
  height: 350px;
}
.digit-group:not(:last-child):after {
  content: ':';
  font-size: 72px;
}

.digit {
  display: inline-block;
  width: 50px;
}
.digit div {
  color: rgba(255, 255, 255, 0.1);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transition: font-size 250ms, -webkit-transform 500ms;
  transition: font-size 250ms, -webkit-transform 500ms;
  transition: font-size 250ms, transform 500ms;
  transition: font-size 250ms, transform 500ms, -webkit-transform 500ms;
}
.digit div.highlight {
  color: inherit;
  font-size: 72px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

页面的body部分，仅需设置一个div容器即可，代码如下：

<div></div>

页面的底部，需设置好数字时钟的各类响应，这里用了部分ES6的语法，代码如下：

let _timeElement10Digits = Array.from(Array(10)).map((n, i) => i);
let _timeElement6Digits = _timeElement10Digits.slice(0, 6);
let _timeElement3Digits = _timeElement10Digits.slice(0, 3);
let _timeElementStructure = [
	[_timeElement3Digits, _timeElement10Digits],
	[_timeElement6Digits, _timeElement10Digits],
	[_timeElement6Digits, _timeElement10Digits]
];

let clock = document.createElement("div");
clock.id = "clock";
document.body.appendChild(clock);
let digitGroups = [];

_timeElementStructure.forEach(digits => {
	let digitGroup = document.createElement("div");
	digitGroup.classList.add("digit-group");
	clock.appendChild(digitGroup);
	digitGroups.push(digitGroup);
	digits.forEach(digitList => {
		let digit = document.createElement("div");
		digit.classList.add("digit");
		digitList.forEach(n => {
			let ele = document.createElement("div");
			ele.innerText = n;
			digit.appendChild(ele);
		});
		digitGroup.appendChild(digit);
	});
});

function update() {
	requestAnimationFrame(update);
	let date = new Date();
	let time = [date.getHours(), date.getMinutes(), date.getSeconds()]
	.map(n => `0${n}`.slice(-2).split("").map(e => +e))
	.reduce((p, n) => p.concat(n), []);
	time.forEach((n, i) => {
		let digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
		Array.from(digit).forEach(n => n.classList.remove("highlight"));
		digit[n].classList.add("highlight");
	});
}
requestAnimationFrame(update);