天天看點

JavaScript(JS)網頁--留言闆JavaScript(JS)網頁–留言闆

JavaScript(JS)網頁–留言闆

在使用網頁進行沖浪時,經常會發表自己的留言。釋出留言的留言闆是怎麼做的呢?

制作一個簡單的留言闆。

JavaScript(JS)網頁--留言闆JavaScript(JS)網頁–留言闆

首先需要一個textarea框,旁邊放置一個按鈕,然後需要一個ul标簽,裡面不需要放置li元素,用CSS加以簡單的修飾。

緊接着擷取元素,在點選按鈕後,建立一個li,将文本框裡面的指派給li,将li插入到ul的第一個孩子的前面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言釋出</title>
    <style>
        body {
            margin: 200px;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style: none;
            width: 500px;
            height: 30px;
            margin-top: 5px;
            border: 1px solid black;
            background-color: pink;
        }
        textarea{
            width: 200px;
            height: 80px;
        }  
    </style>
</head>
<body>
    <textarea name="" id=""></textarea>
    <button>釋出</button>
    <ul>
        
    </ul>
    <script>
        //擷取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注冊時間
        btn.onclick = function(){
            if(text.value == ''){
                alert("您沒有輸入内容。")
                return false;
            }else{
                var li = document.createElement('li');
                li.innerHTML = text.value;
                //ul.appendChild(li);
                ul.insertBefore(li,ul.children[0])
            }
            text.value='';
            
        }
    </script>
</body>
</html>
           

對留言闆的留言進行删除:删除留言

繼續閱讀