JSの基本使用(2)
29225 ワード
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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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><%@ 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>function $(id){
return document.getElementById(id);
}