12-關於DOM操做的相關案例

時間 2019-11-13

標籤關於 dom 相關案例欄目 HTML 简体版

原文原文鏈接

1.模態框案例

需求：javascript

打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框css

代碼以下：html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.3);
            }
            #content{
                position: relative;
                top: 150px;
                width: 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                color: red;
                background-color: #fff;
                margin: auto;
            }
            #span1{
                position: absolute;
                background-color: red;
                top: 0;
                right: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;

            }
        </style>
    </head>
    <body>
        <button id="btn">彈出</button>
    </body>
    <script type="text/javascript">
        //獲取dom元素 1.獲取事件源
        var oBtn = document.getElementById('btn');
        //建立彈出模態框的相關DOM對象
        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)
            
        }
        // 點擊X 關閉模態框
        oSpan.onclick = function(){
            // 移除oDiv元素
            oDiv.parentNode.removeChild(oDiv)
        }   
        
    </script>
</html>

2.簡易留言板

需求：java

當在textarea中輸入內容，點擊留言按鈕，會添加到瀏覽器中瀏覽器

圖以下：
app

代碼以下：dom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .close{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                background-color: rgba(0,0,0,.1);
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1>簡易留言板</h1>
        <div id="box">
            <!--<ul>
                
            </ul>-->
            
        </div>
        <textarea id="msg"></textarea>
        <input type="button" id="btn" value="留言"/>
        <button onclick="sum()">統計</button>
    </body>
    <script type="text/javascript">

        // 0 將ul標籤添加到div#box標籤中
        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 = 0;
        oBtn.onclick = function(){
            
            
            // 點擊留言按鈕事件操做
            // 1.建立li標籤
            var oLi = document.createElement('li');        
            //2.設置內容
            oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"
            
            // 3.若是想在插入的第一個li獲取的前面繼續添加li標籤
            //3.1獲取li標籤
            var olis = document.getElementsByTagName('li');
             //3.2 若是是第一次添加的li標籤，則直接添加到ul的後面
            if(olis.length == 0){
                oUl.appendChild(oLi);
                count++;
                
            }else{
                // 3.3 若是不是第一次添加的li標籤，則插入到第一個li標籤的前面
                oUl.insertBefore(oLi,olis[0]);
                count++;
            }
            // 4.添加完成以後 清空textarea的值
            oMsg.value = '';
            
            
            // 5.點擊X的時候刪除當前的一條數據
            //5.1先獲取全部的X
            var oSpans = document.getElementsByTagName('span');
            
            // 5.2for循環 對全部的X添加點擊事件
            for(var i = 0; i< oSpans.length; i++){
                oSpans[i].onclick  = function(){
                    // 5.3 移除當前的li標籤
                    oUl.removeChild(this.parentNode)
                    count--;
                }
            }
        
            
        }
    
        function sum(){
            alert('一共發佈了'+count+'條留言');
            
        }
    </script>
</html>

3.使用js模擬選擇器中hover

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: red;
        }
    </style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>

<script>
    //需求：鼠標放到哪一個button上，改button變成黃色背景（添加類）


    var btnArr = document.getElementsByTagName("button");
    //綁定事件
    for(var i=0;i<btnArr.length;i++){   //要爲每個按鈕綁定事件，因此用到了for循環
        btnArr[i].onmouseover = function () {
            //【重要】排他思想：先把全部按鈕的className設置爲空，而後把我（this）這個按鈕的className設置爲current
            //排他思想和for循環連用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";  //【重要】核心代碼
        }
    }

    //鼠標離開current時，還原背景色
    for(var i=0;i<btnArr.length;i++){   //要爲每個按鈕綁定事件，因此用到了for循環
        btnArr[i].onmouseout = function () { //鼠標離開任何一個按鈕時，就把按鈕的背景色還原
            this.className = "";
        }
    }

</script>

</body>


</html>

代碼解釋：this

鼠標懸停時，current欄變色，這裏用到了排他思想：先把全部按鈕的className設置爲空，而後把我(this)這個按鈕的className設置爲current，就能夠達到變色的效果。核心代碼是：spa

            //排他思想：先把全部按鈕的className設置爲空，而後把我（this）這個按鈕的className設置爲current
            //排他思想和for循環連用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";

4.tab欄選項卡

代碼以下：3d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </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>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            // //需求：鼠標放到上面的li上，li自己變色(添加類)，對應的p也顯示出來(添加類);
                    //思路：1.點亮上面的盒子。   2.利用索引值顯示下面的盒子。

            var tabli = document.getElementsByTagName('li');
            var tabContent = document.getElementsByTagName('p')
        
            for(var i = 0; i < tabli.length; i++){
                // 綁定索引值（新增一個自定義屬性：index屬性）
                tabli[i].index  = i;
                tabli[i].onclick = function(){
                    
                    // 1.點亮上面的盒子。   2.利用索引值顯示下面的盒子。(排他思想)
                    for(var j = 0; j < tabli.length; j++){
                        tabli[j].className = '';
                        tabContent[j].className = '';
                    }    
                    this.className = 'active'
                    
                    tabContent[this.index].className = 'active';//【重要代碼】
                }
        }
        }
        
    </script>
</html>

五、購物車案例

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 400px;
            margin: 100px auto;
            background-color: rgba(255,255,255,0.4);
            position: relative;
            
        }
        .car{
            width: 150px;
            height: 30px;
            background-color: #fff;
            padding-left: 30px;
            position: absolute;
            left: 130px;
            top: 3px;
            z-index: 3;
            border: 1px solid green;

        }
        .shop{
            width: 310px;
            height: 70px;
            background-color: #fff;
            position: absolute;
            top:33px;
            left: 0;
            display: none;

        }
        div.c{
            
            border-bottom-width: 0;
            
        }
        div.t{
            border:  1px solid green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="car" id="myCar">個人購物車</div>
        <div class="shop t" id="shop"></div>
    </div>
    <script type="text/javascript">
        var myCar =  document.getElementById('myCar');
        var shop  = document.getElementById('shop');
        myCar.onmouseover = function(){
            shop.style.display = 'block';
            myCar.className +=' c';
        }
        myCar.onmouseout = function(){
            shop.style.display = 'none';
            myCar.removeAttribute('class');
            myCar.className = 'car';
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。