快捷導(dǎo)航

JavaScript實現(xiàn)留言板實戰(zhàn)案例

更新時間：2023年07月08日 11:57:27 作者：恁..

這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)留言板的相關(guān)資料,使用JavaScript來編寫留言板功能相信大家都不陌生,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考下

1.案例說明：

利用JavaScript、css以及html制作一個簡易的留言板

要求在頁面文本框中輸入一些文字之后，點擊“提交”按鈕，就可以讓輸入的文字和當(dāng)前留言時間顯示在下面，重新輸入一些文字，再點擊提交，就可以讓新發(fā)布的內(nèi)容顯示在最上面。點擊后面的刪除，就可以刪除已經(jīng)提交后的留言。

【案例分析】利用節(jié)點的創(chuàng)建、添加和刪除相關(guān)知識完成一個簡易的留言板功能。在頁面中實現(xiàn)單擊“提交”按鈕動態(tài)創(chuàng)建一個li元素，添加到ul里面。

2.html部分

主要有一個文本框，一個提交按鈕，和一個展示留言部分的ul列表。

<div id="mgs">
        <textarea id="text"></textarea><br>
        <input type="button" id="btn" value="提交">
        <ul class="list"></ul>
    </div>

3.css部分

    * {
        margin: 0;
        padding: 0;
    }
    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }
    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }
    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }
    span {
        float: right;
    }

清除默認(rèn)樣式，設(shè)置文本框的樣式（字體黑色，斜體，在瀏覽器中居中，字體大小，內(nèi)邊距），去除默認(rèn)列表的樣式，span主要是用來包當(dāng)前留言時間的。

4.js代碼

獲取按鈕元素，獲取ul列表元素，獲取文本框元素

            var btn = document.getElementById('btn');
            var list = document.querySelector('.list');
            var text = document.getElementById('text');

綁定按鈕點擊事件：

當(dāng)文本框沒有輸入內(nèi)容的時候，點擊提交瀏覽器提示“你沒有輸入內(nèi)容”，

  btn.onclick = function () {
                if (text.value == '') {
                    alert('你沒有輸入內(nèi)容。')
                } else {

當(dāng)輸入內(nèi)容后，創(chuàng)建一個li元素節(jié)點，在li.li.innerHTML里面輸入文本框內(nèi)容和當(dāng)前時間和一個刪除按鈕，將li添加到ul中，并將文本框內(nèi)已輸入的內(nèi)容清除。

 var li = document.createElement('li');
 li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>刪除</button></span>'
 text.value = '';
 list.insertBefore(li, list.children[0]);

獲取當(dāng)前輸入內(nèi)容的時間

var time = new Date();
var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>刪除</button></span>';

給刪除按鈕綁定點擊刪除事件。獲取所有的button按鈕，點擊button按鈕時，刪除li（刪除button按鈕的父節(jié)點的父節(jié)點）

   var allB = document.querySelectorAll('button');
                    for (var i = 0; i < allB.length; i++) {
                        allB[i].onclick = function () {
                            list.removeChild(this.parentNode.parentNode);
                        }

5.全部代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }
    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }
    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }
    span {
        float: right;
    }
</style>
<body>
    <div id="mgs">
        <textarea id="text"></textarea><br>
        <input type="button" id="btn" value="提交">
        <ul class="list"></ul>
    </div>
        <script>
            var btn = document.getElementById('btn');
            var list = document.querySelector('.list');
            var text = document.getElementById('text');
            btn.onclick = function () {
                if (text.value == '') {
                    alert('你沒有輸入內(nèi)容。')
                } else {
                    var li = document.createElement('li');
                     var time = new Date();
                    var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
                    li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>刪除</button></span>';
                    text.value = '';
                    list.insertBefore(li, list.children[0]);
                    var allB = document.querySelectorAll('button');
                    for (var i = 0; i < allB.length; i++) {
                        allB[i].onclick = function () {
                            list.removeChild(this.parentNode.parentNode);
                        }
                    }
                }
            }
        </script>
</body>
</html>