JS 의 기본 사용 (2)

29368 단어
1、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<head>
	<style>
ul {
	list-style-type: none;
}

ul li {
	float: left;
	width: 120px;
	height: 40px;
	border: 1px solid black;
	margin-left: 20px;
	text-align: center;
	cursor: pointer;
}
</style>
	<script type="text/javascript">
	/*
                  ,         。
         :
                        ,
                      
	*/
	 function doAction(id){
	    var obj = document.getElementById('u1');
	    var arr = obj.getElementsByTagName('li');
	    
	    for(var i = 0 ; i < arr.length ; ++i){
	    	arr[i].style.backgroundColor='#ff88ee';//style.backgroundColor       
	    }
	    
	    var obj1 = document.getElementById(id);
	    obj1.style.backgroundColor='red';
	 }
	
	</script>
</head>
<body style="font-size: 30px;">
	<ul id="u1">
		<!--     -->
		<li style="background-color: #ff88ee;" id="l1"
			onclick="doAction('l1');">
			   
		</li>
		<li style="background-color: #ff88ee;" id="l2"
			onclick="doAction('l2');">
			   
		</li>
		<li style="background-color: #ff88ee;" id="l3"
			onclick="doAction('l3');">
			   
		</li>
	</ul>
</body>
</html>

2、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <style type="text/css">
       #d1{
          width: 400px;
          height: 250px;
          background-color: #FFE4B5;
          margin: 40px auto;
       }
     
       #d1_head{
          color: white;
          font-size: 20px;
          font-family: "Arial";
          height: 24px;
          background-color: blue;
       }
       
       #d1_content{
       	  padding-left: 30px;
       	  padding-top: 30px;
       }
       
       .s1{
       	  color: red;
       	  font-style: italic;	
       }
       
       .s2{
       	  border: 2px dotted blue;	
       }
    </style>
    
    <script type="text/javascript">
    /*
                          
    */
      function check_username(){
         var usernameObj = document.getElementById('username');
         var usernameMsgObj = document.getElementById('username_msg');
         
         usernameObj.className = '';//                        .           
         usernameMsgObj.innerHTML = '';
         
         if(usernameObj.value.length == 0){
           usernameMsgObj.innerHTML = '       ';
           usernameObj.className = 's2';
         }
      }
    </script>
    
  </head>

<body>
	<div id="d1">
		<div id="d1_head">  </div>
		
		<div id="d1_content">
			<form>
				<table>
					<tr>
						<td>   </td>
						<td>
							<input id="username" name="username" onblur="check_username()"/>
						    <span id="username_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td>  </td>
						<td>
							<input id="pwd" name="pwd" />
						    <span id="pwd_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<input type="submit" value="  "/>
							<input type="reset" value="  "/>
						</td>
					</tr>
				</table>
			</form>
		</div>  
	</div>
</body>
</html>

3、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <style type="text/css">
       #d1{
          width: 400px;
          height: 250px;
          background-color: #FFE4B5;
          margin: 40px auto;
       }
     
       #d1_head{
          color: white;
          font-size: 20px;
          font-family: "Arial";
          height: 24px;
          background-color: blue;
       }
       
       #d1_content{
       	  padding-left: 30px;
       	  padding-top: 30px;
       }
       
       .s1{
       	  color: red;
       	  font-style: italic;	
       }
       
       .s2{
       	  border: 2px dotted blue;	
       }
    </style>
    
    <script type="text/javascript">
    /*
                             (          )
    */
      function check_username(){
         var usernameObj = document.getElementById('username');
         var usernameMsgObj = document.getElementById('username_msg');
         
         usernameObj.className = '';//                        .           
         usernameMsgObj.innerHTML = '';
         
         if(usernameObj.value.length == 0){
           usernameMsgObj.innerHTML = '       ';
           usernameObj.className = 's2';
           
           return false;
         }
         
         return true;
      }
      
      function check_form(){
         var flag = check_username();
         return flag;
      }
    </script>
    
  </head>

<body>
	<div id="d1">
		<div id="d1_head">  </div>
		
		<div id="d1_content">
			<form onsubmit="return check_form()">
				<table>
					<tr>
						<td>   </td>
						<td>
							<input id="username" name="username" onblur="check_username()"/>
						    <span id="username_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td>  </td>
						<td>
							<input id="pwd" name="pwd" />
						    <span id="pwd_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<input type="submit" value="  "/>
							<input type="reset" value="  "/>
						</td>
					</tr>
				</table>
			</form>
		</div>  
	</div>
