04/10/2018, 20:13
Thủ thuật javacript : 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); ...
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>
(Nguồn: vndesignpro.com)
Chuyên Mục: Javascript
Bài viết được đăng bởi webmaster
