Js_DOM简单案例

1、单击后文字变大显示

获取值属性

2、简单时钟

获取当前本机时间

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            setTime();
        }

        function setTime() {
            var div = document.getElementById("d1");
            var time = new Date();

            //如果获取月份（月份从0开始 + 1）
            div.innerHTML = set(time.getHours()) + ":" + set(time.getMinutes()) + ":" + set(time.getSeconds());
        }

        //
        function set(num) {
            if (num < 10) {
                return "0" + num;
            } else {
             return num;
            }
        }

        setInterval("setTime()",1000);
    </script>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

3、简单横行目录

鼠标经过显示子目录

<!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>
    <title></title>
    <style type="text/css">
        *
        {
            font-size:13px;
            margin:0px;
            padding:0px;
        }
        #menu
        {
            margin-left:200px;
            margin-top:100px;
        }
        #menu>ul>li
        {
            width:80px;
            list-style-type:none;
            float:left;
            background-color:Yellow;
            margin-left:10px;
            text-align:center;
            cursor:pointer;
        }
        
        #menu ul ul
        {
            list-style-type:none;
            background-color:Gray;
        }
        
        .hide
        {
            display:none;
        }
        .show
        {
            display:block;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //窗体加载的时候把所有子菜单隐藏

            //父级ul
            var parent = document.getElementById("parent");
            //子菜单对应的ul
            var uls = parent.getElementsByTagName("ul");
            for (var i = 0; i < uls.length; i++) {
                uls[i].className = "hide";
            }

            //给父菜单的li注册事件
            var lists = parent.children;
            for (var i = 0; i < lists.length; i++) {
                lists[i].onmouseover = function () {
                    //当前父菜单 对应的子菜单
                    var ul = this.children[0];
                    ul.className = "show";
                }

                lists[i].onmouseout = function () {
                    //当前父菜单 对应的子菜单
                    var ul = this.children[0];
                    ul.className = "hide";
                }
            }
        }
    </script>
</head>
<body>
    <div id="menu">
        <ul id="parent">
           <li>
                父级菜单一
                <ul>
                    <li>
                        子菜单一
                    </li>
                    <li>
                        子菜单二
                    </li>
                    <li>
                        子菜单三
                    </li>
                </ul>
           </li> 
           <li>
                父级菜单二
                <ul>
                    <li>
                        子菜单一
                    </li>
                    <li>
                        子菜单二
                    </li>
                    <li>
                        子菜单三
                    </li>
                </ul>
           </li>
           <li>
                父级菜单三
                <ul>
                    <li>
                        子菜单一
                    </li>
                    <li>
                        子菜单二
                    </li>
                    <li>
                        子菜单三
                    </li>
                </ul>
           </li>
           <li>
                父级菜单四
                <ul>
                    <li>
                        子菜单一
                    </li>
                    <li>
                        子菜单二
                    </li>
                    <li>
                        子菜单三
                    </li>
                </ul>
           </li>
           <li>
                父级菜单五
                <ul>
                    <li>
                        子菜单一
                    </li>
                    <li>
                        子菜单二
                    </li>
                    <li>
                        子菜单三
                    </li>
                </ul>
           </li>
        </ul>
    </div>
</body>
</html>

4、判断密码强度