</body>
</html>

4、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <style type="text/css">
       #d1{
          width: 400px;
          height: 250px;
          background-color: #FFE4B5;
          margin: 40px auto;
       }
     
       #d1_head{
          color: white;
          font-size: 20px;
          font-family: "Arial";
          height: 24px;
          background-color: blue;
       }
       
       #d1_content{
       	  padding-left: 30px;
       	  padding-top: 30px;
       }
       
       .s1{
       	  color: red;
       	  font-style: italic;	
       }
       
       .s2{
       	  border: 2px dotted blue;	
       }
    </style>
    
    <script type="text/javascript">
    /*
                             (          )
    */
      function check_username(){
         var usernameObj = document.getElementById('username');
         var usernameMsgObj = document.getElementById('username_msg');
         
         usernameObj.className = '';//                        .           
         usernameMsgObj.innerHTML = '';
         
         if(usernameObj.value.length == 0){
           usernameMsgObj.innerHTML = '       ';
           usernameObj.className = 's2';
           
           return false;
         }
         
         return true;
      }
      
      /*
            JS    
      */
      function check_pwd(){
      	 var pwdObj = document.getElementById('pwd');
      	 var pwdMsgObj = document.getElementById('pwd_msg');
      	 
      	 pwdObj.className = '';
      	 pwdMsgObj.innerHTML = '';
      	 
      	 var reg = /^\d{6}$/
      	 if(!reg.test(pwdObj.value)){
      	 	pwdObj.className = 's2';
      	 	pwdMsgObj.innerHTML = '     6   ';
      	 	
      	 	return false;
      	 }
      	 
      	 return true;
      }
      
      function check_form(){
         var flag = check_username() && check_pwd();
         return flag;
      }
    </script>
    
  </head>

<body>
	<div id="d1">
		<div id="d1_head">  </div>
		
		<div id="d1_content">
			<form onsubmit="return check_form()">
				<table>
					<tr>
						<td>   </td>
						<td>
							<input id="username" name="username" onblur="check_username()"/>
						    <span id="username_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td>  </td>
						<td>
							<input id="pwd" name="pwd" onblur="check_pwd()"/>
						    <span id="pwd_msg" class="s1"></span>
						</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<input type="submit" value="  "/>
							<input type="reset" value="  "/>
						</td>
					</tr>
				</table>
			</form>
		</div>  
	</div>
</body>
</html>

5、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
   <script type="text/javascript">
   /*
            (1)
   */
     function f5(){
       var obj = document.createElement('div');
       obj.innerHTML = 'I love    ';
       
       var buttonObj = document.getElementById('bu1');
       buttonObj.appendChild(obj);
       
       
     }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<input id="bu1" type="button" value="Click" onclick="f5()"/>
  </body>
</html>

6、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
 <style type="text/css">
  .tips{
  	width:200px;
  	height: 80px;
  	background-color: red;
  }
 </style>
 
   <script type="text/javascript">
   /*
            (2)
   */
     function f6(){
       var divObj = document.createElement('div');
       divObj.className='tips';
       divObj.innerHTML='    LOVE ME';
       
       var bodyObj = document.getElementById('b1');
       var buttonObj = document.getElementById('bu1');
       
       bodyObj.insertBefore(divObj,buttonObj);
     }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<input id="bu1" type="button" value="Click" onclick="f6()"/>
  </body>
</html>

7、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
 <style type="text/css">
  .tips{
  	width:200px;
  	height: 80px;
  	background-color: red;
  }
 </style>
 
 
 <script src="myjs.js"></script>
   <script type="text/javascript">
   /*
        JS
   */
     function f6(){
       var divObj = document.createElement('div');
       divObj.className='tips';
       divObj.innerHTML='    LOVE ME';
       
       var bodyObj = $('b1');
       var buttonObj = $('bu1');
       
       bodyObj.insertBefore(divObj,buttonObj);
     }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<input id="bu1" type="button" value="Click" onclick="f6()"/>
  </body>
</html>

