DOM编程示例（二）

promiseend

于 2017-12-25 21:03:56 发布

阅读量302

点赞数

分类专栏： java 文章标签： dom

本文链接：https://blog.csdn.net/promiseend/article/details/78896883

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

邮件相关操作

<!DOCTYPE html>
<html>
  <head>
    <title>mail.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    <link rel="stylesheet" href="table.css" type="text/css"/>
    <style type="text/css" media="screen">
        /*@import url(table.css);*/
        .one{
            background-color: #9bf7d5;
        }
        .two{
            background-color: #f3e99a;
        }
        .over{
            background-color: #ef7125;
        }
    </style>
    <script type="text/javascript" charset="utf-8">

        var name;
        //行颜色间隔显示功能
        function trColor(){
            //1.获取表格对象
            var oTabNode=document.getElementById("mailtable");

            //2.获取行对象
            var collTrNodes=oTabNode.rows;

            //3.对所有需要设置背景的行对象进行遍历
            for(var x=1;x<collTrNodes.length-1;x++){
                if(x%2==1){
                    collTrNodes[x].className="one";
                }else{
                    collTrNodes[x].className="two";
                }
                collTrNodes[x].onmouseover=function(){
                    name=this.className;
                    this.className="over";
                };
                collTrNodes[x].onmouseout=function(){
                    this.className=name;
                };
            }

        }
        表格加载完运行
        onload=function(){
            trColor();
        };

        //对于复选框的全选动作
        function checkAll(node){
            //获取所有的mail复选框
            var collMailNodes=document.getElementsByName("mail");
            for(var x=0;x<collMailNodes.length;x++){
                collMailNodes[x].checked=node.checked;
            }
        }

        //定义操作复选框按钮的方法
        function checkAllByBut(num){
            var collMailNodes=document.getElementsByName("mail");
            for(var x=0;x<collMailNodes.length;x++){

                if(num>1)
                    collMailNodes[x].checked=!collMailNodes[x].checked;
                else
                    collMailNodes[x].checked=num;
            }

        }

        //删除所选邮件
        function deletMail(){

            if(!confirm("真的要删除所选邮件吗？")){
                return;
            }
            //获取所有mail节点
            var collMailNodes=document.getElementsByName("mail");
            for(var x=0;x<collMailNodes.length;x++){

                if(collMailNodes[x].checked){
                    var oTrNode=collMailNodes[x].parentNode.parentNode;
                    oTrNode.parentNode.removeChild(oTrNode);
                    x--;
                }

            }  
            trColor();          
        }
    </script>

  </head>

  <body>
    <table id="mailtable">
        <tr>
            <th>
                <input type="checkbox" name="all" onclick="checkAll(this)"/>全选
            </th>
            <th>
                发件人
            </th>
            <th>
                收件人
            </th>
            <th>
                邮件附属信息
            </th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵
            </td>
            <td>
                邮件1
            </td>
            <td>
                千年不灭，唯情而已11
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵2
            </td>
            <td>
                邮件2
            </td>
            <td>
                千年不灭，唯情而已22
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵3
            </td>
            <td>
                邮件3
            </td>
            <td>
                千年不灭，唯情而已33
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵4
            </td>
            <td>
                邮件4
            </td>
            <td>
                千年不灭，唯情而已44
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵5
            </td>
            <td>
                邮件5
            </td>
            <td>
                千年不灭，唯情而已55
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵6
            </td>
            <td>
                邮件6
            </td>
            <td>
                千年不灭，唯情而已66
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵7
            </td>
            <td>
                邮件7
            </td>
            <td>
                千年不灭，唯情而已77
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="mail"/>
            </td>
            <td>
                龙葵8
            </td>
            <td>
                邮件8
            </td>
            <td>
                千年不灭，唯情而已88
            </td>
        </tr>

        <tr>
            <th>
                <input type="checkbox" name="all" onclick="checkAll(this)"/>全选
            </th>
            <th colspan="3">
                <input type="button" value="全选" onclick="checkAllByBut(1)"/>
                <input type="button" value="取消全选" onclick="checkAllByBut(0)"/>
                <input type="button" value="反选" onclick="checkAllByBut(2)"/>
                <input type="button" value="删除所选邮件" onclick="deletMail()"/>
            </th>
        </tr>

    </table>
  </body>
</html>

其中，table.css代码：

@CHARSET "UTF-8";
table{
    border: #0066FF 1px solid;
    width: 500px;
    border-collapse: collapse;
}

table td{
    border: #249bdb 1px solid;
    padding:5px;
}
table th{
    border: #249bdb 1px solid;
    padding:5px;
    background-color: rgb(200,200,200);
}

调查问卷与性格测试

