css3和javascript实现的时钟效果
分类：实例代码
本章节分享一段代码实例，它利用css3和javascript实现了美观的时钟效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
background: #ddd;
}
#wrap {
margin-top: 150px;
text-align: center;
}
.box, .box span, .box div {
width: 70px;
height: 120px;
display: block;
line-height: 120px;
font-size: 100px;
text-shadow: 0 0 5px #999;
font-family: 'Helvetica';
}
.box span {
background-image: -webkit-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
background-image: -moz-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
background-image: -o-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
border-radius: 10px;
box-shadow: 0 2px 5px #666,0 -2px 5px #666;
}
.box {
display: inline-block;
border-radius: 10px;
position: relative;
perspective: 400px;
margin: 5px;
}
.box .top {
position: absolute;
height: 50%;
overflow: hidden;
left: 0;
top: 0;
box-shadow: 0 -2px 5px #666;
border-radius: 10px 10px 0 0;
-webkit-transition: all 0.7s;
-webkit-transform-origin: 0 100%;
-webkit-transform-style: preserve-3d;
-moz-transition: all 0.7s;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transition: all 0.7s;
-o-transform-origin: 0 100%;
}
.box .move {
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
perspective: 400px;
}
.box .move div {
position: absolute;
left: 0;
bottom: 0;
height: 100%;
}
.box .move .back span, .box .move .front span {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}
.box .move .back {
border-radius: 0 0 10px 10px;
box-shadow: 0 2px 5px #666;
z-index: 2;
overflow: hidden;
-webkit-transition: all 0.7s;
-webkit-transform: rotateX(-180deg);
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-moz-transition: all 0.7s;
-moz-transform: rotateX(180deg);
-moz-transform-origin: 0 0;
-ms-transform: rotateX(180deg);
-ms-transform-origin: 0 0;
-o-transition: all 0.7s;
-o-transform: rotateX(180deg);
-o-transform-origin: 0 0;
}
#wrap .box.active .top {
-webkit-transform: translateZ(2px) rotateX(180deg);
-moz-transform: translateZ(2px) rotateX(180deg);
-ms-transform: translateZ(2px) rotateX(180deg);
-o-transform: translateZ(2px) rotateX(180deg);
}
#wrap .box.active .back {
-webkit-transform: translateZ(2px) rotateX(0deg);
-moz-transform: translateZ(2px) rotateX(0deg);
-ms-transform: translateZ(2px) rotateX(0deg);
-o-transform: translateZ(2px) rotateX(0deg);
}
</style>
<script>
window.onload = function() {
var wrap = document.getElementById('wrap');
var boxArr = [];
var lastTime = '000000';
var boxInner = '';
for (var i = 0; i < 8; i++) {
var box = document.createElement('div');
box.className = 'box';
if ((i + 1) % 3) {
boxArr.push(box);
boxInner = '<span>0</span><div class="top"><span>0</span></div><div class="move"><div class="back"><span>0</span></div><div class="front"><span>0</span></div></div>';
} else {
boxInner = '<span class="maohao">:</span>'
}
box.innerHTML = boxInner;
wrap.appendChild(box);
}
function timeString(n) {
return n < 10 ? '0' + n : n + '';
}
function inner() {
var time = new Date();
var curTime = timeString(time.getHours()) + timeString(time.getMinutes()) + timeString(time.getSeconds());
for (var i = 0; i < curTime.length; i++) {
if (curTime.charAt(i) != lastTime.charAt(i)) {
boxArr[i].className = 'box';
boxArr[i].innerHTML = '<span>' + curTime[i] + '</span><div class="top"><span>' + lastTime[i] + '</span></div><div class="move"><div class="back"><span>' + curTime[i] + '</span></div><div class="front"><span>' + lastTime[i] + '</span></div></div>';
(function(n) {
setTimeout(function() {
n.className = 'box active';
}, 20)
})(boxArr[i])
}
}
lastTime = curTime;
}
setInterval(inner, 1000)
}
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
css3和javascript实现的时钟效果，这样的场景在实际项目中还是用的比较多的，关于css3和javascript实现的时钟效果就介绍到这了。
css3和javascript实现的时钟效果属于前端实例代码，有关更多实例代码大家可以查看。