JS实例（二）

浏览数：25 / 时间：2015年06月09日

一：注册页面

包括非空验证、邮箱验证、密码相等验证，在输入之前提示文字，获得焦点时文字清除颜色变化，输入正确显示正确图片，错误显示错误图片，所有验证通过才可提交，重置会重置回初始模样。

效果图如下：

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";
    }
}