Bjb Code

定时器

在 JS 中，定时器可以用来延迟执行代码或周期性地执行代码。

定时器

/*
定时器（定时器是在页面加载完毕后才执行的）
*/
// 以下是一个页面加载完毕后循环执行的计时器，会返回这个定时器的 ID（可通过此 ID 取消定时器）
var timeId = setInterval(function(){
	alert(" 3 秒出现一次")
},3000);	// 每隔 3 秒钟执行一次定时器里面的代码

// 点击按钮，停止循环执行的计时器
document.getElementById("btn4").onclick = function(){
	window.clearInterval(timeId);	// 括号中是定时器的 ID
}



// 只执行一次的计时器，页面加载完毕之后的 2 秒执行这个一次性定时器
setTimeout(function(){
	alert("弹一个窗")
},2000);
		
// 点击按钮，停止只执行一次的计时器，页面加载完毕之后的 2 秒执行这个一次性定时器（创建时返回会返回定时器的ID）
var timeId = setTimeout(function(){
	alert("弹一个窗")
},2000);
// 一次性的定时器执行完之后最好清理掉，否则虽然一次性定时器不会执行了，但是仍然会在内存中占用空间
document.getElementById("btn4").onclick = function(){
	window.clearTimeout(timeId);
}
			
			
				
// 定时器实现背景色渐变
document.getElementById("btn5").onclick = function(){	// 按钮点击事件
	var i = 10;
	var timeId = setInterval(function(){
		i--;
		if(i <= 0){
			window.clearInterval(timeId);
		}
		document.getElementById("dv1").style.opacity = i/10;
	},1000);
}
						
// 定时器实现 div 宽度渐变
document.getElementById("btn6").onclick = function(){
	var wid = 400;
	var timeId = setInterval(function(){
		wid += 10;
		if(wid == 500){
			window.clearInterval(timeId);
		}
		document.getElementById("dv2").style.width = wid+"px";	// 因为这里设置的是 css，所以需要加单位 px
	},1000)
}
								
// 设置任意一个元素，移动到指定的位置（速度相同）
function animate(element,target){
	// 先清理对象中的定时器（有可能会多次点击）
	clearInterval(element.timeId);
	//定时器的 id 值存储到对象的一个属性中
	element.timeId = setInterval(function(){
		// 获取元素当前的位置，数字类型
		var current = element.offsetLeft;
		// 每次移动的距离（当前位置小于目标位置，就向右移动，step 是正数；当前位置大于目标位置，就向左移动，step 是负数
		var step = 10;
		step = current < target ? step : -step;
		// 当前移动到的位置（如果当前位置到目标位置距离的绝对值，小于 step 的绝对值，就一步到位
		if(Math.abs(current - target) > Math.abs(step)){
			element.style.left = current + "px";	// 因为这里设置的是 css，所以需要加单位 px
		}else{
			// 清理定时器
			clearInterval(element.timeId);
			// 直接到达目标
			element.style.left = target + "px";
		}
	},20)
}
										
// 设置任意一个元素，移到指定位置（先快后慢）
function animate(element, target) {
	// 清理定时器
	clearInterval(element.timeId);
	//定时器的 id 值存储到对象的一个属性中
	element.timeId = setInterval(function () {
		// 获取元素的当前位置
		var current = element.offsetLeft;
		// 移动的步数
		var step = (target-current) / 10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		current += step;
		element.style.left = current + "px";	// 因为这里设置的是 css，所以需要加单位 px
		if(current == target) {
			// 清理定时器
			clearInterval(element.timeId);
		}
		// 测试代码:
		console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" +step);
	}, 20);
}