JS實現簡單留言板功能

2022-08-25 10:01:45

本文範例為大家分享了JS實現簡單留言板的具體程式碼，供大家參考，具體內容如下

言歸正傳，之前的案例相信大家都已經完全弄清楚了，還記得我們之前統計字數的那個案例嗎？忘記的可以再去翻閱一下，今天就是在這個方法的基礎上，把它變成一個留言版，就像我們之前的評論一樣，是不是很期待呢？先來看一下效果圖

輸入暱稱，選擇頭像，輸入留言，點選廣播就能夠在下面顯示出來了，是不是很nice呢，具體怎麼實現的呢，我們來看程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        *{
            margin: 0 auto;
        }
        #box{
            width: 50%;
            border: 4px solid olivedrab;
            padding: 10px 30px;
            height: 800px;
        }
        #box img{
            width: 30px;
            height: 30px;
            margin: 10px 0;
        }
        #tex{
            width: 100%;
            margin: 10px 0;
        }
        .count{
            float: right;
            color: silver;
        }
        #btn{
            width: 50px;
            height: 25px;
            background: orange;
            color: white;
            border-radius: 5px;
            outline: none;
            border: 0px;
            line-height: 25px;
        }
        #content{
            margin: 50px 0;
        }
        .list{
            padding: 5px;
            height: 80px;
            border-bottom: 1px solid black;
            position: relative;
        }
        .list button{
            display: none;
            position: absolute;
            right: 0;
            top: 40px;
            background: orange;
            color: white;
            border-radius: 5px;
            outline: none;
            border: 0px;
        }
    </style>
</head>
<body>
    <div id="box">
        暱稱：<input type="text" id="userName"><br/>
        請選擇頭像<span>
            <img src = "imgs/01.jpg" align="absmiddle"/>
            <img src = "imgs/02.jpg" align="absmiddle"/>
            <img src = "imgs/03.jpg" align="absmiddle"/>
            <img src = "imgs/04.jpg" align="absmiddle"/>
        </span>
        <textarea name="" id="tex" cols="30" rows="10" maxlength="150" placeholder="請輸入留言"></textarea>
        <div class="count">還可以輸入
            <span id="left">150</span>個字
            <button id="btn">廣播</button>
        </div>


        <div id="content">
            <!-- <div id="list">
             <span>暱稱</span>
             <span>內容</span>
             <div>時間</div>
             <button>刪除</button>
        </div> -->
        </div>
    </div>

    <script>
        //頁面載入渲染
        window.onload = function(){
            if(localStorage.arr1113){
                arr = JSON.parse(localStorage.arr1113)
                show(arr)
            }else{
                arr = []
            }
        }
        //獲取Dom元素
        var userName = document.querySelector("#userName")
        var btn = document.getElementById("btn")
        var left = document.getElementById("left")
        var txt = document.getElementById("tex")
        //計算剩餘字元
        txt.oninput = function(){
            var len = txt.maxLength-txt.value.length
            left.innerHTML = len
        }
        //選擇圖片
        var pic = document.querySelectorAll("#box img")
        var src = ''
        for(var i = 0;i<pic.length;i++){
            pic[i].onclick = function(){
                for(var j = 0;j<pic.length;j++){
                    pic[j].style.border =""
                }
                this.style.border = "1px solid red"
                src = this.src
            }
        }
        //點選廣播
        var arr = []
        btn.onclick = function(){
            if(userName.value==''||txt.value ==''){
                alert("請輸入暱稱和留言")
            }else{
            var obj = {
                id:+new Date(),
                name:userName.value,
                content:txt.value,
                time:timer(),
                src:src
            }
            arr.unshift(obj)
            userName.value = ''
            txt.value = ''
            localStorage.arr1113 = JSON.stringify(arr)
            show(arr)
        }
        }
        //渲染函數
        function show(arr){
            var str = ''
            var contents = document.getElementById("content")
            contents.innerHTML = ''
            for(var i = 0;i<arr.length;i++){
                str +=`
                <div class = "list">
                <img src = "${arr[i].src}" align="absmiddle">
                <span>${arr[i].name} </span>
                <span>${arr[i].content}</span>
                <br/>
                <span>${arr[i].time}</span>
                <button οnclick="del(${arr[i].id})">刪除</button>
                </div>
                `
            }
            contents.innerHTML = str
        }
        //刪除函數
        function del(id){
            arr.forEach(function(ele,index){
                if(id ==arr[index].id){
                     arr.splice(index,1)
                     show(arr)
                     localStorage.arr1113 = JSON.stringify(arr)
                }
            })
        }
        //獲取時間
        function timer(){
            var now = new Date()
            var month = now.getMonth()+1
            var day = now.getDate()
            var hours = now.getHours()
            var min = now.getMinutes()
            var result = check(month)+"月"+check(day)+"日  "+check(hours)+":"+check(min)
            return result
        }
        //檢查時間少於10前面添上0
        function check(n){
            n = n<10 ? "0"+n : n
            return n
        }
        //移入移出效果函數----利用事件委託處理
        var contents = document.getElementById("content")
            contents.onmouseover = function(event){
                var enent = event || window.event
                var target = event.target || window.srcElement
                if(target.nodeName.toLowerCase() == "div"){
                    target.style.background = "gray"
                    var delBtn = target.lastElementChild
                    delBtn.style.display = "block"
                }
            }
            contents.onmouseout = function(event){
                var enent = event || window.event
                var target = event.target || window.srcElement
                if(target.nodeName.toLowerCase() == "div"){
                    target.style.background = ""
                    var delBtn = target.lastElementChild
                    delBtn.style.display = ""
                }
            }
    </script>
</body>
</html>

主要是Js的程式碼，css樣式可以按照自己的想法去操作，打造屬於自己的style

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JS實現簡單留言板功能

熱門文章