Community Learn Tools Library Leisure
search
English
Home > List of blog posts > javascript-基础（四）实战
Blogger Information
Blog 34
fans 0
comment 0
visits 24473
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
javascript-基础（四）实战
CY明月归
Original
802 people have browsed it

1. 独立完成留言板功能,要求使用CSS进行页面美化

html部分
  1. <body style="background-color: rgb(197, 234, 255)">
  2.     <p
  3.       style="text-align: center; font-size: x-large; color: rgb(5, 119, 148)"
  4.       class="iconfont icon-liuyan"
  5.     >
  6.       留言板
  7.     </p>
  8.     <hr />
  9.     <div
  10.       style="
  11.         display: grid;
  12.         grid-template-columns: 15vw 25vw 25vw repeat(2, 1fr);
  13.         place-items: center;
  14.       "
  15.     >
  16.       <div></div>
  17.       <input
  18.         type="text"
  19.         onkeydown="addMsg()"
  20.         placeholder="回车或者点击提交留言"
  21.         style="
  22.           border: none;
  23.           border-radius: 10px;
  24.           width: 200px;
  25.           height: 22px;
  26.           padding: 3px;
  27.         "
  28.         autofocus
  29.       />
  30.       <span
  31.         onclick="msg()"
  32.         style="font-size: large; color: rgb(3, 151, 23)"
  33.         class="iconfont icon-kongxinduigou"
  34.         >提交</span
  35.       >
  36.       <span
  37.         onclick="delStep()"
  38.         style="font-size: larger; color: rgb(206, 154, 13)"
  39.         class="iconfont icon-shanchu"
  40.         >逐条
  41.       </span>
  43.       <span
  44.         onclick="delAll()"
  45.         style="font-size: larger; color: rgb(230, 9, 9)"
  46.         class="iconfont icon-shanchu"
  47.         >所有
  48.       </span>
  49.     </div>
  50.     <ul
  51.       class="box"
  52.       style="font-size: large; font-weight: bold; margin: 20px 0 0 50px"
  53.     ></ul>
  54.   </body>
js重要部分
  1. function addMsg() {
  2.   console.log(event.key);
  3.   //1、获取容器√
  4.   //2、向容器添加留言内容√
  5.   //3、清空输入框√
  6.   //4、设置焦点√
  7.   ul = document.querySelector(".box");
  8.   if (event.key == "Enter") {
  9.     inputvalue = document.querySelector("input").value.trim();
  10.     if (inputvalue.length == 0) {
  11.       alert("内容为空,请检查");
  12.     } else {
  13.       let li = document.createElement("li");
  14.       //li.textContent = inputvalue;
  15.       li.innerHTML = inputvalue + "<span onclick='del(this.parentNode)' style='font-size: larger; color: rgb(116,154, 123)' class='iconfont icon-shanchu'></span>";
  16.       ul.insertAdjacentElement("afterbegin", li);
  17.     }
  18.     document.querySelector("input").value = null;
  19.   }
  20. }

2. (选做)将留言板功能升级为自动客服回复(定时器实现)

  1. function sendMsg() {
  2.   //1、获取容器√
  3.   //2、向容器添加留言内容√
  4.   //3、清空输入框√
  5.   //4、设置焦点√
  6.   content = document.querySelector(".msg-content");
  7.   inputvalue = document.querySelector("textarea").value.trim();
  8.   if (inputvalue.length == 0) {
  9.     alert("内容为空,请检查");
  10.   } else {
  11.     let msg = document.createElement("li");
  12.     msg.innerHTML =
  13.       '<span class="saycontent">' +
  14.       inputvalue +
  15.       "</span>" +
  16.       '<span class="iconfont icon-denglu1 dl"></span>';
  17.     // msg.innerHTML = inputvalue + '<img src="imgs/cat.jpg" alt="">'
  18.     content.insertAdjacentElement("beforeEnd", msg);
  19.     setInterval("robotSay()",5000);
  20.   }
  21.   document.querySelector("textarea").value = "";
  22. }
  23. function robotSay() { 
  24.     let li = document.createElement("li");
  25.     li.className = 'rgkf'
  26.     saythings = ['你好啊！', '正在转人工客服...', '请不要着急...', '吃晚饭了吗？', '我在PHP中文网学习','再见','beybey!']
  27.     console.log(Math.floor(Math.random()*7))
  28.     let say = saythings[Math.floor(Math.random()*7)]
  29.     li.innerHTML =
  30.         '<div class="msg-content-robot"><img src="imgs/cat.jpg" alt=""><span>' + say + '</span></div>';
  31.     content.insertAdjacentElement("beforeEnd", li);
  32. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post