留言板

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>
  </head>
  <body>
    <div class="head">
      <p>留言板</p>
      <input type="text" onkeydown="addMsg(this)" name="" id="" placeholder="请输入内容" autofocus />
      <ul class="list">
        <p class="liu">留言内容</p>
        <ul class="rest"></ul>
      </ul>
    </div>
    <style>
      .head {
        width: 400px;
        height: 400px;
        margin: auto;
        border: 1px solid #000;
        background-color: bisque;
        border-radius: 50px;
      }
      .head p {
        margin-left: 170px;
      }
      .head input {
        margin-left: 100px;
        border-radius: 20px;
      }
      .head .rest {
        margin-left: -40px;
        width: 100%;
        height: 270px;
        border-top: 1px solid #000;
        border-radius: 20px;
        list-style: none;
      }
      .head .liu {
        margin-left: 120px;
      }
    </style>
    <script>
      function addMsg(ele) {
        if (event.key === "Enter") {
          let ul = document.querySelector(".rest");
          if (ele.value.trim().length === 0) {
            alert("留言不能为空");
            ele.fouse();
            return;
          }
          const li = document.createElement("li");
          const buttom = document.createElement("button");
          li.innerHTML = ele.value + '<button style="margin-left: 200px;background-color: blueviolet;color: #fff;border-radius: 15px;" onclick="del(this.parentNode)">删除</button>';
          ul.insertAdjacentElement("afterbegin", li);
          ele.value = null;
        }
      }
      function del(ele) {
        return confirm("是否删除?") ? ele.remove() : false;
      }
    </script>
  </body>
</html>

客服自动回复

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="//at.alicdn.com/t/font_3280782_jb6l34uhw5.css" />
  </head>
  <body>
    <style>
      .list {
        margin-top: 100px;
        margin-left: 700px;
        width: 400px;
        height: 600px;
        border: 3px solid blue;
        border-radius: 30px;
      }
      .head {
        background-color: blue;
        color: #fff;
        height: 50px;
        text-align: center;
        border-radius: 25px 25px 0 0;
      }
      .rest {
        height: 30px;
        background-color: #999;
        text-align: center;
      }
      .last {
        margin-top: 0px;
        border-top: 2px solid #999 !important;
      }
      .last input {
        outline: none;
        border: none;
        font-size: 18px;
        margin-top: 10px;
        width: 98%;
      }
      .bu {
        margin-top: 50px;
        margin-left: 290px;
      }
      .bu button {
        background-color: blue;
        color: #fff;
        border-radius: 10px;
        width: 100px;
        height: 30px;
      }
      .o .time {
        margin-left: 120px;
      }
      .o {
        height: 370px;
      }
      .o .ul1,
      .o .ul2 {
        list-style: none;
      }
      .iconfont {
        font-size: 34px;
      }
      .two {
        margin-left: 250px;
      }
    </style>
    <div class="list">
      <div class="head">PHP中文网</div>
      <div class="rest">客服:php中文网新手1314即将为您服务</div>
      <div class="o">
        <div class="time">2022-4-4 16:01:30</div>
        <ul class="ul1"></ul>
      </div>
      <div class="last">
        <input type="text" onkeydown="addMsg(this)" placeholder="请输入，按Enter直接发送消息" />
        <div class="bu"><button>发送</button></div>
      </div>
    </div>
    <script>
      function addMsg(ele) {
        if (event.key === "Enter") {
          const ul = document.querySelector(".ul1");
          if (ele.value.trim().length === 0) {
            alert("不能输入空消息");
            ele.focus();
            return false;
          }
          const li = document.createElement("li");
          li.className = "two";
          li.innerHTML = ele.value + ' ：<img src="user.jpg" alt="" style="height: 42%;width: 42%;">';
          // ul.insertAdjacentElement("afterbegin", li);
          ul.append(li);
          ele.value = null;
          setTimeout(function () {
            const ul1 = document.querySelector(".ul1");
            const info = ["你好", "欢迎光临", "你慢走", "有空再来"];
            const tmp = info[Math.floor(Math.random() * 4)];
            const replay = document.createElement("li");
            replay.innerHTML = '<span class="iconfont icon-kefuyouxian"></span>：' + tmp;
            ul1.append(replay);
            sum += 1;
          }, 2000);
        }
      }
    </script>
  </body>
</html>

留言板功能与客服自动回复

留言板

HTML

客服自动回复

HTML

相关文章