JS的基本使用(2)——review
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>
<%@ 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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。