Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript:留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用
Blogger Information
Blog 70
fans 4
comment 5
visits 105131
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:留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用
JiaJieChen
Original
1087 people have browsed it

留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用

1.字符串方法

方法 含义
concat() 字符串拼装
slice（） 取子串，可以正负数取数
trim() 删除字符串两边的空白字符
split（） 将字符打散成数组

①concat字符串拼装

②slice取子串

③trim删除空白字符

可以看到空格也算一个字符串，我们用trim方法删除/过滤掉空白字符串看看长度

可以看到trim过滤掉了空白字符串，只剩下两个实体字符串了

④split将字符打散成数组


可以看到用split 传入了@ 把字符串隔开成了两个数组

2.数组方法

方法 含义
push() 尾部添加，入栈
pop() 尾部删除，出栈
unsift（） 在数组头部添加
shift（） 在数组头部删除
join() 将数组转为字符串
filter（） 对每个成员应用回调函数进行处理返回true的成员
reduce（） 归纳操作，将多个成员进行统计后单值返回

①push尾部添加，入栈

②pop尾部删除，出栈

3.留言板添加数字实时统计与禁止超出功能


留言板添加数字实时统计用的是oninput方法只要值发生变化时连续触发,不等失去焦点，限制长度用的是maxlength属性限制到100.

css代码块

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background: lightseagreen;
  9. }
  11. /* from 表单请留言 */
  12. .comment {
  13.   margin: 40px auto;
  14.   display: grid;
  15.   grid-template-columns: 1fr;
  16.   grid-template-rows: 40px 1fr;
  17.   place-items: center;
  18.   gap: 5px;
  19. }
  20. .comment > label {
  21.   color: white;
  22.   font-size: 20px;
  23. }
  25. /*--------------------------*/
  27. /*留言文本框*/
  28. .comment > #content {
  29.   width: 40em;
  30.   border-radius: 0.5em;
  31. }
  32. #content:hover {
  33.   box-shadow: lightcyan 0 0 1em;
  34.   transition: 0.6s;
  35. }
  36. /*----------------------------*/
  38. /* 提交按钮样式*/
  39. .comment > .submit {
  40.   width: 10rem;
  41.   height: 2rem;
  42.   background: lightcyan;
  43.   border: none;
  44.   cursor: pointer;
  45. }
  47. .comment > .submit:hover {
  48.   box-shadow: 0 0 1em;
  49. }
  50. /* ---------------------------- */
  52. /*留言框样式*/
  53. .list {
  54.   width: 40em;
  55.   height: 30em;
  56.   margin: 0px auto;
  57.   background: white;
  58.   font-style: normal;
  59.   border-radius: 1em;
  60. }
  62. .list:hover {
  63.   box-shadow: lightcyan 0 0 1em;
  64.   transition: 0.6s;
  65. }
  66. .list > ul {
  67.   padding: 1rem;
  68.   background: none;
  69.   box-shadow: none;
  70. }
  71. .list > ul:hover {
  72.   box-shadow: none;
  73. }
  75. /* 提示*/
  76. .tishi {
  77.   color: white;
  78.   margin-top: 5px;
  79. }

html代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>留言板</title>
  8.     <style>
  9.       @import url(comment.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <form action="" class="comment">
  14.       <label for="content">请留言:</label>
  15.       <textarea
  16.         name="content"
  17.         id="content"
  18.         cols="30"
  19.         rows="10"
  20.         maxlength="100"
  21.         placeholder="请留言不要超过100个字"
  22.       ></textarea>
  23.       <div class="tishi"></div>
  24.       <span class="tishi"></span>
  25.       <button class="submit" type="button" name="submit">提交</button>
  26.     </form>
  27.     <fieldset class="list">
  28.       <legend style="font-weight: bolder; font-size: 1.3em">留言框</legend>
  29.       <ul class="listm"></ul>
  31.       <script>
  32.         //留言板功能实现绑定在留言框
  33.         //第一步拿到html里面的表单元素
  34.         //拿到form表单
  35.         const comment = document.querySelector(".comment");
  36.         //拿到文本输入框
  37.         const content = comment.content;
  38.         //拿到提交按钮
  39.         const submitBtn = comment.submit;
  40.         //拿到列表项
  41.         const Slistm = document.querySelector(".listm");
  42.         //拿到提示项
  43.         const tishi = document.querySelector(".tishi");
  45.         //文本提示事件
  46.         content.oninput = function () {
  47.           if (content.value.length > 0 && content.value.length <= 100) {
  48.             tishi.innerHTML = `您还可以输入${
  49.               100 - this.value.trim().length
  50.             }个字符`;
  52.             tishi.style.maxlength = "100";
  53.           } else {
  54.             content.oninput = function () {
  55.               tishi.innerHTML = `您还可以输入${
  56.                 100 - this.value.trim().length
  57.               }个字符`;
  58.             };
  59.           }
  60.         };
  62.         //提交按钮事件触发绑定
  63.         submitBtn.onclick = (ev) => {
  64.           // trim()发方法是过滤空格
  65.           //创建一个value变量，并且这个变量拿到输入文本框里的文字和过滤空格
  66.           let value = content.value.trim();
  68.           //做一个判断，判断文本款里的内容是否 > 0 或 <=100 个文字
  69.           if (value.length > 0 && value.length <= 100) {
  70.             //如果正确就镶嵌到列表中
  71.             //首先创建li列表，然后拿到value的文字
  72.             const newComment = document.createElement("li");
  73.             //添加li的样式
  74.             newComment.style.listStyle = "none";
  75.             newComment.style.borderBottom = "1px solid ";
  76.             newComment.style.height = "2em";
  77.             newComment.style.margin = "5px";
  78.             newComment.textContent = value;
  80.             //添加删除按钮功能
  81.             const deletBtn = document.createElement("button");
  82.             deletBtn.textContent = "删除";
  83.             deletBtn.style.width = "3rem";
  84.             deletBtn.style.height = "1.2rem";
  85.             deletBtn.style.cursor = "pointer";
  86.             deletBtn.style.background = "cyan";
  87.             deletBtn.style.border = "none";
  88.             deletBtn.style.float = "right";
  90.             //添加删除按钮事件
  91.             deletBtn.onclick = function () {
  92.               // confirm（） 是个询问弹窗，里面有确定和取消
  93.               if (confirm("是否删除")) {
  94.                 //确定是 true 取消是false
  95.                 //当前删除按钮的父节点是li，所以删除父节点就可以删除留言了
  96.                 this.parentNode.remove();
  97.                 //删除要通知客户
  98.                 alert("删除成功");
  99.                 //设置焦点
  100.                 content.focus();
  101.                 return false;
  102.               }
  103.             };
  105.             //将删除功能添加到新留言后面
  106.             newComment.append(deletBtn);
  108.             //将新留言添加到留言框中
  109.             Slistm.prepend(newComment);
  110.             content.value = null;
  111.             //并且通知客户添加成功
  112.             alert("提交成功");
  113.             //设置焦点
  114.             content.focus();
  115.           } else {
  116.             //如果不正确就弹出窗口
  117.             alert("没有内容或内容超出规定长度");
  118.             //设置焦点
  119.             content.focus();
  120.             //跳出判断
  121.             return false;
  122.           }
  123.         };
  124.       </script>
  125.     </fieldset>
  126.   </body>
  127. </html>
Correcting teacher：天蓬老师天蓬老师

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