一、留言本实例

熟悉事件添加及传递机制，创建留言本实例。具备留言字数实时统计与禁止超出功能。

输入留言内容：

留言按钮提交：

删除留言信息：

html+css+js代码:

  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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       li {
  15.         list-style: none;
  16.       }
  17.       body {
  18.         background-color: rgb(174, 236, 236);
  19.         color: #555;
  20.       }
  21.       .comment {
  22.         width: 85%;
  23.         margin: 1em auto;
  25.         display: grid;
  26.         gap: 0.5em;
  27.       }
  28.       .comment #content {
  29.         resize: none;
  30.         border: none;
  31.         padding: 0.5em;
  32.         outline: none;
  33.         border-radius: 10px;
  34.       }
  35.       .comment #content:focus,
  36.       .comment #content:hover {
  37.         box-shadow: 0 0 8px steelblue;
  38.         transition: 0.6s;
  39.       }
  40.       .comment .submit {
  41.         width: 30%;
  42.         margin-left: auto;
  43.         background-color: lightseagreen;
  44.         border: none;
  45.         border-radius: 10px;
  46.         outline: none;
  47.         color: white;
  48.         height: 2.5em;
  49.       }
  50.       .comment .submit:hover {
  51.         background-color: seagreen;
  52.         transition: 0.6s;
  53.         cursor: pointer;
  54.       }
  55.       .contentlist {
  56.         width: 85%;
  57.         margin: auto;
  58.         padding: 0.5em;
  59.         border-radius: 10px;
  60.       }
  61.       .contentlist .list {
  62.         width: 100%;
  63.         /* background-color: yellow; */
  64.         margin: auto;
  65.         padding: 1em;
  66.         color: #666;
  67.       }
  69.       .del-btn {
  70.         background-color: wheat;
  71.         color: red;
  72.         padding: 0.5em 1em;
  73.         /* height: 2.2em; */
  74.         border: none;
  75.         outline: none;
  76.       }
  77.       .del-btn:hover {
  78.         cursor: pointer;
  79.         background-color: lime;
  80.       }
  81.     </style>
  82.   </head>
  83.   <body>
  84.     <form class="comment" method="post">
  85.       <label for="content">请您留言：</label>
  86.       <textarea name="content" id="content" cols="30" rows="6" placeholder="请在此留言"></textarea>
  87.       <label class="tishi"></label>
  88.       <button type="button" name="submit" class="submit">提交</button>
  89.     </form>
  90.     <hr width="100%" align="center" />
  91.     <fieldset class="contentlist">
  92.       <legend>留言列表</legend>
  93.       <ul class="list"></ul>
  94.     </fieldset>
  96.     <script>
  97.       // 获取元素
  98.       const comment = document.querySelector(".comment");
  99.       const content = comment.content;
  100.       const submitBtn = comment.submit;
  101.       const contishi = document.querySelector(".tishi");
  102.       const comlist = document.querySelector(".list");
  104.       //输入留言提示，超出限制字数截取显示
  105.       content.oninput = (ev) => {
  106.         if (content.value.trim().length < 100) {
  107.           contishi.textContent = `还可以输入${100 - content.value.trim().length}个字`;
  108.         } else {
  109.           contishi.textContent = `还可以输入0个字`;
  110.           content.value = content.value.substr(0, 100);
  111.         }
  112.       };
  114.       // 提交留言按钮事件
  115.       let i = 0;
  116.       submitBtn.onclick = (ev) => {
  117.         ++i;
  118.         let str = i + "、" + content.value;
  119.         // 将留言插入到列表中
  120.         const newComment = document.createElement("li");
  121.         newComment.textContent = str;
  122.         newComment.style.borderBottom = "1px solid white";
  123.         newComment.style.minHeight = "2em";
  125.         // 为每一条留言添加删除按钮
  126.         const delBtn = document.createElement("button");
  127.         delBtn.textContent = "删除";
  128.         delBtn.style.float = "right";
  129.         delBtn.classList.add("del-btn");
  130.         //删除留言按钮事件
  131.         delBtn.onclick = function () {
  132.           if (confirm("是否删除")) {
  133.             // 确定：true,取消: false
  134.             this.parentNode.remove();
  135.             alert("删除成功");
  136.             content.focus();
  137.             return false;
  138.           }
  139.         };
  141.         // 判断留言长度，添加列表
  142.         if (content.value.length > 0 && content.value.length <= 100) {
  143.           // 将删除按钮添加到新留言的后面
  144.           newComment.append(delBtn);
  145.           // 将新留言添加到列表的头部
  146.           comlist.prepend(newComment);
  147.           // 通知用户
  148.           alert("留言成功");
  149.           content.value = null;
  150.           contishi.textContent = null;
  151.           content.focus();
  152.         } else {
  153.           alert("未输入留言或留言内容超过100字");
  154.           content.focus();
  155.           return false;
  156.         }
  157.       };
  158.     </script>
  159.   </body>
  160. </html>

