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";
    }
}
时间： 2024-10-13 18:59:40

JS实例（二）的相关文章

JS的二维数组

今天,记录一下JS的二位数组,并附上例题. 一.二维数组的本质:数组中的元素又是数组. 其实,我们都见过这样的二维数组,只不过没在意罢了,例如: var arr = [[1,2,4,6],[2,4,7,8],[8,9,10,11],[9,12,13,15]] //这就是一个二位数组arr[2][3]; // 11 注意:表示第三列第4行所在的元素.角标从0开始 二.下面介绍二维数组的初始化 记住了二维数组的本质,初始化也难不倒我们了.看一下实例 实例一: var arr = [[1,2],[a,

DWR入门实例(二)

DWR(Direct Web Remoting) DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible. Dwr能让在服务器端的java代码和浏览器客户端的javascript代码尽可能简单的相互调用. DWR is Easy Ajax for Java!  官网:http://d

js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字

效果: 当鼠标不在自动登录上时,只显示自动登录这个表单,下面的div提示则隐藏. 当鼠标移动到自动登录这个表单时,则显示下面的div提示,当鼠标移出时再将其隐藏 代码实现与原理: HTML代码: <body> <input type="checkbox" />自动登录 <div id="div1">不要再玩游戏啦!!!</div> </body> CSS代码:给id为div1的元素做一下修饰,并且将其最开始

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法 在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保存任何类型的数据:js数组的大小是可以动态调整的 */ var colors = ["red", "blue", "green"];

子窗口调用父页面js实例

父页面代码: <%@ page contentType="text/html; charset=GBK"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>new_page_title</title> <script type="

tytabs.jquery.min.js实例，渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

JS学习二

函数作用域和声明提前 var scope = 'global'; function f() { console.info(scope);   //输出undefined var scope = 'local'; console.info(scope);  //输出 local } 上述代码等价于 function f() { var scope; console.info(scope); scope = 'local'; console.info(scope); } 将函数内的变量声明"提前&q

mongo shell启动配置文件.mongorc.js（二）

mongo shell启动配置文件.mongorc.js(二) 如果你的主目录下有个.mongorc.js文件,那么当你启动shell时他就会自动运行.使用它可以初始化任何你经常使用的helper方法和你不想意外操作的删除方法. 比如,你不想使用默认的dropDatabase()方法了,你可以在.mongorc.js文件中添加下面的命令: DB.prototype.dropDatabase = function() {        print("No dropping DBs!");

玩转Node.js（二）

玩转Node.js(二) 先来回顾上次的内容,上一次我们使用介绍了Node.js并写了第一个服务器端的Hello World程序,在这个Hello World程序中,请求自带的http模块并将其赋给http变量,然后调用http模块的createServer函数,这个函数会返回一个对象,这个对象有一个叫做listen的方法,而这个方法有一个数值参数,指定这个HTTP服务器监听的端口号,我们当时定义的是8888端口号.那么为什么看起来有些复杂呢?那是因为我们向createServer函数传递了一个

js之二维数组定义和初始化三种方法

方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array();   //先声明一维 for(var k=0;k<i;k++){        //一维长度为i,i为变量,可以根据实际情况改变