JavaScript实现留言板（粗糙版）

作者： 作者的头像   福心 ,  2023-08-03 04:08:24 ,  所有人可见 ,  阅读 121

1


留言板.png 

<!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>
        .board {
            width: 460px;
            height: 300px;
            /* background-color: aqua; */
        }

        #board {
            font-size: 2em;
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="board">
        <p>留言板</p>
        <textarea name="board" id="board"></textarea>
        <button>发布</button>
    </div>

    <div class="info">
        <ul>
            <span>暂无留言</span>
        </ul>
    </div>

    <script>
        let board = document.querySelector('textarea');
        let btn = document.querySelector('button');
        let span = document.querySelector('span');
        btn.onclick = function () {
            let date = new Date();
            let time = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`
            // 先拿到留言板的内容
            let c = board.value;
            if (c.trim().length != 0) {
                // 添加li元素
                let li = document.createElement('li');
                let ul = document.querySelector('ul');
                ul.insertBefore(li, ul.children[0]);
                ul.children[0].innerHTML = c + '<br>' + time;
                span.style.display = 'none'
            } else {
                alert('不可空白留言哦！')
            }
            board.value = ''
        }
    </script>

</body>

</html>

0 评论

1024
x