JavaScript基礎 釋出評論/刪除評論/獲取時間

data belle發表於2020-12-05
JavaScript

  1. 建立節點（三種方法）
    document.createElement(‘tagName’);
    此方法建立由tagName指定的HTML元素，因為這些元素原先不存在，是根據我們的需求動態生成的，也稱為動態建立元素節點。建立多個元素時效率較第一點，但結構清晰。
    document.write();是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪。
    element.innerHTML;是將內容寫入某個DOM節點，不會導致頁面全部重繪，而且此方法在建立多個元素時效率更高（採取陣列形式拼接），但結構較複雜。

  2. 新增節點
    node.appendChild(child)；此方法講一個節點新增到指定父節點列表末尾，類似於css裡面的after偽元素//追加
    node.insertBefore(child,指定元素);此方法講一個節點新增到指定父節點列表前面，類似於css裡面的before偽元素

  3. 刪除節點
    node.removeChild(child);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 750px;
            height: 800px;
        }
        .box .h_box {
            position: relative;
            width: 100%;
            height: 120px;
        }
        .box .h_box textarea {
            font-size: 14px;
            border-radius: 4px;
            background-color: #f4f5f7;
            padding: 5px 10px;
            margin: 15px;
            resize: none;
        }
        .box .h_box button {
            position: absolute;
            top: 30px;
            width: 70px;
            height: 64px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #00a1d6;
            cursor: pointer;
            background-color: #00a1d6;
            color: #fff;
            padding: 4px 15px;
        }
        .b_box {
            width: 100%;
            height: 670px;
        }
        .msg_box {
            width: 100%;
        }
        .b_box .msg_box p{
            width: 585px;
            font-size: 18px;
            margin: 10px 0px 0px 17px;
        }
        .b_box .msg_box span {
            margin-left: 17px;
            font-size: 12px;
            color: #666666;
        }
        .b_box .msg_box p a {
            float: right;
            text-decoration: none;
            font-size: 14px;
            color: #666;
        }
        .b_box .msg_box p a:hover {
            color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="h_box">
            <textarea name="msg" cols="80" rows="5" placeholder="請文明發表評論"></textarea>
            <button type="submit">發表評論</button>
        </div>
        <div class="b_box">
        </div>
    </div>
    <script>
        // 獲取元素
        var btn = document.querySelector("button");
        var textarea = document.querySelector("textarea")
        var b_box = document.querySelector(".b_box");
        // 滑鼠點選，改變樣式
        textarea.onmouseover =function(){
            this.style.backgroundColor = '#fff';
            this.style.border = '1px solid blue';
        }
        textarea.onmouseout =function(){
            this.style.backgroundColor = '#f4f5f7';
            this.style.border = '';
        }
        textarea.onblur =function(){
            this.style.backgroundColor = '#f4f5f7';
            this.style.border = '';
        }
        // 點選按鈕註冊事件
        btn.onclick = function(){
            textarea.style.backgroundColor = '#fff';
            textarea.style.border = '1px solid blue';
            if(textarea.value == ''){
                alert('內容不能為空');
                return false;
            }else{
                // 釋出評論時建立動態節點，div盒子裡麵包含p和span元素
                var msg_box = document.createElement('div');
                var p = document.createElement('p')
                var span =document.createElement('span')
                // 獲取時間
                var date = new Date();
                var month = date.getMonth()+1;
                // 新增節點msg_box到父盒子b_box裡
                b_box.insertBefore(msg_box,b_box.children[0]);
                // 給盒子新增樣式
                msg_box.className='msg_box';
                // 將文字框的文字內容新增到p元素裡，並給p元素增加刪除功能
                p.innerHTML = textarea.value + "<a href='javascript:;'>刪除</a>";
                // 將時間新增到span元素裡
                span.innerHTML = date.getFullYear()+'-'+month+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
                // 給msg_box新增p和span元素
                msg_box.appendChild(p);
                msg_box.appendChild(span);
                // 發表成功後，清空文字框內容
                textarea.value='';
                // 刪除元素
                var a = document.querySelectorAll('a');
                for (var i=0;i<a.length;i++){
                    a[i].onclick = function(){
                        b_box.removeChild(this.parentNode.parentNode);
                    }
                }
            }
        }
    </script>
</body>
</html>

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

相關文章