JS实现简单留言板功能

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。