<!DOCTYPE html>
<html>
  <head>
    <title>radio.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    <style type="text/css" media="screen">
        #contentid{
            display:none;
        }

        #no1ul{
            list-style:none;
            margin:0px;
        }
        .close{
            display: none;
        }
        .open{
            display: block ;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        function showResult(){
            //1.判断是否有答案被选中
            //获取所有No.1的radio，并遍历判断checked的状态
            var oNo1Nodes=document.getElementsByName("No.1");
            var flag=false;
            var val=0;
            for(var x=0;x<oNo1Nodes.length;x++){
                if(oNo1Nodes[x].checked){
                    flag=true;
                    val=oNo1Nodes[x].value;
                    break;
                }
            }
            if(!flag){
                document.getElementById("errinfo").innerHTML="没有任何答案被选中".fontcolor("red");
                return;
            }else{
                document.getElementById("errinfo").className="close";
            }
            if(val>=1&&val<=3){
                document.getElementById("res_1").className="open";
                document.getElementById("res_2").className="close";
            }
            else{
                document.getElementById("res_1").className="close";
                document.getElementById("res_2").className="open";              
            }

        }
    </script>
  </head>

  <body>
    <!--
        1.是否参与调查问卷？
        2.性格测试

        -->


        <!--性格测试-->

        <h2>欢迎您参与性格测试：</h2>
        <div>
            <h3>第一题：</h3>
            <span>您喜欢的水果是什么？</span>
            <ul id="no1ul">
                <li><input type="radio" name="No.1" value="1" />葡萄</li>
                <li><input type="radio" name="No.1" value="2" />桃子</li>
                <li><input type="radio" name="No.1" value="3" />苹果</li>
                <li><input type="radio" name="No.1" value="4" />香蕉</li>

            </ul>
        </div>
        <div>
            <input type="button" value="查看测试结果：" onclick="showResult()"/>
            <span id="errinfo"> </span>
            <div id="res_1" class="close">1-3分：您的性格很内向</div>
            <div id="res_2" class="close">4分以上：您的性格外向</div>
        </div>





        <hr/>
        <script type="text/javascript" charset="utf-8">
            function showContent(node){
                var oDivNode=document.getElementById("contentid");
/*
                if(node.value=='yes'){
                    oDivNode.style.display="block";
                }else{
                    oDivNode.style.display="none";
                }*/
                with(oDivNode.style){
                    if(node.value=='yes'){
                        display="block";
                    }else{
                        display="none";
                    }
                }
            }
        </script>
        <!--问卷调查-->
        <div>
        您要参与问卷调查吗：<br/>
        <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
        <input type="radio" name="wenjuan" value="no"  checked="checked" onclick="showContent(this)"/>否
        </div>
        <div id="contentid">
        问卷调查内容：<br/>
        您的姓名：<input type="text"/><br/>
        您的邮箱：<input type="text"/>
        </div>

  </body>
</html>

下拉菜单（颜色选择）

<!DOCTYPE html>
<html>
  <head>
    <title>select.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    <style type="text/css">
    .clrclass{
        height:50px;
        width:50px;
        float:left;
        margin-right:30px;
    }
    #text{
        clear:left;
        margin-top:20px;
    }
    </style>

  </head>

  <body>
    <!--

    -->
    <script type="text/javascript">
       function changeColor(node){
           var colorVal=node.style.backgroundColor;

           document.getElementById("text").style.color=colorVal;

       }
    </script>
    <div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"> </div>
    <div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"> </div>
    <div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"> </div>
    <div id="text">
        君不见黄河之水天上来<br/>
        奔流到海不复回<br/>
        君不见高堂明镜悲白发<br/>
        朝成青丝暮成雪<br/>
        人生得意须尽欢<br/>
        莫使金樽空对月<br/>
        天生我材必有用<br/>
        千金散去还复来<br/>
    </div>
    <hr/>

    <script type="text/javascript">
       function changeColor2(){
           var oSelectNode=document.getElementsByName("selectcolor")[0];
          /*
           //获取所有的option
           var collOptionNodes=oSelectNode.options;

           alert(collOptionNodes[oSelectNode.selectedIndex].innerHTML);
       */
      /*
          with(oSelectNode){
           var collOptionNode=options;
           alert(collOptionNodes[x].innerHTML);
          }
          */

         var colorVal=oSelectNode.options[oSelectNode.selectedIndex].value;
         document.getElementById("text").style.color=colorVal;
       }
    </script>
    <select name="selectcolor" onchange="changeColor2()">
       <option value="black">--选择颜色--</option>
       <option value="red">红色</option>
       <option value="green">绿色</option>
       <option value="blue">蓝色</option>
    </select>

       <script type="text/javascript">
       function changeColor3(){
         var oSelectNode=document.getElementsByName("selectcolor2")[0];

         var colorVal=oSelectNode.options[oSelectNode.selectedIndex].value;
         document.getElementById("text").style.color=colorVal;
       }
    </script>

    <select name="selectcolor2" onchange="changeColor3()" class="selClass">
       <option style="background-color:black" value="black">--选择颜色--</option>
       <option style="background-color:red" value="red"> </option>
       <option style="background-color:green" value="green"> </option>
       <option style="background-color:blue" value="blue"> </option>
    </select>
  </body>
