效果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒計時函數</title> <script> var timer=(function(){ return function (json){ if(json.currentTime){ var now=new Date(); var year=now.getFullYear();//返回年份(4位數字) var month=now.getMonth()+1;//返回月份(0-11,所以+1) var day=now.getDate();//返回某天(1-31) var h=now.getHours();//返回小時(0-23) var m=now.getMinutes();//返回分鐘(0-59) var s=now.getSeconds();//返回秒數(0-59) //補O m=m<10?'0'+m:m; s=s<10?'0'+s:s; var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+' '+h+':'+m+':'+s; setTimeout(function(){timer(json)},1000); }else{ var endtime=new Date(json.endtime);//結束時間 var nowtime = new Date();//當前時間 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //計算差的秒數 //一天24小時 一小時60分鐘 一分鐘60秒 d=parseInt(lefttime/3600/24); h=parseInt((lefttime/3600)%24); m=parseInt((lefttime/60)%60); s=parseInt(lefttime%60); document.getElementById(json.objId).innerHTML=d+"天"+h+"小時"+m+"分"+s+"秒"; if(lefttime>0){setTimeout(function(){timer(json)},1000);} } } })() window.onload=function(){ timer({ currentTime:true, objId:'thisTime' }) timer({ objId:'countDown', endtime:"2016/9/1,18:00" }) } </script> </head> <body> <b>當前時間:</b> <span id="thisTime"></span><br/><br/> <b>距離2016/9/1 18:00還有:</b> <span id="countDown"></span> </body> </html>
注意點:
1.有兩個功能:當前時間和倒計時,帶的參數不同
2.主要是利用js返回的數據,要注意月份,某天,小時,分鐘,返回的數值區間
3.星期的我這邊用數組處理了
4.倒計時主要是計算時間差,結束時間減去當前時間的秒數,在進行數學計算
5.這裡用了閉包,防止多個定時器沖突
6.這邊的代碼比較易懂,牛人可以改造成插件,還望分享分享。嘿嘿
效果(用gif錄制的效果不是很好,有興趣的可以down代碼)
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;} .block{position: relative;width: 500px;height: 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;} .item:nth-child(2n){background: #000} </style> <script> var scrollUp=(function(){ return function(json){ var objScroll = document.getElementById(json.id); objScroll.scrollTop = 0; objScroll.innerHTML += objScroll.innerHTML; if(json.on){ function scrollIng(){ if(objScroll.scrollTop >= objScroll.scrollHeight) { objScroll.scrollTop = 0; }else{ objScroll.scrollTop ++; } } var myScroll = setInterval(function(){scrollIng()},30); objScroll.onmouseover = function(){ clearInterval(myScroll); } objScroll.onmouseout = function(){ myScroll = setInterval(function(){scrollIng()},30); } }else{ var timer; function startScroll(){ timer=setInterval(function(){scrollUp()},30); objScroll.scrollTop++; } function scrollUp(){ if(objScroll.scrollTop % json.height==0){ clearInterval(timer); setTimeout(startScroll,2000); }else{ objScroll.scrollTop++; if(objScroll.scrollTop >= objScroll.scrollHeight/2){ objScroll.scrollTop =0; } } } setTimeout(startScroll,1000); } } })() window.onload=function(){ //on:間歇滾動/無縫滾動 height:間歇滾動的高度 scrollUp({on:true,id:'block'}); scrollUp({id:'block2',height:120}); } </script> </head> <body> <div class="box"> <div class="block" id="block"> <div class="item">1無縫滾動</div> <div class="item">2無縫滾動</div> <div class="item">3無縫滾動</div> <div class="item">4無縫滾動</div> <div class="item">5無縫滾動</div> <div class="item">6無縫滾動</div> <div class="item">7無縫滾動</div> <div class="item">8無縫滾動</div> <div class="item">9無縫滾動</div> <div class="item">10無縫滾動</div> <div class="item">11無縫滾動</div> <div class="item">12無縫滾動</div> <div class="item">13無縫滾動</div> <div class="item">14無縫滾動</div> <div class="item">15無縫滾動</div> </div> </div> <div class="box"> <div class="block" id="block2"> <div class="item">1間歇滾動</div> <div class="item">2間歇滾動</div> <div class="item">3間歇滾動</div> <div class="item">4間歇滾動</div> <div class="item">5間歇滾動</div> <div class="item">6間歇滾動</div> <div class="item">7間歇滾動</div> <div class="item">8間歇滾動</div> <div class="item">9間歇滾動</div> <div class="item">10間歇滾動</div> <div class="item">11間歇滾動</div> <div class="item">12間歇滾動</div> <div class="item">13間歇滾動</div> <div class="item">14間歇滾動</div> <div class="item">15間歇滾動</div> </div> </div> </body> </html>
注意點:
1.盒子塊要css 溢出隱藏:overflow:hidden
2.有兩個功能:間歇滾動/無縫滾動
3.先復制一塊一模一樣的代碼,無縫滾動:執行定時器一直增加scrollTop值,當scrollTop值大於盒子高度,在設置scrollTop為0,重新來過。間歇滾動在此基礎上加了setTimeout,間歇執行,在scrollTop到達指定的height停止
4.疑問:代碼中setInterval(function(){scrollIng()},30);這樣寫才可以執行,setInterval('scrollIng()',30);這樣就不行,有沒有大神指導下,兩者有啥區別?是啥機制?