JS的多種提示框、定時器、定時任務
好記性不如賴筆頭…………
提示框:alert(“恭喜你,註冊成功”);
確認框:confirm(“是否刪除?”);
確認框會返回一個boolean值,如果點選的是確定,返回true,如果點選的是取消,返回false
var returnValue = confirm(“是否刪除?”);
alert(“您點選返回的值為:”+returnValue);
輸入框:prompt(“請輸入密碼”);
輸入框會返回使用者輸入的值,如果使用者沒有輸入任何資料,會返回空,否則,會返回使用者輸入的資料,如果使用者點選了取消,會返回null
var returnValue = pormpt(“請輸入密碼”);
alert(“您輸入的值為:”+returnValue);
開啟一個新的頁面:open(“http://www.baidu.com“);
open(“連線地址”);
全寫為window.open(“連結地址”);
定時器1:setTimeout(“alert(‘hi’);”,1000);
setTimeout(方法體,毫秒數);
注意:在執行時,會先把方法體載入,然後在1000毫秒後再執行
var name = setTimeout(“alert(‘Hi JS’);”,1000);
關閉定時器1:clearTimeout(定時器名稱);
clearTimeout(name);
定時器2:setInterval(“alert(‘HI JS’);”,100);
var name = setInterval(“alert(‘HI JS’);”,1000);
setInterval(方法體,毫秒數);
關閉定時器2:clearInterval(name);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的BOM---window物件</title>
</head >
<body>
<button onclick="alertDemo();" >提示框</button><br/>
<button onclick="confirmDemo();" >確認框</button><br/>
<button onclick="promptDemo();" >輸入框</button><br/>
<button onclick="openDemo();" >開啟一個新的頁面</button><br/>
<button onclick="setTimeoutDemo();" >開啟定時器</button><br/>
<button onclick="clearTimeoutDemo();" >關閉定時器</button><br/>
<button onclick="setIntervalDemo();" >開啟定時器2</button><br/>
<button onclick="clearIntervalDemo();" >關閉定時器2</button><br/>
</body>
<script type="text/javascript">
//提示框
function alertDemo(){
alert("我是個提示框");
}
//確認框
function confirmDemo(){
var cf = confirm("是否確認?");
alert("如果你點選了確認,返回值 為true,如果你點選了取消,返回值 為false;本次的返回值 為:"+cf);
}
//輸入框
function promptDemo(){
var name = prompt("請輸入您的使用者名稱:");
alert("您輸入的使用者名稱為:"+name);
}
//開啟一個新的頁面
function openDemo(){
open("JSDemo1.html");
}
//開啟第一種定時器,每隔三秒執行一次
var setTimeoutName ;
var i = 0;
var setTimeoutDemo = function(){
alert("第一種定時器執行第:"+(++i)+"次");
setTimeoutName = setTimeout(setTimeoutDemo,2000);
}
//關閉定時器
function clearTimeoutDemo(){
clearTimeout(setTimeoutName);
i = 0;
alert("關閉定時器成功");
}
//開啟第二種定時器,每隔二秒執行一次
function setIntervalDemo(){
setTimeoutName = setInterval(function(){
alert("第二種定時器執行第:"+(++i)+"次");
},2000);
}
//關閉第二種定時器
var clearIntervalDemo = function(){
clearInterval(setTimeoutName);
i = 0;
alert("關閉定時器成功");
}
</script>
</html>
定時任務DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定時跳轉DEMO</title>
</head>
<body>
恭喜你註冊成功,本頁面將在<span id="timer">5</span>秒後跳轉到個人中心頁面,如果沒有跳轉,請<a href="JSDemo1.html">點選這裡</a>跳轉。
</body>
<script type="text/javascript">
//定義顯示的時間,因為定時任務是先把要執行的方法載入後,在1秒後再執行,所以可以比頁面上的秒數少一秒,這一點須要根據須要高速
var time = 4;
//建立定時器
var name = setInterval(
function(){
//獲取id timer元素的資料
var timer = document.getElementById("timer");
//如果秒數大於0
if(time > 0){
//將秒數寫入到頁面並將秒數減一
timer.innerHTML = time-- ;
}else{
//清除定時任務
clearInterval(name);
//跳轉
location.href="JSDemo1.html";
}
} ,
//每秒執行一次
1000
);
</script>
</html>