首页 > 代码库 > JS实例（二）
JS实例（二）
一：注册页面
包括非空验证、邮箱验证、密码相等验证，在输入之前提示文字，获得焦点时文字清除颜色变化，输入正确显示正确图片，错误显示错误图片，所有验证通过才可提交，重置会重置回初始模样。
效果图如下：
CSS代码：
<style type="text/css">.d{ float:left; margin:auto;}.dw{ height:35px; margin:10px 0px 10px 400px;}.validateImg{ display:none;}</style>
HTML代码：
<form><div class="dw" id="d1"> <div class="d" style="width:80px;">用户名：</div> <div class="d" width="150"><input class="txt" type="text" name="t1" id="t1" style="color:#999" qubie="qb" value="用户名不能为空" onblur="ck1()" onfocus="qk1()" /></div> <div class="d" style="margin-left:5px;"><img class="validateImg" id="img1" src="images/1.png" width="17" height="18" /></div></div><div class="dw" id="d2"> <div class="d" style="width:80px;">密码：</div> <div class="d"><input name="txtPWD1" type="password" class="txt" id="t2" qubie="qb" onblur="ck2()" onfocus="qk2()"/></div> <div class="d" style="margin-left:5px;"><img class="validateImg" id="img2" src="images/1.png" width="17" height="18" /></div></div><div class="dw" id="d3"> <div class="d" style="width:80px;">确认密码：</div> <div class="d"><input name="txtPWD2" type="password" class="txt" id="t3" qubie="qb" onblur="ck3()" onfocus="qk3()" /></div> <div class="d" style="margin-left:5px;"><img class="validateImg" id="img3" src="images/1.png" width="17" height="18" /></div></div><div class="dw" id="d4"> <div class="d" style="width:80px;">邮箱：</div> <div class="d"><input name="txtEmail" type="text" class="txt" id="t4" style="color:#999" qubie="qb" value="邮箱不能为空" onblur="ck4()" onfocus="qk4()" /></div> <div class="d" style="margin-left:5px;"><img class="validateImg" id="img4" src="images/1.png" width="17" height="18" /></div></div><div class="dw" id="d4" > <input type="submit" name="btnOK" onclick="return check()" id="btnOK" value="注册" /> <input type="reset" name="btnReset" id="btnReset" value="重置" onclick="resetall()" /></div></form>
JS代码：
var m = new Array(); m[1] = false; m[2] = false; m[3] = false; m[4] = false; var u1 = document.getElementById("t1"); var u2 = document.getElementById("t2"); var u3 = document.getElementById("t3"); var u4 = document.getElementById("t4"); var imgs1 = document.getElementById("img1"); var imgs2 = document.getElementById("img2"); var imgs3 = document.getElementById("img3"); var imgs4 = document.getElementById("img4");//密码相等检查function checkeq(){ var v2 = trim(u2.value); var v3 = trim(u3.value); if((v2.length !=0)&&(v3.length !=0)) { imgs3.style.display = "block"; if(v2==v3) { imgs3.setAttribute("src","images/1.png"); return true; } imgs3.setAttribute("src","images/2.png"); return false; } }//邮箱格式验证function checkemail(){ var v4 = trim(u4.value); var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if(v4.match(reg) != null) { imgs4.setAttribute("src","images/1.png"); return true; } else { imgs4.setAttribute("src","images/2.png"); return false; }}//密码框失去焦点时检查function ck2(){ var v2 = trim(u2.value); imgs2.style.display = "block"; if(v2.length ==0) { imgs2.setAttribute("src","images/2.png"); } else { imgs2.setAttribute("src","images/1.png"); m[2] = checkeq(); }}//确认密码框失去焦点时检查function ck3(){ var v3 = trim(u3.value); imgs3.style.display = "block"; if(v3.length ==0) { imgs3.setAttribute("src","images/2.png"); } else { imgs3.setAttribute("src","images/1.png"); m[3] = checkeq(); }}//用户名文本框获得焦点时判断是否输入了值，没输入则清空原value，改变颜色function qk1(){ var qxb = u1.getAttribute("qubie"); var v1 = trim(u1.value); if((v1.length == 0)|(qxb.match("qb") != null)) { u1.value=""; u1.style.color="black"; u1.setAttribute("qubie","qq"); }}function qk2(){ u2.setAttribute("qubie","qq");}function qk3(){ u3.setAttribute("qubie","qq");}//邮箱文本框获得焦点时判断是否输入了值，没输入则清空原value，改变颜色function qk4(){ var qxb = u4.getAttribute("qubie"); var v4 = trim(u4.value); if((v4.length == 0)|(qxb.match("qb") != null)) { u4.value=""; u4.style.color="black"; u4.setAttribute("qubie","qq"); }}//用户名文本框失去焦点时检查function ck1(){ var v1 = trim(u1.value); var qxb = u1.getAttribute("qubie"); imgs1.style.display = "block"; if((v1.length ==0)|(qxb.match("qb") != null)) { u1.value="用户名不能为空"; u1.style.color="#999"; u1.setAttribute("qubie","qb"); imgs1.setAttribute("src","images/2.png"); } else { imgs1.setAttribute("src","images/1.png"); m[1] = true; }}//邮箱文本框失去焦点时检查function ck4(){ var v4 = trim(u4.value); var qxb = u4.getAttribute("qubie"); imgs4.style.display = "block"; if((v4.length ==0)|(qxb.match("qb") != null)) { u4.value="邮箱不能为空"; u4.style.color="#999"; u4.setAttribute("qubie","qb"); imgs4.setAttribute("src","images/2.png"); } else { m[4] = checkemail(); }}//总的验证函数，用在点击提交的时候，再调一遍各个验证，验证都通过才能提交function check(){ ck1(); ck2(); ck3(); ck4(); return m[1]&&m[2]&&m[3]&&m[4]; }//重置函数function resetall(){ u1.style.color="#999"; u1.setAttribute("qubie","qb"); imgs1.style.display = "none"; u2.setAttribute("qubie","qb"); imgs2.style.display = "none"; u3.setAttribute("qubie","qb"); imgs3.style.display = "none"; u4.style.color="#999"; u4.setAttribute("qubie","qb"); imgs4.style.display = "none";}
二：动态的挂事件，移除事件
CSS代码：
<style type="text/css">div{ height:30px; width:100px; border:solid #909 1px;}span{ float:left; margin:10px 10px 10px 0px; height:30px; border:solid #909 1px;}</style>
HTML代码：
<div id="dd">这是一个层</div><span onclick="add1()">点击挂上事件</span><span onclick="remove1()">点击移除事件</span>
JS代码：
function showdd(){ alert("被点中了");}function add1(){ var d = document.getElementById("dd"); d.onclick = function (){showdd()}; //匿名函数}function remove1(){ var d = document.getElementById("dd"); d.onclick = function (){}; //空匿名函数}
三：点击一个标签，下面的内容跟着变换，也可以修改成鼠标移到上面变换
效果图如下：第三个是一般新闻页面的效果，用这个可以做出来
CSS代码：
<style type="text/css">*{ margin:0px; padding:0px;}#head{ height:56px;}span{ float:left; margin:20px 10px 0px 10px; padding:10px; font-weight:bold; font-size:14px; color:white;}.nr{ height:400px; width:350px; display:none;}#nr1{ display:block;}</style>
HTML代码：
<div id="head"> <span style="background-color:#C0F;" onclick="changes(‘nr1‘)">点击紫色</span> <!--双引号内用单引号 --> <span style="background-color:#09C;" onclick="changes(‘nr2‘)">点击蓝色</span> <!--双引号内用单引号 --> <span style="background-color:#666;" onclick="changes(‘nr3‘)">点击灰色</span> <!--双引号内用单引号 --></div><div id="neirong"> <div class="nr" id="nr1" style="background-color:#C0F"></div> <div class="nr" id="nr2" style="background-color:#09C"></div> <div class="nr" id="nr3" style="background-color:#666"></div></div><div>会不会影响到我</div>
JS代码：
function changes(cl){ var a = document.getElementById("neirong"); var b = document.getElementById(cl); var as = a.getElementsByTagName("div"); for(var i=0;i<as.length;i++) { as[i].style.display="none"; } b.style.display="block";}
四：一个树状列表，点击图片显示出下一层的列表，再次点击关闭
效果图如下：
CSS代码：
<style type="text/css">*{ margin:0px; padding:0px; list-style-type:none;}.ceng11{ margin-left:10px; list-style-position:inside;}#ceng1{ margin-left:10px; margin-top:20px;}.ceng2{ margin:5px 0px 10px 60px; display:none;}.ceng2 li{ margin-top:5px; list-style-image:none;}</style>
HTML代码：
<ul id="ceng1"> <li class="ceng11" id="ceng111"><img src="images/down.png" onclick="dot(this)"/>淄博 <ul class="ceng2" id="ceng21"> <li>张店区</li> <li>周村区</li> <li>临淄区</li> </ul> </li> <li class="ceng11" id="ceng222"><img src="images/down.png" onclick="dot(this)"/>临沂 <ul class="ceng2" id="ceng22"> <li>平邑县</li> <li>沂水县</li> <li>河东区</li> </ul> </li> <li class="ceng11" id="ceng333"><img src="images/down.png" onclick="dot(this)"/>济南 <ul class="ceng2" id="ceng23"> <li>市中区</li> <li>历下区</li> <li>天桥区</li> </ul> </li> </ul>
JS代码：
function dot(mm){ var n = mm.parentNode.getElementsByTagName("ul"); if(n[0].style.display !="block") { mm.setAttribute("src","images/up.png"); n[0].style.display="block"; } else { mm.setAttribute("src","images/down.png"); n[0].style.display="none"; }}
JS实例（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。