Javascript(三)
来源：互联网 发布：图像分类算法 简单 编辑：程序博客网 时间：2024/06/05 23:53
☆ 1.三级动联
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>三级动联</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> function demo(){ //建立二维数组 var array=[ ["选择城市"], ["海淀区","丰台区","朝阳区","昌平区"], ["浦东区","浦西区","上海滩","江干区"], ["郑州市","开封市","洛阳市","许昌市","信阳市"] ]; //获取两个下拉框 var se1Node=document.getElementById("se1"); var se2Node=document.getElementById("se2"); //获取你选择的位置 var index=se1Node.selectedIndex; //去容器中查找相关的内容 var arr=array[index]; //完成清除 se2Node.length=1; //遍历容器 for(var x=0;x<arr.length;x++){ //创建option对象 var opNode=document.createElement("option"); opNode.innerHTML=arr[x]; //把创建的option添加到se2中 se2Node.appendChild(opNode); } } function demo2(){ var array=[ ["选择县市"], ["海淀一区","海淀二区","海淀三区","海淀四区"], ["丰台一区","丰台二区","丰台三区","丰台四区"], ["朝阳一区","朝阳二区","朝阳三区","朝阳四区","朝阳五区"], ["昌平一区","昌平二区","昌平三区","昌平四区"] ]; var array2=[ ["选择县市"], ["浦东一区","浦东二区","浦东三区","浦东四区"], ["浦西一区","浦西二区","浦西三区"], ["上海滩一","上海滩二","上海滩三","上海滩四"], ["江干一区","江干二区","江干三区"] ]; var array3=[ ["选择县市"], ["金水区","管城区","二七区","惠济区"], ["金明区","鼓楼区","丰和区"], ["栾川县","洛宁县","益阳县"], ["鄢陵县","常乐县","襄城县"], ["信阳1县","信阳2县","信阳3县"] ]; //获取三个下拉框 var se1Node=document.getElementById("se1"); var se2Node=document.getElementById("se2"); var se3Node=document.getElementById("se3"); //获取se1和se2下拉框选择的位置 var index1=se1Node.selectedIndex; var index2=se2Node.selectedIndex; se3Node.length=1; //判断下拉框1选择的位置 if(index1==1){//说明选择的北京市 //容器中找你选择的容器 var arr=array[index2]; //遍历容器 for(var a=0;a<arr.length;a++){ //创建option对象 var opNode=document.createElement("option"); opNode.innerHTML=arr[a]; se3Node.appendChild(opNode); } }else if(index1==2){ //容器中找你选择的容器 var arr2=array2[index2]; //遍历容器 for(var b=0;b<arr2.length;b++){ //创建option对象 var opNode2=document.createElement("option"); opNode2.innerHTML=arr2[b]; se3Node.appendChild(opNode2); } }else if(index1==3){ //容器中找你选择的容器 var arr3=array3[index2]; //遍历容器 for(var c=0;c<arr3.length;c++){ //创建option对象 var opNode3=document.createElement("option"); opNode3.innerHTML=arr3[c]; se3Node.appendChild(opNode3); } } } </script> </head> <body> <select onchange="demo();" id="se1"> <option>选择省市</option> <option>北京市</option> <option>上海市</option> <option>河南省</option> </select> <select id="se2" onchange="demo2();"> <option>选择城市</option> </select> <select id="se3"> <option>选择县市</option> </select> </body></html>☆ 2.创建表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>创建表格</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> table{ width:200px; height:200px; border:1px solid red; margin-bottom:10px; } table td{ border:1px solid green; } </style><script type="text/javascript"> function createTable(){ //获取文本框输入的行 var a=document.getElementsByName("userName")[0].value; //获取文本框中输入的列 var b=document.getElementsByName("userName2")[0].value; //创建表格 var tableNode=document.createElement("table"); //控制行 for(var x=1;x<=a;x++){ //创建行 var trNode=tableNode.insertRow(); //控制列 for(var y=1;y<=b;y++){ //创建列 var tdNode=trNode.insertCell(); } } //把创建的表格添加到div中 document.getElementsByTagName("div")[0].appendChild(tableNode); }</script> </head> <body> 请输入行<input type="text" name="userName" size="20"/> 请输入列<input type="text" name="userName2" size="20"/> <input type="button" name="but" value="创建表格" onclick="createTable();"/> <div></div> </body></html>☆ 3.闭合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>闭合</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> dl{ width:200px; height:16px; } dt,dd{ margin:0px; } .close{ /*隐藏列表*/ overflow:hidden; } </style> <script type="text/javascript"> var flag=true; function demo(){ //获取dl var dlNode=document.getElementsByTagName("dl")[0]; //显示 //dlNode.style.overflow="visible"; if(flag){ dlNode.style.overflow="visible"; flag=false; }else{ dlNode.style.overflow="hidden"; flag=true; } } </script> </head> <body> <dl class="close" onmouseover="demo();" > <dt >描述列表标题</dt> <dd>描述列表选项1</dd> <dd>描述列表选项2</dd> <dd>描述列表选项3</dd> <dd>描述列表选项4</dd> <dd>描述列表选项5</dd> </dl> </body></html>☆ 4.闭合完成手拉风琴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>闭合完成手拉风琴</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> dl{ height:16px; margin-bottom:100px; } dt,dd{ margin:0px; } .close{ overflow:hidden; } .open{ overflow:visible; } </style> <script type="text/javascript"> var flag=true; function demo(){ //获取dl var dlNode=document.getElementsByTagName("dl")[0]; if(flag){ dlNode.style.overflow="visible"; flag=false; }else{ dlNode.style.overflow="hidden"; flag=true; } } function demo2(dtNode){ //获取dl var dtNode=dtNode.parentNode; if(dtNode.className=="close"){ dtNode.className="open"; }else{ dtNode.className="close"; } } function demo3(dtNode){ //获取要操作的dl元素 var dlNode=dtNode.parentNode; //获取dl元素 var dlList=document.getElementsByTagName("dl"); //遍历容器 for(var x=0;x<dlList.length;x++){ //判断那一个是你选择的 if(dlNode==dlList[x]){ //判断你选择的这个dl 是显示还是隐藏 if(dlList[x].className=="close"){ dlList[x].className="open"; }else{ dlList[x].className="close"; } }else{//否则 其他的统统关闭 dlList[x].className="close"; } } } </script> </head> <body> <dl class="close"> <dt onmouseover="demo3(this);">描述列表标题1</dt> <dd>描述列表选项1_1</dd> <dd>描述列表选项1_2</dd> <dd>描述列表选项1_3</dd> <dd>描述列表选项1_4</dd> </dl> <dl class="close"> <dt onmouseover="demo3(this);">描述列表标题2</dt> <dd>描述列表选项2_1</dd> <dd>描述列表选项2_2</dd> <dd>描述列表选项2_3</dd> <dd>描述列表选项2_4</dd> </dl> <dl class="close"> <dt onmouseover="demo3(this);">描述列表标题3</dt> <dd>描述列表选项3_1</dd> <dd>描述列表选项3_2</dd> <dd>描述列表选项3_3</dd> <dd>描述列表选项3_4</dd> </dl> <dl class="close"> <dt onmouseover="demo3(this);">描述列表标题4</dt> <dd>描述列表选项4_1</dd> <dd>描述列表选项4_2</dd> <dd>描述列表选项4_3</dd> <dd>描述列表选项4_4</dd> </dl> </body></html>☆ 5.用正则表达式校验用户名和密码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>用正则表达式校验用户名和密码</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> //校验用户名 function demo(){ //获取文本框中输入的内容 var userName=document.getElementsByName("userName")[0].value; //获取id为s01的span标签 var s01Node=document.getElementById("s01"); //写一个正则表达式 var patrn=/^[a-zA-Z]{1,30}$/; //判断你输入的用户名规则是否和正则表达式的规则一致 if(patrn.test(userName)){ s01Node.innerHTML="用户名正确".fontcolor("green"); }else{ s01Node.innerHTML="用户名错误".fontcolor("green"); } } //校验密码 function demo2(){ //获取密码框输入的内容 var pwdNode=document.getElementsByName("pwd")[0].value; //获取id为s02的标签 var s02Node=document.getElementById("s02"); //写一个正则: var regex=/^(\w){6,20}$/; if(regex.test(pwdNode)){ s02Node.innerHTML="密码正确".fontcolor("green"); }else{ s02Node.innerHTML="密码错误".fontcolor("green"); } } </script> </head> <body> <form> <p> 用户名<input type="text" name="userName" size="20" onblur="demo();"/> <span style="color:red;">(*只能输入1-30个以字母开头的字串)</span> <span id="s01"></span> </p> <p> 密 码<input type="password" name="pwd" size="21" onblur="demo2();"/> <span style="color:red;">(*只能输入6-20个字母、数字、下划线)</span> <span id="s02"></span> </p></form> </body></html>☆ 6.验证码校验
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>验证码校验</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> /* function demo(){ var str=""; for(var x=1;x<=4;x++){ var s=Math.round(Math.random()*9); str+=s; } //把生成的验证码 添加到s01的span标签中 document.getElementById("s01").innerHTML=str.fontcolor("red"); } */ var str; function demo(){ str=""; var st="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789你好啊小明小强"; for(var x=1;x<=4;x++){ var index=Math.round(Math.random()*st.length); var s=st.charAt(index); str+=s; } document.getElementById("s01").innerHTML=str.fontcolor("red"); } function demo2(){ //获取d02span var s02Node=document.getElementById("s02"); //获取输入的验证码 var t01Node=document.getElementsByName("t01")[0].value; if(str==t01Node){ s02Node.innerHTML="验证码正确".fontcolor("green"); }else{ s02Node.innerHTML="验证码错误".fontcolor("green"); } } </script> </head> <body onload="demo();"> 验证码<input type="text" name="t01" size="10px" onblur="demo2();"/> <span id="s01"></span> <span onclick="demo();">看不清,换一张</span> <span id="s02"></span> </body></html>☆ 7.完成注册
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>完成注册</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> var flag;//用户名 var flag2;//密码 var flag3;//验证码 //校验用户名 function demo(){ flag=false; //获取文本框中输入的内容 var userName=document.getElementsByName("userName")[0].value; //获取id为s01的span标签 var s01Node=document.getElementById("s01"); //写一个正则表达式 var patrn=/^[a-zA-Z]{1,30}$/; //判断你输入的用户名规则是否和正则表达式的规则一致 if(patrn.test(userName)){ s01Node.innerHTML="用户名正确".fontcolor("green"); flag=true; }else{ s01Node.innerHTML="用户名错误".fontcolor("green"); flag=false; } return flag; } //校验密码 function demo2(){ flag2=false; //获取密码框输入的内容 var pwdNode=document.getElementsByName("pwd")[0].value; //获取id为s02的标签 var s02Node=document.getElementById("s02"); //写一个正则: var regex=/^(\w){6,20}$/; if(regex.test(pwdNode)){ s02Node.innerHTML="密码正确".fontcolor("green"); flag2=true; }else{ s02Node.innerHTML="密码错误".fontcolor("green"); flag2=false; } return flag2; } var str; function demo4(){ str=""; var st="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789你好啊小明小强"; for(var x=1;x<=4;x++){ var index=Math.round(Math.random()*st.length); var s=st.charAt(index); str+=s; } document.getElementById("s03").innerHTML=str.fontcolor("red"); } function demo3(){ flag3=false; //获取d02span var s02Node=document.getElementById("s04"); //获取输入的验证码 var t01Node=document.getElementsByName("t01")[0].value; if(str==t01Node){ s02Node.innerHTML="验证码正确".fontcolor("green"); flag3=true; }else{ s02Node.innerHTML="验证码错误".fontcolor("green"); flag3=false; } return flag3; } function demo5(){ if(flag&&flag2&&flag3){ return true; }else{ if(flag==true &&flag2==true && flag3==false){ alert("验证码错误"); }else if(flag==true && flag2==false && flag3==true){ alert("密码错误"); }else if(flag==false && flag2==true && flag3==true){ alert("用户名错误"); }//...此处省略 return false; } } </script> </head> <body onload="demo4();"> <form action="demo8_8.html" onsubmit="return demo5();"> <p> 用户名<input type="text" name="userName" size="20" onblur="demo();"/> <span style="color:red;">(*只能输入1-30个以字母开头的字串)</span> <span id="s01"></span> </p> <p> 密 码<input type="password" name="pwd" size="21" onblur="demo2();"/> <span style="color:red;">(*只能输入6-20个字母、数字、下划线)</span> <span id="s02"></span> </p> <p> 验证码<input type="text" name="t01" size="10px" onblur="demo3();"/> <span id="s03"></span> <span onclick="demo4();">看不清,换一张</span> <span id="s04"></span> </p> <p> <input type="submit" value="注册"/> <input type="reset" value="重写"/> </p> </form> </body></html>☆ 8.注册页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>注册页面</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> 欢迎你注册成功 </body></html> 0 0
- JavaScript(三)
- javascript(三)
- Javascript(三)
- javaScript(三)
- JavaScript<三>
- JavaScript(三)
- JavaScript学习（三）
- 三种JavaScript进度条
- 三 JavaScript程序构成
- JavaScript入门(三)
- 学习JavaScript(三)
- javascript基础实例教程(三)
- Javascript对象（三）
- JavaScript介绍（三）
- JavaScript操作XML(三)
- JavaScript操作XML(三)
- javascript(基础整理三)
- javascript 跳转 三种
- SAPUI5实现标准应用View替换的开发实践
- 2.Flume安装配置
- Java反射机制
- 移动端确定取消弹窗
- SVD奇异值分解详解
- Javascript(三)
- 最小生成树(Minimum Spanning Tree)
- java\oracle日期格式操作
- 为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js
- 04 Support Vector Machines
- 百度地图
- 答案已在心中
- 变量、常量
- php调整图像大小
