JS的基本使用(2)——review

浏览数：20 / 时间：2015年06月09日

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 ulObj = document.getElementById(‘u1‘);
		var arr = ulObj.getElementsByTagName(‘li‘);
		
		for(var i = 0 ; i < arr.length ; ++i){
		   arr[i].style.backgroundColor = ‘#ff88ee‘;
		}
		
		var obj = document.getElementById(id);
		obj.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、

<span style="font-size:18px;"><%@ 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">

function check_username(){
   var usernameObj = $(‘username‘);
   var usernameMsgObj = $(‘username_msg‘);
   
   usernameObj.className = ‘‘;
   usernameMsgObj.innerHTML = ‘‘;
   
   if($F(‘username‘).strip().length == 0 ){
      usernameObj.className = ‘s2‘;
      usernameMsgObj.innerHTML = ‘用户名不能为空‘;
      
      return false;
   }
   
   return true;
}

function check_pwd(){
   var pwdObj = $(‘pwd‘);
   var pwdMsgObj = $(‘pwd_msg‘);
   
   pwdObj.className = ‘‘;
   pwdMsgObj.innerHTML = ‘‘;
   
   var reg = /^\d{6}$/;
   if(!reg.test($F(‘pwd‘))){
      pwdObj.className = ‘s2‘;
      pwdMsgObj.innerHTML = ‘密码必须是6位数字‘;
      
      return false;
   }
   
   return true;
}


function check_repwd(){
    var repwdObj = $(‘repwd‘);
    var repwdMsgObj = $(‘repwd_msg‘);
    
    repwdObj.className = ‘‘;
    repwdMsgObj.innerHTML = ‘‘;
    
    if($F(‘pwd‘) != $F(‘repwd‘)){
       repwdObj.className = ‘s2‘;
       repwdMsgObj.innerHTML = ‘两次输入的密码必须一致‘;
       
       return false;
    }
    
    return true;
}

function check_idcard(){
   var idcardObj = $(‘idcard‘);
   var idcardMsgObj = $(‘idcard_msg‘);
   
   idcardObj.className = ‘‘;
   idcardMsgObj.innerHTML = ‘‘;
   
   var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;
   if(!reg.test($F(‘idcard‘))){
   		idcardObj.className = ‘s2‘;
   		idcardMsgObj.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></span>

3、

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


<html>
 <head>
   <script type="text/javascript">
    function f3(){
     var buttonObj = document.getElementById(‘b1‘);
     var divObj = document.createElement(‘div‘);
     divObj.innerHTML = ‘我喜欢章泽天‘;
     
     buttonObj.appendChild(divObj);
     
    }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<input id="bu1" type="button" value="Click" onclick="f3()"/>
  </body>
</html>

4、

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


<html>
 <head>
   <script type="text/javascript">
    function f4(){
       var bodyObj = document.getElementById(‘b1‘);
       var buttonObj = document.getElementById(‘bu1‘);
       var divObj = document.createElement(‘div‘);
       divObj.innerHTML = ‘章泽天喜欢我‘;
       
       bodyObj.insertBefore(divObj,buttonObj);
       
    }
   </script>
 </head>
 
  <body style="font-size: 30px;" id="b1">
  	<input id="bu1" type="button" value="Click" onclick="f4()"/>
  </body>
</html>

5、

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

<html>
   <head>
     <script src="prototype-1.6.0.3.js"></script>
     <script type="text/javascript">
      
      function f5(obj){
         alert( ‘选择的是: ‘ + obj.selectedIndex);
         alert(‘包含的选项数是: ‘ + obj.length);
         
         var arr = obj.options;
         for(var i = 0 ; i < arr.length ; ++i){
         	alert(arr[i].text + ‘ : ‘ + arr[i].value);
         }
      }
      
      function f6(){
      	var op = new Option(‘北京‘,‘bj‘);
      	$(‘city‘).options[$(‘city‘).length] = op;
      }
      
     </script>
   </head>

   <body style="font-size: 30px">
      <select id="city" name="city"
       style="width: 120px;"
       onchange="f5(this);"
       >
         <option value="cd">成都</option>
         <option value="qd">青岛</option>
         <option value="xm">厦门</option>
      </select>
      
      <input type="button" value="click" onclick="f6()"/>
   </body>
</html></span>

6、

<%@ 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">
	function f6(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(‘美学‘,‘c3‘)];
		
		$(‘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="f6(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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS的基本使用(2)——review