學習《動力節點》
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 = " 請填寫內容繼續完成註冊"; } } //密碼輸入爲空時,提示 if (Ename == "userPassword"){ if (Evalue == ""){ var promptpoint = document.getElementById("chkOutPromptPassword"); promptpoint.innerHTML = " 請填寫內容繼續完成註冊"; } } //輸入密碼長度不夠8位時提示 if (Evalue.length < 8){ var promptpoint = document.getElementById("chkOutPromptPassword"); promptpoint.innerHTML = " 建議密碼長度大於8位"; } } // 再次準備填寫時,去掉提示 function clearPrompt(Ename){ if (Ename == "userName"){ var promptpoint = document.getElementById("chkOutPromptName"); promptpoint.innerHTML = " "; } if (Ename == "userPassword"){ var promptpoint = document.getElementById("chkOutPromptPassword"); promptpoint.innerHTML = " "; } } </script> </head> <body style="margin:50px 150px;"> <form name="registeredUser" method="get" action="./login.jsp"> 用戶名 <input type="text" name="userName" value="" onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/> <span id="chkOutPromptName"></span><p> 密 碼 <input type="password" name="userPassword" value="" onblur="chkNullText(this.value, this.name);" onfocus="clearPrompt(this.name);"/> <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>