javascript自帶彈出視窗簡單介紹

admin發表於2017-03-09
JavaScript

在javascript中有三種常用的自帶彈出視窗，一個是alert()彈出警告框，一個是confirm()確認框，還有一個是prompt()提示框，下面就通過例項簡單介紹一下三種提示框的用法。

一.alert()警告框:

使用alert()可以彈出一個帶有文字的警告框，一般用於警告提示，引數是要彈出的文字內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>alert彈出視窗-螞蟻部落</title> 
<style type="text/css"> 
ul{
  list-style:none;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var userName=document.getElementById("userName");
  var pw=document.getElementById("pw");
  var sb=document.getElementById("sb");
   
  sb.onclick=function(){
     if(userName.value==""){
        alert("使用者名稱不能為空!");
        return false;
     }
     if(pw.value==""){
       alert("密碼不能為空!");
       return false;
    }
  } 
}
</script> 
</head> 
<body> 
<form action="#" method="post">
<ul>
   <li>姓名:<input type="text" id="userName" /></li>
   <li>密碼:<input type="password" id="pw" /></li>
   <li><input type="submit" id="sb" value="提交" /><input type="reset" value="重置" /></li>
</ul>
</form>
</body> 
</html>

以上程式碼，當提交表單的時候可以判斷姓名和密碼是否為空，如果為空則使用alert()彈出提示框。

二.confirm()確認框:

此確認框帶有兩個按鈕一個是"確認"，一個是"取消"，當點選確認的時候confirm()返回true，點選取消返回false。此函式的引數也是提示語。它一般用於確認是否要執行某個操作，例如批量刪除的時候，一般會有次提示。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
ul{
  list-style:none;
  font-size:12px;
}
ul li{
  width:250px;
  height:25px;
  line-height:25px;
}
span{
  font-size:12px;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var box=document.getElementById("box");
  var ckAll=document.getElementById("ckAll");
  var bt=document.getElementById("bt");
  var text=document.getElementById("text");
  var checkboxs=box.getElementsByTagName("input");
   
  ckAll.onclick=function(){
    if(this.checked){
       for(var i=0;i<checkboxs.length;i++){
         checkboxs[i].checked = true;
       }
       text.innerHTML="取消";
    }
    else{
      for(var i=0;i<checkboxs.length;i++){
        checkboxs[i].checked=false;
      }
      text.innerHTML="全選";
    }
  }
  bt.onclick=function(){
    if(confirm("確定要刪除嗎")){
      //要執行的程式碼
    }
  }
}
</script> 
</head> 
<body> 
<ul id="box">
  <li><input type="checkbox">螞蟻部落歡迎您</li>
  <li><input type="checkbox">只有努力奮鬥才會有美好的未來</li>
  <li><input type="checkbox">高手都是從菜鳥成長而來的</li>
  <li><input type="checkbox">太陽每一天都是新的</li>
  <li><input type="checkbox">把我好今天是最重要的，其他都是虛妄的</li>
</ul>
<input type="checkbox" id="ckAll"/><span id="text">全選</span>
<input type="button" value="刪除" id="bt" />
</body> 
</html>

以上程式碼當點選刪除的時候可以使用confirm彈出確認視窗，如果點選確定則confirm()會返回true，執行相應的程式碼。

三.prompt()提示框:

此提示框可以返回指定的文字，prompt()函式具有兩個引數，第一個引數是提示框的標題，第二個引數是要返回的文字，當然可以人為的填寫要返回的內容。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>prompt()提示框-螞蟻部落</title>
<script type="text/javascript"> 
function mytest() { 
  var webName=prompt("請輸入網站名稱","提示:例如:螞蟻部落") 
  if (webName!=null&&webName!="") { 
    document.write("歡迎光臨"+webName) 
  } 
} 
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=mytest;
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="點選顯示提示框" /> 
</body> 
</html>

以上程式碼，點選按鈕可以彈出提示框，可以輸入文字，點選確定可以返回此文字。

相關文章