JSの基本使用(2)——review
10380 ワード
1、
2、
3、
4、
5、
6、
<%@ 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>