<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello world~!!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
.clearfix:after{content:'';display:block;clear:both;}
.fl{float:left;}
.fr{float:right;}
#time{
width:500px;
padding:20px;
height:80px;
border:1px solid #ccc;
margin:50px auto;
font-size:25px;
}
#time ul{
overflow:hidden;
}
#time ul li{
list-style: none;
float:left;
width:45px;
height:61px;
text-align:center;
position: relative;
}
#time ul li img{
position: absolute;
}
#time ul li img.time{
top:0px;
}
#time ul li img.sub{
top:61px;
}
</style>
</head>
<body>
<div class="" id="time">
<ul class='clearfix'>
<li>
<img class='time' src="../images/bannerimg/0.png" >
<img class='sub' src="../images/bannerimg/0.png" >
</li>
<li>
<img class='time' src="../images/bannerimg/0.png" >
<img class='sub' src="../images/bannerimg/0.png" >
</li>
<li><img src="../images/bannerimg/d.png" alt=""></li>
<li>
<img class='time' src="../images/bannerimg/0.png" >
<img class='sub' src="../images/bannerimg/0.png" >
</li>
<li>
<img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
</li>
<li><img src="../images/bannerimg/d.png" alt=""></li>
<li>
<img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
</li>
<li>
<img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
</li>
</ul>
</div>
</body>
<script>
var imgTime = document.getElementsByClassName('time');
var imgSub = document.getElementsByClassName('sub');
var aImgLi = [];
var arr_t = getDateTime().split('')
for (var i = 0,len = arr_t.length; i < len; i++) {
aImgLi.push(imgTime[i].parentElement);
setNumImg(i);
}
function setNumImg(i){
imgTime[i].src = '../images/bannerimg/' + parseInt(arr_t[i]) + '.png';
imgSub[i].src = '../images/bannerimg/' + (parseInt(arr_t[i]) + 1 == 10? 0 :parseInt(arr_t[i]) + 1) + '.png';
}
setInterval(function(){
var arr_current_t = getDateTime().split('');
var target = parseFloat( getStyle(imgTime[0],'height'))
for (var i = 0,len = arr_t.length; i < len; i++) {
if(arr_t[i] != arr_current_t[i]){
animation(aImgLi[i],'top',target,500,i)
}
}
arr_t = arr_current_t;
},1000)
function animation(obj,attr,target,time,index){
var init = 0;//
var init_t = new Date();//当前时间
//函数自执行 创建立即执行
(function fn(){
var ani_t = new Date()- init_t;;//动画执行的时间
var prop = ani_t/time;//时间比例
var val = (target - init)*prop;
if(ani_t >= time){
ani_t = time;
obj.style[attr] = -(init + val) + 'px';
setNumImg(index);
obj.style[attr] = '0px';
}else{
obj.style[attr] = -(init + val) + 'px';
window.requestAnimationFrame(fn);
}
})();
}
function getStyle(obj,attr){
return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.curentStyle[attr];
}
function getDateTime(){
var date = new Date();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
h = h >= 10 ? h : '0' + h;
min = min >= 10 ? min : '0' + min;
s = s >= 10 ? s : '0' + s;
return h + '' + min + '' + s;
}
</script>
</html>
js时间对象实践滚动时间
最新推荐文章于 2024-08-06 23:12:50 发布