<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>像素方块时钟CSS3特效 - 更多源码【www.96flw.com】</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class='wrapper'>
<div class='clock'>
<div class='clock__number hours'>
<div class='digit digit__0'>
<div class='pixel pixel_1'></div>
<div class='pixel pixel_2'></div>
<div class='pixel pixel_3'></div>
<div class='pixel pixel_4'></div>
<div class='pixel pixel_5'></div>
<div class='pixel pixel_6'></div>
<div class='pixel pixel_7'></div>
<div class='pixel pixel_8'></div>
<div class='pixel pixel_9'></div>
<div class='pixel pixel_10'></div>
<div class='pixel pixel_11'></div>
<div class='pixel pixel_12'></div>
<div class='pixel pixel_13'></div>
<div class='pixel pixel_14'></div>
<div class='pixel pixel_15'></div>
</div>
<div class='digit digit__0'>
<div class='pixel pixel_1'></div>
<div class='pixel pixel_2'></div>
<div class='pixel pixel_3'></div>
<div class='pixel pixel_4'></div>
<div class='pixel pixel_5'></div>
<div class='pixel pixel_6'></div>
<div class='pixel pixel_7'></div>
<div class='pixel pixel_8'></div>
<div class='pixel pixel_9'></div>
<div class='pixel pixel_10'></div>
<div class='pixel pixel_11'></div>
<div class='pixel pixel_12'></div>
<div class='pixel pixel_13'></div>
<div class='pixel pixel_14'></div>
<div class='pixel pixel_15'></div>
</div>
</div>
<div class='points'>
<div class='point'></div>
<div class='point'></div>
<div class='point'></div>
<div class='point'></div>
<div class='point'></div>
</div>
<div class='clock__number minutes'>
<div class='digit digit__0'>
<div class='pixel pixel_1'></div>
<div class='pixel pixel_2'></div>
<div class='pixel pixel_3'></div>
<div class='pixel pixel_4'></div>
<div class='pixel pixel_5'></div>
<div class='pixel pixel_6'></div>
<div class='pixel pixel_7'></div>
<div class='pixel pixel_8'></div>
<div class='pixel pixel_9'></div>
<div class='pixel pixel_10'></div>
<div class='pixel pixel_11'></div>
<div class='pixel pixel_12'></div>
<div class='pixel pixel_13'></div>
<div class='pixel pixel_14'></div>
<div class='pixel pixel_15'></div>
</div>
<div class='digit digit__0'>
<div class='pixel pixel_1'></div>
<div class='pixel pixel_2'></div>
<div class='pixel pixel_3'></div>
<div class='pixel pixel_4'></div>
<div class='pixel pixel_5'></div>
<div class='pixel pixel_6'></div>
<div class='pixel pixel_7'></div>
<div class='pixel pixel_8'></div>
<div class='pixel pixel_9'></div>
<div class='pixel pixel_10'></div>
<div class='pixel pixel_11'></div>
<div class='pixel pixel_12'></div>
<div class='pixel pixel_13'></div>
<div class='pixel pixel_14'></div>
<div class='pixel pixel_15'></div>
</div>
</div>
</div>
</div>
<script>
let digits = document.getElementsByClassName('digit'),
pixels = document.getElementsByClassName('pixel');
function setTime() {
let i,
date = new Date(),
seconds = date.getSeconds(),
pixels_to_toggle = (seconds === 0)? 60 : seconds,
time_numbers = ((date).toTimeString().substr(0,6)).split(':').join('');
for (i = 0; i < time_numbers.length; i++) {
digits[i].className = 'digit digit__' + time_numbers.charAt(i);
}
for (i = 0; i < pixels_to_toggle; i++) {
pixels[i].classList.toggle('pixel__active', seconds !== 0);
}
};
setTime();
setInterval(setTime, 500);
</script>
<div style="text-align:center;margin:0px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>