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

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代码块

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: lightseagreen;
}
/* from 表单请留言 */
.comment {
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px 1fr;
  place-items: center;
  gap: 5px;
}
.comment > label {
  color: white;
  font-size: 20px;
}
/*--------------------------*/
/*留言文本框*/
.comment > #content {
  width: 40em;
  border-radius: 0.5em;
}
#content:hover {
  box-shadow: lightcyan 0 0 1em;
  transition: 0.6s;
}
/*----------------------------*/
/* 提交按钮样式*/
.comment > .submit {
  width: 10rem;
  height: 2rem;
  background: lightcyan;
  border: none;
  cursor: pointer;
}
.comment > .submit:hover {
  box-shadow: 0 0 1em;
}
/* ---------------------------- */
/*留言框样式*/
.list {
  width: 40em;
  height: 30em;
  margin: 0px auto;
  background: white;
  font-style: normal;
  border-radius: 1em;
}
.list:hover {
  box-shadow: lightcyan 0 0 1em;
  transition: 0.6s;
}
.list > ul {
  padding: 1rem;
  background: none;
  box-shadow: none;
}
.list > ul:hover {
  box-shadow: none;
}
/* 提示*/
.tishi {
  color: white;
  margin-top: 5px;
}

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>
    <style>
      @import url(comment.css);
    </style>
  </head>
  <body>
    <form action="" class="comment">
      <label for="content">请留言:</label>
      <textarea
        name="content"
        id="content"
        cols="30"
        rows="10"
        maxlength="100"
        placeholder="请留言不要超过100个字"
      ></textarea>
      <div class="tishi"></div>
      <span class="tishi"></span>
      <button class="submit" type="button" name="submit">提交</button>
    </form>
    <fieldset class="list">
      <legend style="font-weight: bolder; font-size: 1.3em">留言框</legend>
      <ul class="listm"></ul>
      <script>
        //留言板功能实现绑定在留言框
        //第一步拿到html里面的表单元素
        //拿到form表单
        const comment = document.querySelector(".comment");
        //拿到文本输入框
        const content = comment.content;
        //拿到提交按钮
        const submitBtn = comment.submit;
        //拿到列表项
        const Slistm = document.querySelector(".listm");
        //拿到提示项
        const tishi = document.querySelector(".tishi");
        //文本提示事件
        content.oninput = function () {
          if (content.value.length > 0 && content.value.length <= 100) {
            tishi.innerHTML = `您还可以输入${
              100 - this.value.trim().length
            }个字符`;
            tishi.style.maxlength = "100";
          } else {
            content.oninput = function () {
              tishi.innerHTML = `您还可以输入${
                100 - this.value.trim().length
              }个字符`;
            };
          }
        };
        //提交按钮事件触发绑定
        submitBtn.onclick = (ev) => {
          // trim()发方法是过滤空格
          //创建一个value变量，并且这个变量拿到输入文本框里的文字和过滤空格
          let value = content.value.trim();
          //做一个判断，判断文本款里的内容是否 > 0 或 <=100 个文字
          if (value.length > 0 && value.length <= 100) {
            //如果正确就镶嵌到列表中
            //首先创建li列表，然后拿到value的文字
            const newComment = document.createElement("li");
            //添加li的样式
            newComment.style.listStyle = "none";
            newComment.style.borderBottom = "1px solid ";
            newComment.style.height = "2em";
            newComment.style.margin = "5px";
            newComment.textContent = value;
            //添加删除按钮功能
            const deletBtn = document.createElement("button");
            deletBtn.textContent = "删除";
            deletBtn.style.width = "3rem";
            deletBtn.style.height = "1.2rem";
            deletBtn.style.cursor = "pointer";
            deletBtn.style.background = "cyan";
            deletBtn.style.border = "none";
            deletBtn.style.float = "right";
            //添加删除按钮事件
            deletBtn.onclick = function () {
              // confirm（） 是个询问弹窗，里面有确定和取消
              if (confirm("是否删除")) {
                //确定是 true 取消是false
                //当前删除按钮的父节点是li，所以删除父节点就可以删除留言了
                this.parentNode.remove();
                //删除要通知客户
                alert("删除成功");
                //设置焦点
                content.focus();
                return false;
              }
            };
            //将删除功能添加到新留言后面
            newComment.append(deletBtn);
            //将新留言添加到留言框中
            Slistm.prepend(newComment);
            content.value = null;
            //并且通知客户添加成功
            alert("提交成功");
            //设置焦点
            content.focus();
          } else {
            //如果不正确就弹出窗口
            alert("没有内容或内容超出规定长度");
            //设置焦点
            content.focus();
            //跳出判断
            return false;
          }
        };
      </script>
    </fieldset>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：看来你是老同学了, 加油

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

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

0条评论

作者最新博文

JavaScript:时间对象，实例演示右下角广告图

2021-04-23 00:09:02