Tự học JavaScript (Phần 16) - Thiết lập thời gian chạy

JavaScript có thể thực hiện một chức năng nào đó sau một thời gian được định trước.

setTimeout() - Thực hiện một số lệnh với thời gian được định trước trong tương lai.

clearTimeout() - Hủy hàm setTimeout()

Cú pháp:

setTimeout(\\"javascript statement\\",milliseconds);
//milliseconds * 1000 = 1 giây

Ví dụ 1: Hiển thị hộp thoại alert sau 5 giây sau khi nhấn nút

<html>
<head>
<script type=\\"text/javascript\\">
	var t;
	function timedMsg(){
		var t=setTimeout(\\"alert(\'5 seconds!\')\\",5000);
	}
</script>
</head>

<body>
    <form>
	    <input type=\\"button\\" value=\\"Display timed alertbox!\\" onClick=\\"timedMsg()\\" />
    </form>
</body>
</html>

Ví dụ 2: Tạo một ô textbox và có giá trị thay đổi theo thời gian

<html>
<head>
<script type=\\"text/javascript\\">
	var c=0;
	var t;
	function timedCount(){
		document.getElementById(\'txt\').value=c;
		c=c+1;
		t=setTimeout(\\"timedCount()\\",1000);
	}
</script> 
</head>

<body>
<form>
    <input type=\\"button\\" value=\\"Start count!\\" onClick=\\"timedCount()\\">
    <input type=\\"text\\" id=\\"txt\\" />
</form>
</body>
</html>

Ví dụ 3: Dừng giá trị trong ô textbox trong ví dụ 2

<html>
<head>
<script type=\\"text/javascript\\">
	var c=0;
	var t;
	
	function timedCount(){
		document.getElementById(\'txt\').value=c;
		c=c+1;
		t=setTimeout(\\"timedCount()\\",1000);
	}	
	function stopCount()
	{
		clearTimeout(t);
	}
</script>
</head>
<body>
<form>
    <input type=\\"button\\" value=\\"Start count!\\" onClick=\\"timedCount()\\">
    <input type=\\"text\\" id=\\"txt\\">
    <input type=\\"button\\" value=\\"Stop count!\\" onClick=\\"stopCount()\\">
</form>
</body>
</html>

Ví dụ 4: Ẩn hiện một bức tranh kết hợp setTimeout() và thuộc tính opacity của CSS

<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\" />
<title>Untitled Document</title>
<script type=\\"text/javascript\\">
	
	var maxOpacity = 1;
	var minOpacity = 0;
	
	function setHidden(){
		var thisObj = document.getElementById(\'picture\');
		maxOpacity = maxOpacity - 0.1;
		if(maxOpacity >=  0){
			thisObj.style.opacity = maxOpacity;
			//thisObj.filters.alpha.opacity = maxOpacity;
			window.setTimeout(\\"setHidden(\'picture\')\\",100);
		}else{
			thisObj.style.opacity = 0;
		}
	}
	
	function setShow(){
		var thisObj = document.getElementById(\'picture\');
		minOpacity = minOpacity + 0.1;
		if(minOpacity <=  1){
			thisObj.style.opacity = minOpacity;
			//thisObj.filters.alpha.opacity = maxOpacity;
			window.setTimeout(\\"setShow(\'picture\')\\",100);
		}else{
			thisObj.style.opacity = 1;
		}
	}
	
</script>
</head>
<body >
	<input type=\\"button\\" onClick=\\"setHidden()\\" value=\\"Hidden\\"> 
   	<input type=\\"button\\" onClick=\\"setShow()\\" value=\\"Show\\"> 
    <br>
	<img src=\\"images/007.jpg\\" id=\\"picture\\" >
</body>
</html>

bởi pham van phi

Ngày 29/04/2012 vào lúc 23:37:01

chào cả nhà!
mình là men mới còn gà lắm, mong cả nhà giúp đỡ
giờ mình muốn tạo 1 trang như sau khi nhấn vào link liên kết sẽ tạo ra 1 trang thông báo vui lòng chờ trong 10s. sau đó hiện ra đồng hồ thông báo đếm ngược 10s sau 10s nó đến trang liên kết. mình chưa biết làm ntn mong cả nhà giúp đỡ
thanks cả nhà

Bài cùng chuyên mục

Phản hồi mới nhất
Video
Top Rate
Xem nhiều nhất

Chủ đề đang thảo luận trong diễn đàn

Xem tiếp