JS中Dom操作的常用案例实现

Posted 江湖乄夜雨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中Dom操作的常用案例实现相关的知识，希望对你有一定的参考价值。

　　本文介绍几个Dom操作的几个常用的案例。虽然现在各种web框架层出不穷，也很方便。但是了解最基本的实现方法对我们开发还是有很大的帮助的：

　　1.图片滚动案例

　　1.1  效果如下：

　　1.2  代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width:300px;
            height:335px;
            border:3px solid #b0b0b0;
            position: relative;
            overflow: hidden;
            margin:100px auto;
        }

        img{
            position: absolute;
            top: 0;
            left:22px;
        }

        /*两个span一个在div的左一个在div的右*/
        .wrap .left{
            height:100%;
            width:150px;
            position: absolute;
            left:0;
        }

        .wrap .right{
            height:100%;
            width:150px;
            position: absolute;
            right:0;

        }

    </style>



</head>
<body>
    <div class="wrap" id="box">
        <img src="2.jpg" id="naruto">
        <span class="left" id="pic_left"></span>
        <span class="right" id="pic_right"></span>
    </div>


    <script>

    var left = document.getElementById(\'pic_left\');
    var right = document.getElementById(\'pic_right\');
    var img = document.getElementById(\'naruto\');

    var count = 0;
    var time = null;

    //鼠标移入的时候动作
    left.onmouseover = function () {
        time = setInterval(function () {
           count -= 2;
           count >= -100 ? img.style.left = count + \'px\':clearInterval(time);
        },30)

    };

    right.onmouseover = function () {
        time = setInterval(function () {
            count += 2;
            count < 0 ? img.style.left = count + \'px\':clearInterval(time);
        },30)

    }


    </script>


</body>
</html>
图片滚动

　

　2.选项卡案例

　　2.1  效果如下：

　　2.2  代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}

        ul{list-style:none;}

        #tab{
            width:480px;
            margin-top:55px;
            margin-left:auto;
            margin-right:auto;
            border:2px red solid;
        }

        /*ul下的li的属性*/
        ul li{
            float: left;
            width:160px;
            height:60px;
            line-height: 60px;
            text-align: center;
            background-color:grey;
        }

        /*ul下的li里的a的属性*/
        ul li a{
            text-decoration: none;
            color:black;
        }

        /*li的active属性*/
        li.active{
            background-color: aqua;
        }

        p{
            display:none;
            height:200px;
            text-align: center;
            line-height:200px;
            background-color: #2b84da;
        }

        p.active{
            display:block;
            font-size:36px;
        }

    </style>

</head>
<body>

    <div id="tab">
        <ul>
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">图片</a></li>
        </ul>

        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>



    <script>
        var tab_li = document.getElementsByTagName(\'li\');
        var tab_content = document.getElementsByTagName(\'p\');

        for(var i=0;i<tab_li.length;i++){
            //保存变量i的临时值
            tab_li[i].index = i;
            tab_li[i].onclick = function () {
                for(var j=0;j<tab_li.length;j++){
                    tab_li[j].className = \'\';
                    tab_content[j].className = \'\';
                }
                this.className = \'active\';
                tab_content[this.index].className = \'active\';
            }
        }



    </script>

</body>
</html>
View Code

　

　3.简易留言板

　　3.1 效果如下：

　　3.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
    <style>
        a{
            cursor: pointer;
        }

        a:hover{
            color:red;
            background-color: orange;
        }
    </style>

</head>

<body>
    <div>
        <p>
            <h2>简易留言板</h2>
        </p>
    </div>

    <!--留言显示的div-->
    <div id="box">
    </div>
    <!--操作区-->
    <div>
        <textarea id="msg" style="height: 69px;"></textarea>
        <input id="words" type="button" value="留言" />
        <input id="count" type="button" value="统计" onclick="counter();" />
    </div>


    <script>
        //取值
        var msg = document.getElementById(\'msg\');

        //开始时在显示区创建新的ul
        var ul = document.createElement(\'ul\');
        var box = document.getElementById(\'box\');
         box.appendChild(ul);

        //点击留言的操作
        var words = document.getElementById(\'words\');
        //全局变量count
        count = 0;
        //点击留言的事件~~~~~~~~~~~~~~~~~~~~~~~
        words.onclick = function () {
            //找到textarea的值
            message = msg.value;
            // 新建一个li
            var li = document.createElement(\'li\');
            ////往li里添加内容——注意这里是innerHTML！！！
            li.innerHTML = msg.value + \'<span>&nbsp;&nbsp;&nbsp;<a>X</a></span>\';

            //判断后加入到ul
            var lis = document.getElementsByTagName(\'li\');
            if (lis.length === 0) {
                    ul.appendChild(li);
                    count++;
                }
            else {
                    ul.insertBefore(li, lis[0]);
                    count++;
            }
            前端开发中最常用的JS代码片段


 前端开发常用js代码片段


 JS常用代码片段2-值得收藏


 JS常用代码片段2-值得收藏


 js虚拟dom实现思路及案例


 Javascript操作DOM常用API总结