8、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <style type="text/css">
       #d1{
          width: 400px;
          height: 250px;
          background-color: #FFE4B5;
          margin: 40px auto;
       }
     
       #d1_head{
          color: white;
          font-size: 20px;
          font-family: "Arial";
          height: 24px;
          background-color: blue;
       }
       
       #d1_content{
       	  padding-left: 30px;
       	  padding-top: 30px;
       }
       
       .s1{
       	  color: red;
       	  font-style: italic;	
       }
       
       .s2{
       	  border: 2px dotted blue;	
       }
    </style>
    
    <script src="prototype-1.6.0.3.js"></script>
    
    <script type="text/javascript">
    /*
                          (  prototype  )
    */
      function check_username(){
         var usernameObj = $('username');
         var usernameMsgObj = $('username_msg');
         
         usernameObj.className = '';
         usernameMsgObj.innerHTML = '';
         
         if($F('username').strip().length == 0){
            usernameMsgObj.innerHTML = '       ';
            usernameObj.className = 's2';
         }
      }
    </script>
    
  </head>

<body>
	<div id="d1">
		<div id="d1_head">  </div>
		
		<div id="d1_content">
			<form>
				<table>
					<tr>
						<td>   </td>
						<td>
							<input id="username" name="username" onblur="check_username()"/>
						    <span id="username_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td>  </td>
						<td>
							<input id="pwd" name="pwd" />
						    <span id="pwd_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<input type="submit" value="  "/>
							<input type="reset" value="  "/>
						</td>
					</tr>
				</table>
			</form>
		</div>  
	</div>
</body>
</html>

9、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
   <script type="text/javascript">
   /*
            :  
   */
     function f9(){
     	var aObj = document.getElementById('a1');
     	var divObj = document.createElement('div');
     	divObj.innerHTML='         ';
     	
     	aObj.appendChild(divObj);
     }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<a href="javascript:;" onclick="f9()" id="a1">      </a>
  </body>
</html>

10、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <style type="text/css">
       #d1{
          width: 400px;
          height: 250px;
          background-color: #FFE4B5;
          margin: 40px auto;
       }
     
       #d1_head{
          color: white;
          font-size: 20px;
          font-family: "Arial";
          height: 24px;
          background-color: blue;
       }
       
       #d1_content{
       	  padding-left: 30px;
       	  padding-top: 30px;
       }
       
       .s1{
       	  color: red;
       	  font-style: italic;	
       }
       
       .s2{
       	  border: 2px dotted blue;	
       }
    </style>
    
    <script src="prototype-1.6.0.3.js"></script>
    <script type="text/javascript">
    /*
        :   prototype      
    */
    
    /*
                             (          )
    */
      function check_username(){
         var usernameObj = document.getElementById('username');
         var usernameMsgObj = document.getElementById('username_msg');
         
         usernameObj.className = '';//                        .           
         usernameMsgObj.innerHTML = '';
         
         if(usernameObj.value.length == 0){
           usernameMsgObj.innerHTML = '       ';
           usernameObj.className = 's2';
           
           return false;
         }
         
         return true;
      }
      
      /*
            JS    
      */
      function check_pwd(){
      	 var pwdObj = document.getElementById('pwd');
      	 var pwdMsgObj = document.getElementById('pwd_msg');
      	 
      	 pwdObj.className = '';
      	 pwdMsgObj.innerHTML = '';
      	 
      	 var reg = /^\d{6}$/
      	 if(!reg.test(pwdObj.value)){
      	 	pwdObj.className = 's2';
      	 	pwdMsgObj.innerHTML = '     6   ';
      	 	
      	 	return false;
      	 }
      	 
      	 return true;
      }
      
      function check_repwd(){
         $('repwd').className = '';
         $('repwd_msg').innerHTML = '';
         
         if(!($F('pwd') == $F('repwd'))){
           $('repwd').className = 's2';
           $('repwd_msg').innerHTML = '       ';
           
           return false;
         }
         
         return true;
      }
      
      function check_idcard(){
        $('idcard').className = '';
        $('idcard_msg').innerHTML = '';
         
      	var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;
      	
      	if(!reg.test($F('idcard'))){
      	   $('idcard').className = 's2';
      	   $('idcard_msg').innerHTML = '         ';
      	   
      	   return false;
      	}
      	return true;
      }
      
      function check_form(){
         var flag = check_username() && check_pwd() && check_repwd() && check_idcard();
         return flag;
      }
    </script>
    
  </head>

