js简单 图片版时钟，带翻转效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js简单 图片版时钟，带翻转效果相关的知识，希望对你有一定的参考价值。
js简单 图片版时钟，带翻转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
ul{
position: absolute;
left: 260px;
top: 50%;
margin-top: -18px;
}
ul:nth-of-type(2){
left: 426px;
}
li{
width: 16px;
height: 16px;
border-radius: 50%;
margin-bottom: 6px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/05/202930mgugifcg7sqssd3z.png);
}
.box {
background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/05/203841jh2r8ehe3htb2h8h.jpg);
width: 1024px;
height: 701px;
margin: 0 auto;
position: relative;
}
.clock {
width: 625px;
height: 116px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/05/204156a2xxddle694ep626.png);;
position: absolute;
top: 50%;
left: 50%;
margin-top: -58px;
margin-left: -312px;
}
.clockIco {
margin-top: 26px;
margin-left: 26px;
float: left;
}
.numClock {
margin-left: 30px;
margin-top: 18px;
overflow: hidden;
float: right;
}
.numClock div {
margin-right: 40px;
float: left;
}
.numClock span {
width: 60px;
height: 76px;
display: inline-block;
background: black;
border: 1px solid white;
font: bolder 40px/76px 黑体;
color: white;
text-align: center;
}
.dong {
animation: run 700ms linear;
}
@-webkit-keyframes run {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
.hidden{
display: none;
}
.
</style>
</head>
<body>
<div class="box">
<div class="clock">
<img class="clockIco" src="http://cdn.attach.qdfuns.com/notes/pics/201701/05/203840thuhishvnhzzzz4b.png" />
<div class="numClock">
<div class="hour">
<span>1</span>
<span>1</span>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div class="minute">
<span>1</span>
<span>1</span>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div class="second">
<span>1</span>
<span class="miao">1</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var ulS = document.querySelectorAll(‘ul‘);
var hourS = document.querySelector(".numClock").querySelectorAll("span")[0];
var hourG = document.querySelector(".numClock").querySelectorAll("span")[1];
var minuteS = document.querySelector(".numClock").querySelectorAll("span")[2];
var minuteG = document.querySelector(".numClock").querySelectorAll("span")[3];
var secondS = document.querySelector(".numClock").querySelectorAll("span")[4];
var secondG = document.querySelector(".numClock").querySelectorAll("span")[5];
clock();
//开启定时器
setInterval(clock, 1000);
function clock() {
var date = new Date();
//////////////////////////获取小时//////////////////////////////////
var hour = date.getHours();
//获取小时的十位数
//hour/10
hourS.innerHTML = parseInt(hour / 10);
//获取小时的个位数
//hour%10
hourG.innerHTML = parseInt(hour % 10);
//////////////////////////获取分钟//////////////////////////////////
var minute = date.getMinutes();
//console.log(minute);
//获取分钟的十位数
//minute/10
minuteS.innerHTML = parseInt(minute / 10);
//获取分钟的个位数
//minute%10
minuteG.innerHTML = parseInt(minute % 10);
//////////////////////////获取秒//////////////////////////////////
var second = date.getSeconds();
console.log(second);
//获取秒的十位数
//second/10
secondS.innerHTML = parseInt(second / 10);
//获取秒的个位数
//second%10
secondG.innerHTML = parseInt(second % 10);
}
var onOff = true;
setInterval(function() {
if(onOff) {
secondG.className = "dong";
ulS[0].className = ‘hidden‘
ulS[1].className = ‘hidden‘
onOff = false;
} else {
secondG.className = "";
ulS[0].className = ‘‘
ulS[1].className = ‘‘
onOff = true;
}
}, 1000)
</script>
</body>
</html>
新的web前端学习群，120342833，欢迎大家一起学习，以前在web学习群里的看到了加下。。
以上是关于js简单 图片版时钟，带翻转效果的主要内容，如果未能解决你的问题，请参考以下文章