setInterval與setTimeout的用法
阿新 • • 發佈:2018-11-28
setInterval與setTimeout的用法
定時器是我們在工作中經常用到的一些方法,比如輪播圖、彈窗、倒計時等場景,定時器是window的方法,所以this指向的一定是window(這是需要注意的)。
一個普通的倒計時方法:
<!--普通定時器倒計時-->
<div class="timer"></div>
<script>
window.onload=function() {
var div = document.getElementsByClassName('timer')[0];
//定義一個時間差函式
function time() {
//結束的時間
var target = new Date('2018-11-26 13:01:00');
//當前時間
var now = new Date();//不傳值預設取當前時間
var ms = target - now;
//將獲得的時間差(毫米單位),先將時間差轉為秒(除以1000),再根據時間制獲取值時分秒
var h = Math.floor(ms / 1000 / 3600);
h = h < 10 ? '0' + h : h;
var m = Math.floor((ms / 1000) % 3600 / 60);
m = m < 10 ? '0' + m : m;
var s = Math.floor((ms / 1000) % 60);
s = s < 10 ? '0' + s : s;
var res = h + ':' + m + ':' + s;
//將時間放在div內顯示
div.innerHTML = res;
if (ms<1000){//最後1秒
clearInterval(timer);
timer=null;
}
}
//定義一個定時器
var timer = setInterval(time, 1000);
}
注意,當倒計時為最後1秒時,就要清除定時器,否則定時器會多走一次。
一個普通的彈出動畫定時器案例:
<style>
.animate {
width: 180px;
height: 200px;
background: #07bbff;
position: fixed;
right: 0;
bottom: -200px;
}
</style>
<body>
<div class="animate">
<span onclick="hide()">關閉</span>
</div>
<script>
//思路:出現時一個定時器,隱藏時一個定時器,過5秒後一個週期定時器
var div=document.getElementsByClassName('animate')[0];
var span=div.getElementsByTagName('span')[0];
//獲取div盒子的外聯樣式方法:
var cssStyle=window.getComputedStyle(div,null);
//出現事件
function moveUp(){
//2s內完成 間隔時間為100ms,則需要20次,每次移動10px
//獲取div的bottom並轉為數字,用於計算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=0){
bottom+=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
}
}
//隱藏事件
function moveDown(){
//2s內完成 間隔時間為100ms,則需要20次,每次移動10px
//獲取div的bottom並轉為數字,用於計算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=-200){
bottom-=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
//消失後5秒在此出現
timer2=setTimeout(function(){
timer=setInterval(moveUp,100);
},5000);
}
}
var timer=null;
var timer2=null;
//頁面載入完成時出現
window.onload=function(){
timer=setInterval(mouveUp,100);
}
//點選時消失
function hide(){
//做一個判斷,避免在出現時進行點選,同時阻止事件冒泡
event.stopPropagation();
var bottom=parseInt(cssStyle.bottom);
if(bottom==0){
timer=setInterval(moveDown,100);
}
}
</script>
</body>
一個驗證碼定時器:
<button id="btn" onclick="timeDown()">點選獲取驗證碼</button>
<script>
var btn=document.getElementById('btn');
//倒計時時間
var sec=30;
function time(){
//消除定時器的界定都是1秒的時候
if(sec>1){
sec--;
sec=sec<10?'0'+sec:sec;
btn.innerHTML=sec+'s後重新獲取';
//禁止倒計時時點選
btn.removeAttribute('onclick');
btn.style.cursor='not-allowed';
}else{
clearInterval(timer);
timer=null;
//重新倒計時
btn.setAttribute('onclick','timeDown()');
btn.style.cursor='pointer';
sec=30;
}
}
var timer=null;
//點選時倒計時
function timeDown(){
timer=setInterval(time,1000);
}
</script>
注意,在使用onclick屬性時需要防止事件冒泡!!