1. 程式人生 > >做一個帳號密碼登入介面

做一個帳號密碼登入介面

<body>

<!--以下為登入介面內容-->

     <input type="text" id="zh" value="請輸入帳號" onclick="f(); d()" bs="0"/><br />

     <input type="text"  id="mm" value="請輸入密碼" onclick="e()" /><br/>

     <input type="button" value="登入(10)"  id="dl0" onclick="c()" disabled="disabled"/>

   </body>

   <script type="text/javascript">

     var a = document.getElementById("zh");

     var b = document.getElementById("mm");

     var dl = document.getElementById("dl0");          //首先轉成dom物件

     var i =10;

     function f(){

           if(i>=0){

           dl.value="登入("+i+")";

           i--;

           setTimeout("f()",1000)

           }                        //設定登入按鈕樣式,每隔一秒減1,初始為10,10s後字樣消失

           else if(i<0){

             dl.value="登入";

             dl.removeAttribute("disabled")

           }

     }

     function d(){

        a.value="";

        a.style.backgroundColor=""

     }                    //清空上一次登入失敗後留下的痕跡

     function e(){

        b.value="";

        b.type="password";

        b.style.backgroundColor=""

     }

     function c(){                //驗證帳號密碼正確與誤

        if(a.value=="administrator"&&b.value=="password"){

           alert("登入成功")

        }

         else {

              if(a.value=="") {

             a.style.backgroundColor="red";

             alert("帳號不能為空")

             }

             else if(a.value!="administrator"){

                a.style.backgroundColor="red";

                alert("帳號錯誤");

             }

             else if(b.value!="password"){

                b.style.backgroundColor="red";

                alert("密碼錯誤");

             }

             i=10;

             dl.setAttribute("disabled","disabled")

              }

     }

   </script>