JS实现留言板功能

功能1：可以实现留言的显示
功能2：可以实现用户输入‘你好’、‘你吃了吗’这两句话，后台会自动回复
功能3：双击留言可以实现删除留言共呢个
功能4：实现enter键和‘Submit’键经行留言提交

html代码

<!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>留言板</title>
    <link rel="stylesheet" href="留言板.css">
    <script src="留言板.js"></script>
</head>
<body>
    <div class="containt">
        <ul class="list"></ul>
        <div class="shurukaung">
            <input type="text" class="search" onkeydown="addMsg(this)" placeholder="请输入内容" autofocus />
            <button class="submit" onclick="submit()">Submit</button>
        </div>
    </div>
</body>
</html>

CSS代码

* {
    /* 页面初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* a标签初始化 */
a {
    text-decoration: none;
    /* 去掉下划线 */
    color: #555;
}
body {
    background-color: rgb(243,245,247);
}
li {
    list-style:circle;
    /* 去掉无序列表前的小圆点 */
}
.containt {
    /* background-color: red; */
    width: 1000px;
    height:900px;   
    margin: auto;
    display: grid;
    grid-template-rows:800px 100px;
    gap:40px;
    margin-top: 80px;
}
.shurukaung {
    width: 1000px;
    height:900px;
    margin: auto;
    display: grid;
    grid-template-columns: 800px 170px;
    gap: 10px   ;
    place-content: space-between;
    /* background-color: red; */
    /* position:fixed; */
    /* margin-top:1000px; */
    /* position: relative;
    top:800px */
}
.shurukaung input {
    width: 800px;
    height: 50px;
    font-size: large;
    border-radius: 10px;
    border: 3px solid black;
    position: relative;
}
.shurukaung .submit {
    border-radius: 10px;
    background-color: #D0e1ca;
    font-size:x-large;
    font-weight:bolder;
    color:white;
}
input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.shurukaung button:focus{
    border-color:#66afe9 ;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
/* .containt {
    background-color:red;
    height: 100px;
} */
.containt .list .item1,
.containt .list .item {
    /* color:#00c5bd; */
    font-size:25px;
    font-weight: bold;
    display: grid;
    /* grid-auto-rows: 40px 100px; */
}
.containt .list .userName{
    width: 300px;
    background-color: #D0e1ca;
    color: black;
    font-size: smaller;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.containt .list .context {
    width: 300px;
    background-color: #d0d0d0;
    margin-bottom: 20px;
    border-radius: 0 0 10px 10px;
    padding-left: 10px;
}
.containt .list {
    overflow: auto ;
}
.containt .list .context1 {
    width: 300px;
    background-color: #d0d0d0;
    margin-bottom: 20px;
    border-radius: 0 0 10px 10px;
    padding-left: 10px;
}
.containt .list .item1 {
    place-content: end;
}

js代码

let i = 0;
function addMsg(ele){
    if (event.key === 'Enter'){
        // console.log(ele);
        // 获取元素
        const ul = document.querySelector('.list');
        // 判断是否为空
        // 方法trim为去掉空格
        if (ele.value.trim().length === 0){
            alert('留言不能为空');
            ele.focus();
            return false;
        }
        else if (ele.value.trim().length >= 20){
            alert('不能超过20个字符');
            return false;
        }
        // 添加新留言
        const li = document.createElement('li');
        // li.style.color='red';
        li.innerHTML = `<div class="userName">用户${++i}:&nbsp; &nbsp;&nbsp;${ele.value}</div>
        <div class="context">${ele.value}</div>`;
        li.className = 'item';
        li.ondblclick = function(){
            return confirm('是否删除') ? li.parentNode.removeChild(li) : false;
        };
        // 将输入值转为html文字值
        ul.insertAdjacentElement('afterBegin',li);
        ele.value = null;
        ele.focus();
        // return ele;
        time();
    }
}
function submit(){
    const ul = document.querySelector('.list');
    const text = document.querySelector('.search');
    // console.log(typeof(text.value));
    if (text.value.trim().length === 0){
        alert('留言不能为空');
        text.focus();
        return false;
    }
    else if (text.value.trim().length >= 10){   
        alert('不能超过三十个字符');
        return false;
    }
    const li = document.createElement('li');
    // // li.style.color='red';
    li.innerHTML = `<div class="userName">用户${++i}:&nbsp; &nbsp;&nbsp;${text.value}</div>
    <div class="context">${text.value}</div>`;
    li.className = 'item';
    li.ondblclick = function(){
        return confirm('是否删除') ? li.parentNode.removeChild(li) : false;
    };
    // // 将输入值转为html文字值
    ul.insertAdjacentElement('afterBegin',li);
    text.value = null;
    text.focus();
}
function time(){
    let x = true;
    if (x){
        setTimeout(function(){
            const ul = document.querySelector('.list');
            let ele1 = document.querySelector('.context').innerHTML;
            if (ele1.trim()==='你好'){
                const li = document.createElement('li');
                li.innerHTML=`<div class="userName">客服：</div>
                <div class="context1">你好</div>`;
                li.className = 'item1';
                ul.insertAdjacentElement('afterBegin',li);
            }
            else if (ele1.trim()==='你吃了吗'){
                const li = document.createElement('li');
                li.innerHTML=`<div class="userName">客服：</div>
                <div class="context1">我没吃</div>`;
                li.className = 'item1';
                ul.insertAdjacentElement('afterBegin',li);
            }
            return x=false;
        },1000)
    }
}

效果演示：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Python

2022-03-19 19:23:45

JS实现留言板功能

功能1：可以实现留言的显示

功能2：可以实现用户输入‘你好’、‘你吃了吗’这两句话，后台会自动回复

功能3：双击留言可以实现删除留言共呢个

功能4：实现enter键和‘Submit’键经行留言提交

html代码

CSS代码

js代码

效果演示：