一款JS+CSS3创意的数字时钟代码,时分秒都是通过竖直排列的数字来显示的,秒位的数字不停的变换着,数字10则用0来表示。
页面的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);
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791