</html>

下拉菜单（二级联动菜单）

<!DOCTYPE html>
<html>
  <head>
    <title>selectCity.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    <style type="text/css">
        select{
        width:100px;
        }
    </style>

  </head>

  <body>
    <script type="text/javascript">
        function selectCity(){

            var collCities=[[],['海淀区','朝阳区','东城区','西城区']
                            ,['武汉','咸宁','宜昌','荆门']
                            ,['成都','南充','乐山','绵阳']
                            ,['青岛','济南','烟台','威海']];



            //var arr={"beijing":['海淀区','朝阳区','东城区','西城区']};
            //获取两个下拉菜单对象
            var oSelNode=document.getElementById("selid");
            var oSubSelNode=document.getElementById("subselid");
            //获取到底选择的是哪个省
            var index=oSelNode.selectedIndex;
            //通过角标到容器去获取对应的城市数组
            var arrCities=collCities[index];

/*
            //将子菜单的内容清空一下

            for(var x=0;x<oSubSelNode.options.length;){
                oSubSelNode.removeChild(oSubSelNode.options[x]);

            }*/
            //清除动作
            oSubSelNode.length=0;

            //遍历这个数组并将这个数组的元素封装成option对象，添加到子菜单中
            for(var x=0;x<arrCities.length;x++){
                var oOptNode=document.createElement("option");
                oOptNode.innerHTML=arrCities[x];
                oSubSelNode.appendChild(oOptNode);
            }

        }
    </script>
    <select id="selid" onchange="selectCity()">
        <option>选择省份</option>
        <option>北京</option>
        <option>湖北</option>
        <option>四川</option>
        <option>山东</option>


    </select>
    <select id="subselid">
        <option>选择区域</option>

    </select>

  </body>
</html>

随机生成验证码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
 * @author Administrator
 */
//验证码  ,4位的,由字符,数字组成.
function createCode() {
    var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
    //随机的从数组中取出4个元素.
    var mess = "";
    var index = 0;
    for (var i = 0; i < 4; i++) {
        //生成随机数.而且是在数组的长度范围内.
        //0-9之间的随机数. Math.floor(Math.random()*10)
        //0到数组长度(不包含)之间的浮点数.,向下取整,
        var index = Math.floor(Math.random() * datas.length);
        mess += datas[index];
    };
    //
    var codeSpan = window.document.getElementById("codeSpan");
    codeSpan.style.color = "red";
    codeSpan.style.fontSize = "20px";
    codeSpan.style.background = "gray";
    codeSpan.style.fontWeight = "900";
    codeSpan.style.fontStyle = "italic";
    codeSpan.style.textDecoration = "line-through";
    codeSpan.innerHTML = mess;
    codeSpan.value = mess;
}
createCode();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
    <span id="codeSpan"></span><a href="#" onclick="createCode()">看不清楚</a>

</body>
</html>

添加附件

<!DOCTYPE html>
<html>
  <head>
    <title>addfile.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    <style type="text/css" media="screen">
        table a:link,table a:visted{
            color:#F3E99A;
            text-decoration: none;
        }
        table a:hover{
            color :#9BF7D5;
        }
    </style>

    <script type="text/javascript" charset="utf-8">
        function addFile(){

            /**
             *因为文件选取框定义在行对象中
             * 所以只要给表格创建新的行和单元格即可
             *  
             */
            var oTabNode=document.getElementById("fileid");

            var oTrNode=oTabNode.insertRow();

            var oTdNode_file=oTrNode.insertCell();

            var oTdNode_del=oTrNode.insertCell();

            oTdNode_file.innerHTML="<input type='file'/>";
            // oTdNode_del.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";      

            oTdNode_del.innerHTML="<img src='1.jpg' alt='删除附件' onclick='deleteFile(this)'/>";


        }

        function deleteFile(node){

            var oTrNode=node.parentNode.parentNode;
            oTrNode.parentNode.removeChild(oTrNode);
        }
    </script>

  </head>

  <body>
      <table id="fileid">
          <tr>
              <td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
          </tr>
          <!-- <tr>
              <td><input type="file"/></td>
              <td><a href="javascript:void(0)>删除附件</a></td>
          </tr> -->
      </table>


  </body>
</html>

校验表单

正则表达式

位置：

    ^       开头
    $      结尾

次数：

    *       0或多个
    +       1或多个
    ?       0或1个
    {n}     就是n个
    {n,}    至少n个
    {n,m}   最少n个，最多m个