二、字符串数组方法

1、字符串

方法含义
concat（）字符串拼装
slice（）取子串，可以正负数取数
trim（）删除字符串两边的空白字符
split（）将字符打散成数组
  1. //concat() 拼接,返回由两个数组组合而成的新数组
  2. arr = ['a','b','c','d'];
  3. console.log(arr.concat(['aa','bb'])); //[a,b,c,d,aa,bb]
  1. //slice(start, end) 从字符串中截取,不改变原字符串
  2. const email = 'tp@qq.com';
  3. let emailS = email.slice(3,);
  4. console.log(emailS); // qq.com
  1. //trim()删除两端空白字符
  2. let str = "     Hello Edureka!     ";
  3. console.log(str.length); // 24
  4. console.log(str.trim()); // Hello Edureka!
  5. console.log(str.trim().length); // 14
  1. //split("") 把字符串拆分为数组
  2. let str = "abcdefg";
  3. let res = str.split('');
  4. console.log(res); // ["a", "b", "c", "d", "e", "f", "g"]
  5. // 从一个邮箱中解析出用户名和邮箱地址
  6. let email = "abc@qq.com";
  7. res = email.split("@");
  8. console.log(email.split("@")); //  ["abc", "qq.com"]
  9. console.log("userName=",res[0]); // abc
  10. console.log("emailAddress=",res[1]); // qq.com

2、数组

方法含义
push（）尾部添加，入栈
pop（）尾部删除，出栈
unsift（）在数组头部添加
shift（）在数组头部删除
join（）将数组转为字符串
filter（）“过滤”功能，对每个成员应用回调函数进行处理返回true的成员
reduce（）归纳操作，将多个成员进行统计后单值返回
  1. //push() 数组尾部添加元素, 返回数组长度
  2. arr = ['a','b','c','d'];
  3. console.log(arr.push('e')); //5
  4. console.log(arr); //[a,b,c,d,e]
  1. //pop() 从数组尾部取出一个, 返回取出的元素
  2. arr = ['a','b','c','d'];
  3. console.log(arr.pop()); //d
  4. console.log(arr); //[a,b,c]
  1. //unshift 从数组头部添加元素
  2. arr = ['a','b','c','d'];
  3. console.log(arr.unshift('aa'));
  4. console.log(arr); //[aa,a,b,c,d]
  1. //shift 从数组头部取出一个元素
  2. arr = ['a','b','c','d'];
  3. console.log(arr.shift()); //5
  4. console.log(arr); //[b,c,d]
  1. //join() 将数组元素以指定字符拼接为字符串，返回一个字符串，原数组不变。
  2. arr = ['a','b','c','d'];
  3. console.log(arr.join()); //'a,b,c,d'
  4. let arr = [1,2,3,4,5,6];
  5. console.log(arr.join()); // 1,2,3,4,5,6
  6. console.log(arr.join("-")); // 1-2-3-4-5-6
  1. //filter() 对数组的每个元素调用定义的回调函数，并返回回调函数为其返回 true 的数组。
  2. arr = [1,2,3,4,5];
  3. console.log(arr.filter((ev)=>ev%2)); //取奇数
  1. //reduce()方法从数组的第一项开始，逐个遍历到最后。
  2. res = [1, 2, 3, 4, 5];
  3.       //   res = arr.reduce(function (prev, curr) {
  4.       //     return (prev += curr);
  5.       //   });
  7. res = arr.reduce((prev, curr) => (prev += curr), 20); // 可以增加个初始值20
  8. console.log(res); // 35

更多相关文章

  1. 从键盘输入若干个学生成绩，输入负数作为输入结束标记，用数组和函数
  2. 留言板添加字数实时统计和超出判断以及数组字符串方法
  3. 留言小作业
  4. 购物车功能：全选与取消，自动计算----0412
  5. 0415作业-Vue常用指令及方法
  6. 为留言板添加字数实时统计与禁止超出功能; 2. 自选一些字符串和
  7. 留言板，字符串和数组方法 ----0407
  8. js之购物车自动计算
  9. 当面试官问我ArrayList和LinkedList哪个更占空间时，我这么答让他

随机推荐

  1. android apache HTTP demo 互联网访问
  2. Ubuntu编译Android整个系统以及编译指定
  3. android 闪光灯控制
  4. Android中使用Intent实现界面跳转
  5. 【移动开发】Android中各种xml汇总
  6. 关于android.R.id.text1
  7. android界面开发小结——android笔记---
  8. Android Studio解决plugin with id 'andr
  9. 动态绘制CheckedTextView
  10. Android UID 问题 uid 改变进行了覆盖安