DOM練習1
阿新 • • 發佈：2018-02-19
圖片 cef one solid sub fse content box erb 
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .div1{註冊按鈕8 width: 600px; 9 height:371px; 10 background-color: lightgray; 11 } 12 </style> 13 <script type="text/javascript"> 14 window.onload=function(){ 15 var remainTime = 10 16 var registerBtn = document.getElementById("registerBtn");17 var intervalId = setInterval(function(){ 18 remainTime--; 19 if(remainTime>0) 20 { 21 registerBtn.value="請先閱讀服務條款"+"("+remainTime+")"; 22 } 23 else 24 { 25 clearInterval(intervalId);26 registerBtn.disabled=false; 27 registerBtn.value="註冊"; 28 } 29 },1000) 30 } 31 </script> 32 </head> 33 <body> 34 <div class="div1">服務條款。。。</div> 35 <br/> 36 <input id="registerBtn" type="submit" value="請先閱讀服務條款(10)" disabled="disabled"/> 37 </body> 38 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #table td{ 8 width:40px; 9 height:19px; 10 background-color: #F3F3F3; 11 boder:1px solid #D0D0D0; 12 color:#BBBBBB; 13 line-height: 9px;; 14 } 15 </style> 16 17 18 19 </head> 20 <body> 21 <form> 22 <label for="password">密碼：</label> 23 <input id="password" type="password" name="password"/> 24 <table id="table" border="0" cellpadding="0" cellspacing="0" style="display:inline-table"> 25 <tr align="center"> 26 <td id="td1">弱</td> 27 <td id="td2">中</td> 28 <td id="td3">強</td> 29 </tr> 30 </table> 31 </form> 32 </body> 33 </html> 34 <script type="text/javascript"> 35 36 function checkPassword(value){ 37 if(!value){ 38 return 1; 39 } 40 if(value.length<6) 41 { 42 return 1; 43 } 44 if(value.length>=8 && value.match(/[0-9]/)&&value.match(/[a-z]/)) 45 { 46 return 3; 47 } 48 return 2; 49 } 50 setInterval(function(){ 51 var passwordElement = document.getElementById("password"); 52 var passwordLevel = checkPassword(passwordElement.value); 53 switch (passwordLevel) 54 { 55 case 1:document.getElementById("td1").style.backgroundColor="#ff8040"; 56 document.getElementById("td2").style.backgroundColor=null; 57 document.getElementById("td3").style.backgroundColor=null; 58 break; 59 case 2:document.getElementById("td1").style.backgroundColor=null; 60 document.getElementById("td2").style.backgroundColor="#ffff6f"; 61 document.getElementById("td3").style.backgroundColor=null; 62 break; 63 case 3:document.getElementById("td1").style.backgroundColor=null; 64 document.getElementById("td2").style.backgroundColor=null; 65 document.getElementById("td3").style.backgroundColor="#ffff6f"; 66 break; 67 } 68 },1000) 69 </script>密碼強度檢測
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 7 8 9 </head> 10 <body> 11 <button id="btn">關燈</button> 12 <div style="width:600px;height:371px;background-color: lightgray">模擬網頁視頻播放器。。。</div> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 var body = document.body; 17 var btn = document.getElementById("btn"); 18 btn.onclick=function(){ 19 if(this.innerHTML == "關燈"){ 20 body.style.backgroundColor="black"; 21 this.innerHTML="開燈"; 22 }else{ 23 body.style.backgroundColor=null; 24 this.innerHTML="關燈"; 25 } 26 } 27 </script>模擬網頁開關燈
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var imgBug = document.getElementById("imgBug"); 9 imgBug.style.position="absolute"; 10 document.onmousemove = function(){ 11 var x = event.clientX; 12 var y = event.clientY; 13 14 imgBug.style.left=x-imgBug.offsetWidth+"px"; 15 imgBug.style.top=y+"px"; 16 } 17 } 18 </script> 19 20 21 </head> 22 <body> 23 <img id="imgBug" src="跟屁蟲.png" alt="跟屁蟲"/> 24 </body> 25 </html>跟屁蟲
1 <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px"> 2 <tr><td class="firstTd"></td><td>收件人</td><td>主題</td></tr> 3 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 4 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 5 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 6 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 7 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 8 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 9 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 10 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 11 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 12 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 13 </table>鼠標經過單元格變色
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .gray-text{ 8 color:gray; 9 } 10 </style> 11 <script type="text/javascript"> 12 13 window.onload = function(){ 14 var accountElement = document.getElementById("account"); 15 accountElement.onfocus = function(){ 16 if(this.className=="gray-text") 17 { 18 this.value=""; 19 this.className=null; 20 } 21 } 22 accountElement.onblur=function(){ 23 if(!this.value) 24 { 25 this.value="請使用郵箱註冊"; 26 this.className="gray-text"; 27 } 28 } 29 } 30 31 </script> 32 33 34 </head> 35 <body> 36 賬號：<input id="account" class="gray-text" type="text" value="請使用郵箱註冊"/> 37 </body> 38 </html>焦點事件
DOM練習1