通配符：

    \d      任意数字
    \D      任意非数字
    \s      任意空白
    \S      任意非空白
    .       任意字符（除'\n'外）

组合：

    [a-z]
    [0-9]
    等

组：

    (正则)        匹配括号中正则表达式对应的结果，并暂存这个结果。
    (?:正则)  匹配括号中正则表达式对应的结果，但不暂存这个结果。
    \数字     使用第n个组匹配的结果

使用正则的工具（RegExp类与相关方法）
创建：

    // 方式一
    var regex = new RegExp("正则表达式", "标志");
    // 方式二
    var regex = /正则表达式/标志

标志：

g （全文查找出现的所有 pattern） 
i （忽略大小写） 
m （多行查找）

方法：

    Regexp.test( str )
    String.replace( regex, str )

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta name="content-type" content="text/html; charset=gbk">


  </head>

  <body>
    <!--

        表单校验
    -->

    <script type="text/javascript" charset="gbk">
//     
        // //校验用户名
        // function checkUser(){
            // var flag;
            // var oUserNode=document.getElementsByName("user")[0];
            // // alert(oUserNode.value);
            // var name=oUserNode.value;
//             
            // //定义正则表达式
            // var reg=new RegExp("^[a-z]{4}$","i");//必须是四个字母
//             
            // // reg=new ReExp("^[0-9]{4}$");//必须是四个数字  ^\\d{4}$ 正则表达式需转义  因为有引号
//             
            // reg=/^[0-9]{4}$/;//  ^\d{4}$  不需要转义
//             
            // var oSpanNode=document.getElementById("userspan");
//             
            // // if(name=="abc"){
                // if(reg.test(name)){
                // oSpanNode.innerHTML="用户名正确".fontcolor("green");   
                // flag=true;     
                // // oSpanNode.innerHTML="<img src='ok.jpg'/>";
            // }else{
                // oSpanNode.innerHTML="用户名错误".fontcolor("red");
                // flag=false;
            // }
            // return flag;
// 
        // }
//         
        /**
         *发现很多框的校验除了几个内容 不同以外，校验的过程是一样的
         * 所以进行了代码的提取
         *  
         */
        function check(name,reg,spanId,okinfo,errinfo){
             var flag;
            var val=document.getElementsByName(name)[0].value;

            var oSpanNode=document.getElementById(spanId);

                if(reg.test(val)){
                oSpanNode.innerHTML=okinfo.fontcolor("green");   
                flag=true;     
                // oSpanNode.innerHTML="<img src='ok.jpg'/>";
            }else{
                oSpanNode.innerHTML=errinfo.fontcolor("red");
                flag=false;
            }
            return flag;
        }

        //校验用户名
        function checkUser(){
            var reg=/^[0-9]{4}$/;
           return check("user",reg,"userspan","用户名正确","用户名错误");

        }

        //校验密码
        function checkpsw(){
            var reg=/^\d{4}$/;
            return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
        }

        //确认密码。只要和密码一直就可
        function recheckpsw(){
            var flag;
            //获取密码框内容
            var pass=document.getElementsByName("psw")[0].value;
            //获取确认密码框内容
            var repass=document.getElementsByName("repsw")[0].value;

            //获取确认密码的span区域
            var oSpanNode=document.getElementById("repswspan");
             if(pass==repass){
                oSpanNode.innerHTML="两次密码一致".fontcolor("green");   
                flag=true;     
                // oSpanNode.innerHTML="<img src='ok.jpg'/>";
            }else{
                oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
                flag=false;
            }
            return flag;
        }


        //校验邮件
        function checkmail(){
            var reg=/^\w+@\w+(\.\w+)+$/i;
            return check("mail",reg,"mailspan","邮件格式正确","邮件格式错误");
        }

        //提交事件处理
        function checkForm(){
            if(checkUser()&&checkpsw()&&recheckpsw()&&checkmail())
                return true;
            return false;
        }



        function mySubmit(){
            var oFormNode=document.getElementById("userinfo");
            oFormNode.submit();
        }
    </script>

    <form onsubmit="return checkForm()">
    <!-- <form id="userinfo"> -->
            用户名称<input type="text" name="user" onblur="checkUser()"/>
     <span id="userspan"> </span>       
     <br/>       

            输入密码<input type="text" name="psw" onblur="checkpsw()"/>
     <span id="pswspan"> </span> 
     <br/>

            输入密码<input type="text" name="repsw" onblur="recheckpsw()"/>
     <span id="repswspan"> </span> 
     <br/>

            邮件地址<input type="text" name="mail" onblur="checkmail()"/>
     <span id="mailspan"> </span> 
     <br/>

     <input type="submit" value="提交数据"/>
    </form>
    <hr/>
            <!-- 自定义提交按钮 （提交组件）-->
    <input type="button" value="我的提交" onclick="mySubmit()"/>

  </body>
</html>