js時間物件實踐滾動時間
阿新 • • 發佈:2019-02-09
<!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>