JS代码放置在外部文件中

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <title></title>
  6     <script src="Scripts/JScript.js" type="text/javascript"></script>
  7 </head>
  8 <body>
  9     <table border="1px" width="400px">
 10         <tr>
 11             <td>
 12                 用户名：
 13             </td>
 14             <td>
 15                 <input type="text" />
 16             </td>
 17         </tr>
 18          <tr>
 19             <td>
 20                 密码：
 21             </td>
 22             <td>
 23                 <input id="txtPwd" type="text" />
 24                 <table id="tb">
 25                     <tr>
 26                         <td>
 27                             弱
 28                         </td>
 29                         <td>
 30                             中
 31                         </td>
 32                         <td>
 33                             强
 34                         </td>
 35                     </tr>
 36                 </table>
 37             </td>
 38         </tr>
 39          <tr>
 40             <td colspan="2">
 41                 <input type="button" name="name" value="注册" />
 42             </td>
 43             
 44        </tr>
 45     </table>
 46 </body>
 47 </html>
 48 外部JS中：
 49 window.onload = function () {
 50     var txt = document.getElementById("txtPwd");
 51     var tb = document.getElementById("tb");
 52     var tds = tb.getElementsByTagName("td");
 53 
 54     for (var i = 0; i < tds.length; i++) {
 55         tds[i].style.backgroundColor = "gray";
 56     }
 57 
 58     //onkeydown 键盘落下，字符还没有录入到文本框
 59     //onkeyup  键盘弹起 字符已经到文本框
 60     txt.onkeyup = function () {
 61         //获取文本框中的内容，（td背景颜色设置成灰色）判断强度
 62 
 63         var tb = document.getElementById("tb");
 64         var tds = tb.getElementsByTagName("td");
 65         //按下键盘  初始化所有td 为灰色
 66         for (var i = 0; i < tds.length; i++) {
 67             tds[i].style.backgroundColor = "gray";
 68         }
 69 
 70 
 71         //获取密码强度
 72         var level = getLevel(this.value);
 73         if (level == 0 || level == 1) {
 74             //弱密码
 75             tds[0].style.backgroundColor = "red";
 76 
 77         } else if (level == 2) {
 78             //中密码
 79             tds[0].style.backgroundColor = "red";
 80             tds[1].style.backgroundColor = "red";
 81 
 82         } else if (level == 3) {
 83             //强密码
 84             tds[0].style.backgroundColor = "red";
 85             tds[1].style.backgroundColor = "red";
 86             tds[2].style.backgroundColor = "red";
 87         }
 88     }
 89 }
 90 //判断密码强度
 91 function getLevel(txt) {
 92     var num = 0;
 93     //判断txt中是否有数字
 94     var reg = /\d+/;
 95     if (reg.test(txt)) {
 96         num++;
 97     }
 98     //是否包含字母
 99     var reg = /[a-z]+/i;
100     if (reg.test(txt)) {
101         num++;
102     }
103     //是否包含特殊符号
104     var reg = /[^0-9a-zA-Z]+/;
105     if (reg.test(txt)) {
106         num++;
107     }
108     //如果密码长度小于6 强度-1
109     if (txt.length < 6) {
110         num--;
111     }
112     return num;
113 }

5、省市选择

形似C#中的省市联动(未关联数据库)

<!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>
    <title></title>
    <script type="text/javascript">
        var json = [{ "河北省": ["邯郸市", "邢台市", "石家庄"] },
                    { "河南省": ["郑州市", "安阳市", "开封市"] },
                     { "山东省": ["青岛市", "济南市", "烟台市"] }
            ];
        window.onload = function () {

            //加载所有的省
            getProvince();
            //加载市
            getCity();
        }
        //加载所有的省
        function getProvince() {
            var pro = document.getElementById("pro");
            for (var i = 0; i < json.length; i++) {
                //获取省
                for (var key in json[i]) {
                    //把省放到下拉框中
                    var option = document.createElement("option");
                    option.innerText = key;
                    option.value = key;
                    //
                    pro.appendChild(option);
                }
            }
        }
        //加载当前省中所有的市
        function getCity() {
            var pro = document.getElementById("pro");
            var city = document.getElementById("city");

            //清空上一次加载的所有市
            //city.innerHTML = "";
           
//            var opts = city.getElementsByTagName("option");
//            for (var i = 0; i < opts.length; i++) {
//                city.removeChild(opts[i]);
//            }
            
            while (city.firstChild) {
                city.removeChild(city.firstChild);
            }


            //当前省
            //alert(pro.value);
            for (var i = 0; i < json.length; i++) {
                for (var key in json[i]) {
                    //当前省的市
                    if (pro.value == key) {
                        // 当前省中的市  数组
                        // json[i] 是json数组中 的每一项(json对象)
                        //json[i][key] 是获取当前遍历到的json对象的值
                        var citys = json[i][key];

                        for (var i = 0; i < citys.length; i++) {
                            var option = document.createElement("option");
                            option.innerText = citys[i];
                            option.value = citys[i];

                            city.appendChild(option);
                        }

                    }
                }
            }
        }
    </script>
</head>
<body>
    <select id="pro" onchange="getCity()">
    
    </select>
    <br />
    <select id="city">
        
    </select>
</body>
</html>

6、关于多选框的全选和反选

判断了多种情况，完成相应的关联事件的处理

