JS的基本使用(2)
来源：互联网 发布：libevent源码下载 编辑：程序博客网 时间：2024/05/18 11:25
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>2、
<%@ 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>3、
<%@ 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>4、
<%@ 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>5、
<%@ 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>6、
<%@ 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>7、
<%@ 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>8、
<%@ 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>9、
<%@ 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>10、
<%@ 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>11、
<%@ 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>12、
<%@ 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>13、
<%@ 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>14、
<%@ 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>15、
<%@ 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>16、
<%@ 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>17、
<%@ 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>myjs.js
function $(id){return document.getElementById(id);}prototype.js的下载链接：http://download.csdn.net/detail/caihongshijie6/5106001
2 0
- JS的基本使用(2)
- JS的基本使用
- doT.js的基本使用
- PDF.JS的基本使用
- JS的基本使用(2)——review
- JS中cookie的基本使用
- android 注入js的基本使用
- JS中cookie的基本使用
- 第十一天，js的基本使用
- js使用基本技巧
- js基本使用
- Vue.js基本使用
- clipboard.js基本使用
- js的onsubmit和onreset的使用和基本操作
- js的基本语法与方法的使用
- 使用JS实现的顺序表的基本操作
- AjaxPro的基本使用(js调后台方法)
- Js数组的基本方法2
- poj2242
- 14年春面试前准备（一）
- Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
- java调用matlab所计算的结果怎么再回传给java程序
- 2013下半年信息系统项目管理师（高级）上午试题及答案－讲师团俊平
- JS的基本使用(2)
- javascript 一段小程序2
- ContentProvider的使用
- 利用EChart 画柱状图
- 程序员面试题精选100题(63)-数组中三个只出现一次的数字[算法]
- ibatis配置文件解析过程中对DTD的加载处理
- Codeforces Round #229 (Div. 2)
- bzoj1030 文本生成器
- Five in a Row, Again-记录状态的dfs+剪枝
