留言板及自动客服回复功能的实例演示

留言板及自动客服回复功能的实例演示

实现效果

关键代码

//获取元素
let text = document.querySelector(".text");
let send = document.querySelector(".send");
let ul = document.querySelector(".list");
//点击按钮发送
send.onclick = function () {
  //判断输入是否为空
  if (text.value.trim() != "") {
    //添加新项目
    let li = document.createElement("li");
    li.innerHTML =
      text.value + '<button onclick="del(this.parentNode)">删除</button>';
    ul.insertAdjacentElement("afterbegin", li);
    //定时器功能,不带参数的函数可以不加引号和括号直接使用函数名调用
    setTimeout("welcome()", 2000);
    //setTimeout(welcome, 2000);
    //清空项目并重置焦点
    text.value = null;
    text.focus();
  } else {
    alert("输入信息不可为空");
    text.focus();
  }
};
//回车发送
let onclick = send.onclick;
function addMsg() {
  // console.log(event.keyCode);keyCode13回车
  if (event.keyCode === 13) {
    //禁止默认事件
    event.preventDefault();
    return onclick();
  }
}
//删除
function del(ele) {
  return confirm(`是否删除`) ? ele.remove() : false;
}
//两秒后欢迎信息
function welcome() {
  let li = document.createElement("li");
  li.textContent = "<----欢迎回复---->";
  li.className = "message";
  ul.insertAdjacentElement("afterbegin", li);
}