<!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>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var chkAll = document.getElementById("chkAll");
            //点击全选
            chkAll.onclick = function () {
                var chks = document.getElementsByName("hobby");
                for (var i = 0; i < chks.length; i++) {
                    chks[i].checked = this.checked;
                }
            }

            //给所有子的checkbox注册单机事件
            var chks = document.getElementsByName("hobby");
            for (var i = 0; i < chks.length; i++) {
                //!!!!!
                chks[i].onclick = singleCheck;
            }


            //反选
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                var chks = document.getElementsByName("hobby");
                for (var i = 0; i < chks.length; i++) {
                    //把原来的状态取反
                    chks[i].checked = !chks[i].checked;
                }

                //根据子的checkbox判断父的checkbox的状态
                singleCheck();
            }
        }

        function singleCheck() {
            var chks = document.getElementsByName("hobby");
            //假设所有子的checkbox都被选中
            var isCheckAll = true;

            for (var i = 0; i < chks.length; i++) {
                //判断每一个子的checkbox是否被选中
                if (!chks[i].checked) {
                    isCheckAll = false;
                    break;
                }
            }
            //isCheckAll  所有子的checkbox是否都被选中
            var chkAll = document.getElementById("chkAll");
            chkAll.checked = isCheckAll;
        }
    </script>
</head>
<body>
    <input id="chkAll" type="checkbox" />全选 <input id="btn" type="button" value="反选" />
    <br />
    <input type="checkbox" name="hobby" />打码
    <input type="checkbox" name="hobby" />睡觉
    <input type="checkbox" name="hobby" />上网
</body>
</html>

7、选择权限

从一个div中选择权限到另一个div中

<!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>
    <title></title>
    <script type="text/javascript">
//        function moveSeleted() {
//            var all = document.getElementById("all");
//            var sel = document.getElementById("sel");


//            var selOptions = all.getElementsByTagName("option");
//            for (var i = selOptions.length-1; i>=0; i--) {
//                if (selOptions[i].selected) {
//                    //
//                    selOptions[i].selected = false;
//                    //追加。把元素放到容器最后
//                    //sel.appendChild(selOptions[i]);

//                    //把new元素，插入到firstChild 之前
//                    sel.insertBefore(selOptions[i], sel.firstChild);
//                }
//            }
//        }

        function moveSeleted(all,sel) {
            var selOptions = all.getElementsByTagName("option");
            for (var i = selOptions.length - 1; i >= 0; i--) {
                if (selOptions[i].selected) {
                    //
                    selOptions[i].selected = false;
                    //追加。把元素放到容器最后
                    //sel.appendChild(selOptions[i]);

                    //把new元素，插入到firstChild 之前
                    sel.insertBefore(selOptions[i], sel.firstChild);
                }
            }
        }
    </script>
</head>
<body>
    <select size="5" id="all" multiple="multiple">
        <option>查找</option>
        <option>添加</option>
        <option>编辑</option>
        <option>删除</option>
    </select>
    <input type="button" value=">" onclick="moveSeleted(document.getElementById('all'),document.getElementById('sel'))" />
    <input type="button" value="<" onclick="moveSeleted(document.getElementById('sel'),document.getElementById('all'))" />
    <input type="button" value=">>" />
    <input type="button" value="<<" />

    <select size="5" id="sel" multiple="multiple">
      
    </select>
</body>
</html>

8、跟着鼠标走的图片

获取鼠标位置

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        document.onmousemove = function () {

            var img = document.getElementById("i1");

            img.style.position = "absolute";

            //!!!!!!!!!!别忘了px
            img.style.left = event.clientX - 10 + "px";
            img.style.top = event.clientY - 10 + "px";


        }
    </script>
</head>
<body>
    <img id="i1" src="tianshi.gif" />
</body>
</html>

9、设置透明度

点击按钮改变图片的透明度

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        document.onmousemove = function () {

            var img = document.getElementById("i1");

            img.style.position = "absolute";

            //记得这里的px，千万别忘了px
            img.style.left = event.clientX - 10 + "px";
            img.style.top = event.clientY - 10 + "px";


        }
    </script>
</head>
<body>
    <img id="i1" src="tianshi.gif" />
</body>
</html>

10、验证电子邮件

正则表达式的运用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var txt = document.getElementById("t1");
            txt.onblur = function () {
                var reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                //验证文本框中输入的内容
                if (!reg.test(this.value)) {
                    this.style.backgroundColor = "red";
                    document.getElementById("btn").disabled = true;
                }
                else {
                    document.getElementById("btn").disabled = false;
                }
            }
        }
    </script>
</head>
<body>
    <form action="提交成功.htm">
        电子邮件：<input id="t1" type="text" name="name" value="" />
        <br />

        <input id="btn" type="submit" value="注册" />
    
    </form>
</body>
</html>

posted on 2012-07-27 22:27 Fan帥帥阅读(1987) 评论(0) 编辑收藏举报