<body>
	<div id="d1">
		<div id="d1_head">  </div>
		
		<div id="d1_content">
			<form onsubmit="return check_form()">
				<table>
					<tr>
						<td>   </td>
						<td>
							<input id="username" name="username" onblur="check_username()"/>
						    <span id="username_msg" class="s1" ></span>
						</td>
					</tr>
					
					<tr>
						<td>  </td>
						<td>
							<input id="pwd" name="pwd" onblur="check_pwd()"/>
						    <span id="pwd_msg" class="s1"></span>
						</td>
					</tr>
					
					<tr>
						<td>    </td>
						<td>
							<input id="repwd" name="repwd" onblur="check_repwd()"/>
						    <span id="repwd_msg" class="s1"></span>
						</td>
					</tr>
					
					<tr>
						<td>     </td>
						<td>
							<input id="idcard" name="idcard" onblur="check_idcard()"/>
						    <span id="idcard_msg" class="s1"></span>
						</td>
					</tr>
					
					
					<tr>
						<td colspan="2">
							<input type="submit" value="  "/>
							<input type="reset" value="  "/>
						</td>
					</tr>
				</table>
			</form>
		</div>  
	</div>
</body>
</html>

11、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom   select     
     */
       function f11(){
         alert($('city').selectedIndex);//     Index, 0  
       }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange="f11();"
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
   </body>
</html>

12、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom   this   
     */
       function f12(obj){
         alert(obj.selectedIndex);//     Index, 0  
       }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange="f12(this);"
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
   </body>
</html>

13、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom   this   , f12   
     */
       function f13(obj){
         alert(obj);//     Index, 0  
       }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange="f13(this.selectedIndex);"
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
   </body>
</html>

14、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom   select   length     
     */
      function f14(){
        alert($('city').length);//$('city').length        
      }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange=""
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
      
      <input onclick="f14()" value="click me" type="button"/>
   </body>
</html>

15、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom   select   options     
     */
      function f15(){
        var arr = $('city').options;//  select     options  
        for(var i = 0 ; i < arr.length ; ++i){
          alert(arr[i].text + ' : ' + arr[i].value);//text:          ; value:           
        }
      }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange=""
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
      
      <input onclick="f15()" value="click me" type="button"/>
   </body>
</html>

16、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
     /*
     html dom     option  
       length        option     (  )
     */
      function f16(){
        var op = new Option('  ','dl');
        $('city').options[$('city').length] = op;
      }
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange=""
       >
         <option value="cd">  </option>
         <option value="qd">  </option>
         <option value="xm">  </option>
      </select>
      
      <input onclick="f16()" value="click me" type="button"/>
   </body>
</html>

17、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
	<head>
		<style>
#d1 {
	width: 450px;
	height: 120px;
	background-color: #dddddd;
	margin: 40px auto;
}

#d1_head {
	height: 30px;
	font-size: 24px;
	color: white;
	background-color: blue;
}

#d1_content {
	padding-left: 30px;
}
</style>

   <script src="prototype-1.6.0.3.js"></script>
	<script type="text/javascript">
	/*
	  prototype         .
             ,         :
      ,         ,         
      ,               
	*/
	function f17(index){
	  var arr = new Array();
	  arr[0] = [new Option('    ','-1')];
	  
	  arr[1] = [new Option('    ','e1'),new Option('    ','e2')];
	  
	  arr[2] = [new Option('    ','c1'),new Option('   ','c2'),new Option('   ','c2')];
	  
	  $('s2').innerHTML = '';
	  for(var i = 0 ; i < arr[index].length ; ++i){
	     $('s2').options[i] = arr[index][i]; 
	  }
	  
	}
	</script>
	</head>
	
	
	<body style="font-size: 30px;">
		<div id="d1">
			<div id="d1_head">
				    
			</div>
			<div id="d1_content">
				<form>
					<select name="s1" id="s1" style="width: 120px;"
						onchange="f17(this.selectedIndex);">
						<option value="-1">
							--  --
						</option>
						<option value="english">
							  
						</option>
						<option value="computer">
							   
						</option>
					</select>
					<select name="s2" id="s2" style="width: 120px;">
						<option value="-1">
							--    --
						</option>
					</select>
					<input type="submit" value="  " />
				</form>
			</div>
		</div>
	</body>

</html>

myjs.js
function $(id){
	return document.getElementById(id);
}

prototype. js 다운로드 링크:http://download.csdn.net/detail/caihongshijie6/5106001

좋은 웹페이지 즐겨찾기