JavaScript⑵（小實例）

時間 2020-07-29

原文原文鏈接

學習《動力節點》
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>

效果

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。