最新消息:文章中包含代码时,请遵守代码高亮规范!

js简单 图片版时钟,滚动效果版【转载】

HTML+CSS Ann 551浏览 0评论

<!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/06/104834tvv2exv1v7ey970v.png);
}
.box {
background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/06/104834hcio6anui3nooiyn.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/06/104833i52ip5du22ilgpf2.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;
}
.second{
position: relative;
}
#miao1{
position: relative;
z-index: 1;
}
#bjBox{
position: absolute;
left: 67px;
top: 0;
}
.dong {
animation: run 1000ms linear;

}
@-webkit-keyframes run {
from {
transform: translateY(10px);
}
to {
transform: translateY(-80px);
}
}
.hidden{
display: none;
}

</style>
</head>

<body>
<div class="box">
<div class="clock">
<img class="clockIco" src="http://cdn.attach.qdfuns.com/notes/pics/201701/06/104834l99n91s14b49bm9x.png" />
<div class="numClock">
<div class="hour">
<span></span>
<span></span>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div class="minute">
<span></span>
<span></span>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div class="second">
<span></span>
<span id="miao1" class="miao"></span>
<span id="bjBox"></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>

2345截图20170106172416

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/19334.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者ann的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!