js原生代码留言板小demo 添加 删除 排序 时间戳 下拉框

---

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .topInputBox{
        width: 600px;
        background-color: #333;
        display: flex;justify-content:space-between;
        padding: 12px 0 12px 12px;
        position: relative;
        margin: auto;
    }
    .topInputBox > input{
        flex: 1; 
        border: none;
        height: 32px;
        border-radius: 4px;
        text-indent: 10px;
    }
    .topInputBox > input:focus {
        outline: none;
    }
    .topInputBox > div:nth-child(3){
        cursor: pointer; 
        width: 80px;
        text-align: center;
        line-height: 32px;
        color: #fff;
    }
    #TextBox>div{
        display: flex;
        justify-content: space-between;
        height: 44px;
        margin-bottom: 10px;
    }
    .ListDel:hover{
        cursor: pointer;
        background: red !important;
        color: #fff !important;
    }
    .HoverBjList:hover{
        background: #eee;
    }
</style>



<div style="margin-top:20px;">
        <div class="topInputBox">

            <input 
            onblur="getBlur()" 
            onfocus="myFunction()" 
            onkeyup="if(event.keyCode===13){ getLeaveText();document.getElementById('dropDown').style.display = 'none'}" 
            type="text" id="leaveText" placeholder="请输入留言内容" 
            oninput="getInputValue(this.value)">
            <div id="dropDown" style="overflow: auto;position: absolute;top: 47px;left: 12px;width: 520px;height: 204px;background: #fff; display: none;box-shadow: 0px 0px 4px #999;
            border-radius: 4px;">
                <button onclick="getClick()">可以</button>
            </div>
            <div onClick="getLeaveText()">提交</div>
        </div>
        <div id="TextBox" style="margin: auto;width: 600px;">
            <!-- <span>留言一</span> -->
        </div>
    </div>




<script>
        let leaveText;
        let leaveTextArray=[]
        var UlArray = ''
        var StringArray=[
                "感谢店家的精美包装，给五星好评！",
                "售后服务非常到位，态度很好！",
                "这次购物真的很愉快，谢谢！",
                "店家的商品真的很赞，很满意！",
                "产品收到了，与描述完全一致，赞一个！",
                "非常喜欢这家店的风格，下次还会再来！",
                "产品使用效果很棒，值得推荐！",
                "店家的宝贝简直太棒了，满分好评！",
                "这件商品真的很不错，物有所值！",
                "购物体验很愉快，特别满意！"
            ]
        function getLeaveText(){
            if(document.getElementById('leaveText').value == '')  return alert('请输入留言内容')
            document.getElementById('leaveText').value = ''
            leaveTextArray.push({text:leaveText,id:new Date().getTime()})
            leaveText = ''
            forText()
        }
        function getInputValue(e){ 
            leaveText = e
            console.log(leaveText)
        }

        function forText(){
            leaveTextArray.sort((a,b)=> {return b.id-a.id;})
            var str='';
            leaveTextArray.forEach((temp,id)=>{
                str += `
                    <div style="align-items: center;">
                        <div style="display:flex;align-items: center;">
                            <div style="width:34px;height:34px;background:#999;margin-right:12px;border-radius: 4px;border: 1px solid #eee;">
                                <img style="width:100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5563f052-0f0b-475a-b14f-eea08dc82117%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707563432&t=7d3b465b8c4dd04d8f6ffb328e79b658" alt=""> 
                            </div>
                            <div >
                                <span style="font-size:15px;">${temp.text}</span>    
                                <p style="font-size:12px;color:#999;">${timeStamp2String(temp.id)}</p>
                            </div>
                        </div>
                        <button onClick="getDel(${temp.id})" style="border: none;background: #fff;color: #999;font-size: 12px;text-align: center;border-radius: 4px;
                            display: block;width: 34px;height: 28px;" class="ListDel">删除</button>    
                    </div>
                `
            })
            document.getElementById('TextBox').innerHTML = str
        }
        forText()
        function getDel(id){
            // 获取数组 id 时间戳相同的索引
            let indexToRemove = leaveTextArray.findIndex(item => item.id === id);
            if (indexToRemove !== -1) {
                leaveTextArray.splice(indexToRemove, 1);
                forText()
            }
        }
        function myFunction(){
            document.getElementById('dropDown').style.display = 'block'
        }
       
        function getBlur(){
            // 延时关闭 下拉框
            setTimeout(()=> document.getElementById('dropDown').style.display = 'none', 150);
        }

        StringArray.forEach((temp,i)=>{
            UlArray+=`
                <div onclick="getStringArray(${i})" style="height: 34px;line-height:34px;font-size:14px;padding-left:10px;cursor: pointer;" class="HoverBjList">${temp}</div>
            `
        })
        document.getElementById('dropDown').innerHTML = UlArray
        function getStringArray(e){
            document.getElementById('leaveText').value = StringArray[e]
            leaveText = StringArray[e]
        }

        // 时间戳转为时间
        function timeStamp2String(timeStamp) {
            var date = new Date();
            date.setTime(timeStamp);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        }
    </script>