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"
οnclick="doAction('l1');">
选项一
</li>
<li style="background-color: #ff88ee;" id="l2"
οnclick="doAction('l2');">
选项二
</li>
<li style="background-color: #ff88ee;" id="l3"
οnclick="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 οnsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" οnblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input id="repwd" name="repwd" οnblur="check_repwd()"/>
<span id="repwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>身份证号码</td>
<td>
<input id="idcard" name="idcard" οnblur="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" οnclick="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" οnclick="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;"
οnchange="f5(this);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input type="button" value="click" οnclick="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;"
οnchange="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>
