DOM操作案例

一  模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0
        }
        
         /*//  只有此处设置高度百分之百,下面的子元素设置百分之百才有效果*/
        html,body{
            height: 100%;
        }
        
        /*//即使设置了宽高100%,只要此盒子,未浮动,未绝对和固定定位,就不会覆盖上面的兄弟盒子*/
        #box{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }

        #content{
            position: relative;
            top:150px;
            width: 140px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color:red;
            background: white;
            margin: 0 auto;

        }

        #span1{
            position: absolute;
            background: red;
            top:0;
            right:0;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color:#fff;

        }
        /*#btn{*/
            /*background: black;*/
            /*color: #3388ff;*/
        /*}*/


    </style>
</head>
<body>
    <button id = "btn">弹出</button>
    <script type="text/javascript">
        var oBtn = document.getElementById("btn");
        
        //创建之后,直接就是一个元素节点对象
        var oDiv = document.createElement("div");
        var oP = document.createElement("p");
        var oSpan = document.createElement("span");

        //设置属性
        oDiv.id = "box";
        oP.id = "content";
        oP.innerHTML = "模态框成功弹出";
        oSpan.innerHTML = "x";
        oSpan.id = "span1";

        //追加元素   此方法默认添加在最后一个
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        //点击弹出按钮,弹出模态框
        oBtn.onclick = function () {
            //动态的添加到body的一个div中
            // this.parentNode.insertBefore(oDiv, oBtn)
            this.parentNode.appendChild(oDiv)

        }

        //点击x ,关闭模态框
        oP.onclick = function () {
            //移除oDiv元素
            oDiv.parentNode.removeChild(oDiv)

        }



    </script>

</body>
</html>

 二 简易留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style type = text/css>
        *{
            margin:0;
            padding:0;
        }





    </style>
</head>
<body>
    <h1>简易留言板</h1>
    <div id = "box">
        <!--里面放 ul 和li -->
    </div>
    <textarea id="msg"></textarea>
    <input type="button" id="btn" value="留言"/>
    <button onclick="sum()">统计</button>
    <script type="text/javascript">
        // window.onload=function () {
            //将ul标签添加到div盒子中
            var oul = document.createElement("ul");
            var obox = document.getElementById("box");
            obox.appendChild(oul);

            var obtn = document.getElementById("btn");
            var omsg = document.getElementById("msg");

            //控制留言的总量
            var count = 1;
            obtn.onclick = function () {
                //点击留言事件操作
                //1,创建li标签
                var oli = document.createElement("li");
                //设置内容
                oli.innerHTML = omsg.value + "<span class='close'>删除</span>";
                oul.appendChild(oli);

                //每次插入的li都排在前面
                //获取li标签
                var olis = document.getElementsByTagName("li");
                //如果是第一个li就直接添加最后就可以了,
                if (olis.length > 1) {
                    oul.insertBefore(oli, olis[0]);
                    count++

                }
                // else{
                //如果不是第一次添加li标签,则插入到最前面
                // oul.insertBefore(oli,olis[0]);

                // }

                //添加完成后,清空textarea的值
                omsg.value = "";

                //点击删除 删除当前的一条数据
                //先获取所有的 删除
                var ospanlis = document.getElementsByTagName("span");

                //for 循环对所有span 添加点击事件

                for (var i = 0; i < ospanlis.length; i++) {
                    ospanlis[i].onclick = function () {

                        //移除当前标签
                        oul.removeChild(this.parentNode);
                        count--

                    }
                }
            };

            function sum() {
                //用反引号
                alert(`一共发布了${count}条留言`);


            }



    </script>

</body>
</html>

 三   用onmouseenter 模仿hover   ---购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .car{
        width: 100px;
        height: 40px;
        margin-top: 100px;
        margin-left: 200px;
        background: #b0b0b0;
        position: relative;
        text-align: center;
        line-height: 40px;
    }

    .shop{
        width: 200px;
        height: 100px;
        background-color: pink;
        position: absolute;
        display:none;
        /*//只要设置父相子绝,只对margin也阔以用*/
        /*//一般常用left right  bottom  top */

        top: 40px;


        /*//对下面的设置无用*/
        /*margin-bottom: 20px;*/
        /*margin-right: 300px;*/

    }
    .active{
        display: block;
    }
</style>
<body>
    <div class="car">我的购物车
        <div class="shop" id = "shop"></div>
    </div>
    <script type="text/javascript">
        var oCar = document.getElementsByClassName("car")[0];
        var oShop = document.getElementById("shop");
        oCar.onmouseenter = function () {
            oShop.className+=" active"

        }

        oCar.onmouseleave = function () {
             oShop.className="shop"

        }

    </script>
</body>
</html>

 

posted @ 2018-09-29 22:04  团子emma  阅读(177)  评论(0)    收藏  举报