JavaScript⑵(小實例)

學習《動力節點》
javascript


1.時間html



1.1.顯示時間信息java

  星期0表示星期天,月份從零開始算起。年份須要注意避免千年蟲問題。app

<head>
  <meta charset="utf-8"/>
  <script type="text/javascript">
    function getDate(){
      var vardate = new Date();
      alert(vardate);
      
      // 星期
      vardate1 = vardate.getDay();
      alert("星期"+vardate1);
      // 月份
      vardate1 = vardate.getMonth();
      vardate1++;
      alert(vardate1+"月份");
      // 天數
      vardate1 = vardate.getDate();
      alert(vardate1+"日");
      // 年份
      vardate1 = vardate.getFullYear();
      alert(vardate1+"年");
    }
    
  </script>
</head>


1.2.把時間輸出到網頁dom

  寫到div中jsp

<body style="margin:50px 150px;">
    <div id="timediv"></div>
    <script type="text/javascript">
        function displayTime(){
            var timediv = document.getElementById("timediv");
            var nowT = new Date();
            var timestring = nowT.toLocaleString();
            <!-- alert(timestring); -->
            timediv.innerHTML = timestring;
        }
        displayTime();
    </script>
</body>


  讓時間走起來,使用個函數:setInterval,每秒調用一次時間顯示函數。
ide

<body style="margin:50px 150px;">
    <div id="timediv"></div>
    <script type="text/javascript">
        function displayTime(){
            var timediv = document.getElementById("timediv");
            var nowT = new Date();
            var timestring = nowT.toLocaleString();
            <!-- alert(timestring); -->
            timediv.innerHTML = timestring;
        }
        function infiniteLoop(){
            window.setInterval("displayTime()", 1000);
        }
        infiniteLoop();
    </script>
</body>



2.表單驗證
函數


2.1.校驗輸入oop

  在失去焦點時,啓用函數驗證提交信息。失去焦點的事件是blur。學習過程當中發現,要是回頭來從新填寫時,提示信息還在,也不夠完美。就使用mousedown事件消除提示信息。
學習

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表單驗證</title>
    <script type="text/javascript">
        //沒有填寫任何信息時,提示
        function chkNullText(Evalue, Ename){
            //用戶名輸入爲空時,提示
            if (Ename == "userName"){
                if (Evalue == ""){
                    var promptpoint = document.getElementById("chkOutPromptName");
                    promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;請填寫內容繼續完成註冊";
                }
            }
            
            //密碼輸入爲空時,提示
            if (Ename == "userPassword"){
                if (Evalue == ""){
                    var promptpoint = document.getElementById("chkOutPromptPassword");
                    promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;請填寫內容繼續完成註冊";
                }
            }
            
            //輸入密碼長度不夠8位時提示
            if (Evalue.length < 8){
                var promptpoint = document.getElementById("chkOutPromptPassword");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;建議密碼長度大於8位";
            }
        }
        
        // 再次準備填寫時,去掉提示
        function clearPrompt(Ename){
            if (Ename == "userName"){
                var promptpoint = document.getElementById("chkOutPromptName");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            if (Ename == "userPassword"){
                var promptpoint = document.getElementById("chkOutPromptPassword");
                promptpoint.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            
        }
    </script>
</head>
<body style="margin:50px 150px;">
    <form name="registeredUser" method="get" action="./login.jsp">
        用戶名&nbsp;&nbsp;
        <input type="text" name="userName" value="" 
            onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/>
        &nbsp;&nbsp;<span id="chkOutPromptName"></span><p>
        密 碼&nbsp;&nbsp;
        <input type="password" name="userPassword" value="" 
            onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/>
        &nbsp;&nbsp;<span id="chkOutPromptPassword"></span><p>
    </form>
</body>
</html>


效果wKiom1lv_aGisjDfAAASW0339mE726.png



2.2.終止不合法的提交

  表單提交事件:submit。

<form onsubmit="return true;">
    ...;
</form>

只有返回了true時,才提交。

  須要在代碼中設定一個開關,設定一個變量,添加事件句柄onsubmit。

    <script type="text/javascript">
    
        var allowSubmit = false;
...

    </script>
</head>
<body style="margin:50px 150px;">
    <form name="registeredUser" method="get" action="./login.jsp" 
    onsubmit="return allowSubmit;">
...
        <input type="submit"/>
    </form>



3.dom操做節點


3.1.添加元素

  爲div添加font元素;關鍵是建立元素、追加元素。

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>DOM建立元素</title>
    <script type="text/javascript">
        function addElt(){
            //1.獲取對象div
            var thisDiv = document.getElementById("exa");
            
            //2.建立須要添加的節點
            var fontElt = document.createElement("font");
            fontElt.innerHTML = "添加的font屬性"
            fontElt.color = "#0303E2";
            fontElt.size = "36px";
            
            //3.把建立的節點追加到獲取的div對象
            thisDiv.appendChild(fontElt);
        }
    </script>
</head>
<body style="margin:50px 150px;">
    <input type="button" value="爲div元素添加樣式" onclick="addElt();" />
    
    <div id="exa">
    </div>
</body>
</html>





wKiom1khfj_zoa3cAABm6i-XhL0702.jpg

相關文章
相關標籤/搜索