search

博客列表 >留言板，字符串和数组方法 ----0407

留言板，字符串和数组方法 ----0407

木樨
木樨原创
2021年04月19日 21:57:56651浏览

1.实战：留言板(为留言板添加字数实时统计与禁止超出功能)

image.png

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.   <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.   <form class="comment">
  12.     <label for="content">请留言:</label>
  13.     <!-- maxlength="100" 设置文本可输入的最大长度 -->
  14.     <textarea name="content" id="content" placeholder="不要超过100个字符" maxlength="100" cols="30" rows="5""></textarea>
  15.     <span class="notice">还可以输入100字</span>
  16.     <button class="submit" type="button" name="submit">提交</button>
  17.   </form>
  18.   <ul class="list"></ul>
  19.   <script>
  20.     // 获取元素
  21.     const comment = document.querySelector(".comment");
  22.     const content = comment.content;
  23.     const submitBtn = comment.submit;
  24.     const commentList = document.querySelector(".list");
  25.     const notice = document.querySelector(".notice");
  27.     // 提交按钮的点击事件
  28.     submitBtn.onclick = (ev) => {
  29.       // 获取用户的留言内容
  30.       let value = content.value;
  31.       // 创建留言元素样式
  32.       const newComment = document.createElement("li");
  33.       newComment.textContent = value;
  34.       newComment.style.borderBottom = "1px solid white";
  35.       newComment.style.minHeight = "3em";
  37.       // 添加删除留言的功能，为每条留言添加删除按钮
  38.       const deleteBtn = document.createElement("button");
  39.       deleteBtn.textContent = "删除";
  40.       deleteBtn.style.float = "right";
  41.       deleteBtn.classList.add("del-btn");
  42.       // 用户点击删除留言后的操作
  43.       deleteBtn.onclick = function(){
  44.         if(confirm('是否删除？')){
  45.           // 确定：true,取消: false
  46.           this.parentNode.remove();
  47.           alert("删除成功！")
  48.           content.focus();
  49.           return false;
  50.         }
  51.       }
  53.       // 将留言控制在 0~100 字
  54.       if(value.length > 0 && value.length <= 100){
  55.         // 将删除按钮追加到新留言的后面
  56.         newComment.append(deleteBtn);
  57.         // 将留言追加到页面中显示
  58.         commentList.prepend(newComment);
  59.         alert('留言成功');
  60.         content.value=null;
  61.          notice.textContent = `还可以输入100字`;
  62.         content.focus();
  63.       }else{
  64.         alert("没有内容或内容超出规定长度");
  65.         content.focus();
  66.         return false;
  67.       }
  68.     }
  70.     // oninput 监控输入, 提示信息
  71.     content.oninput=function(){
  72.       let textLength = content.value.trim().length;
  73.       notice.textContent = `还可以输入${100 - textLength}字`;
  74.     }
  75.   </script>
  76. </body>
  77. </html>

css 文件：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. li {
  7.   list-style: none;
  8. }
  9. body {
  10.   background-color: rgb(174, 236, 236);
  11.   color: #555;
  12. }
  13. .comment {
  14.   width: 85%;
  15.   margin: 1em auto;
  16.   display: grid;
  17.   gap: 0.5em;
  18. }
  19. .comment #content {
  20.   resize: none;
  21.   border: none;
  22.   padding: 0.5em;
  23.   outline: none;
  24. }
  25. .comment #content:focus,
  26. .comment #content:hover {
  27.   box-shadow: 0 0 8px steelblue;
  28.   transition: 0.6s;
  29. }
  30. .comment .submit {
  31.   width: 30%;
  32.   margin-left: auto;
  33.   background-color: lightseagreen;
  34.   border: none;
  35.   outline: none;
  36.   color: white;
  37.   height: 2.5em;
  38. }
  39. .comment .submit:hover {
  40.   background-color: seagreen;
  41.   transition: 0.6s;
  42.   cursor: pointer;
  43. }
  44. .list {
  45.   width: 80%;
  46.   /* background-color: yellow; */
  47.   margin: auto;
  48.   padding: 1em;
  49. }
  51. .del-btn {
  52.   background-color: wheat;
  53.   color: #000;
  54.   padding: 0.5em 1em;
  55.   /* height: 2.2em; */
  56.   border: none;
  57.   outline: none;
  58. }
  59. .del-btn:hover {
  60.   cursor: pointer;
  61.   background-color: rgb(31, 230, 163);
  62. }

2. 自选一些字符串和数组方法进行案例演示

字符串方法

1)查找子字符串位置

  • indexOf()
  • lastIndexOf()
  • search()
  1. var str = "The full name of China is the People's Republic of China.";
  2. // indexOf():返回子字符串在字符串中第一次出现的位置(从 0 开始计算),不存在返回-1。对大小写敏感
  3. console.log(str.indexOf("China")); // 17
  4. // lastIndexOf():返回子字符串abc在字符串中最后一次出现的位置,对大小写敏感
  5. console.log(str.lastIndexOf("China")); // 51
  6. // search():方法搜索特定值的字符串，并返回匹配的位置
  7. console.log(str.search("locate")); // -1

indexOf() 与 search() 的区别？
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

2)截取

  • substr(起始位置[,截取长度])
  • substring(起始位置,结束位置)
  • slice(起始位置,结束位置)
  1. let str = "Apple, Banana, Mango";
  2. // substr(起始位置[,截取长度]):截取长度不写则代表截取到字符串未尾
  3. console.log(str.substr(7, 6)); // Banana
  4. // substring(起始位置,结束位置) :提取字符串中介于两个指定下标间的字符
  5. console.log(str.substring(7, 13)); // Banana
  6. // slice():提取字符串的某个部分并在新字符串中返回被提取的部分
  7. console.log(str.slice(7, 13)); // Banana

3)替换

  • replace(‘子字符串 1’,’子字符串 2’)
  1. str = "Please visit Microsoft and Microsoft!";
  2. // replace('子字符串 1','子字符串 2'):将字符串中子字符串1,替换为子字符串2
  3. // 默认只替换首个匹配， 对大小写敏感
  4. console.log(str.replace("Microsoft", "MDN")); //Please visit MDN and Microsoft!

4)获取指定位置的字符

  • charAt(‘下标位置’)
  1. var str = "HELLO WORLD";
  2. // charAt() 方法返回字符串中指定下标（位置）的字符串
  3. console.log(str.charAt(0)); // H

5)转换大小写

  • toLowerCase()
  • toUpperCase()
  1. var text = "Hello World!";
  2. // toUpperCase() 把字符串转换为大写
  3. console.log(text.toUpperCase()); // HELLO WORLD!
  4. // toLowerCase() 把字符串转换为小写
  5. console.log(text.toLowerCase()); // hello world!

6)将字符串分割为数组

  • split(分割符)
  1. var txt = "a,b,c,d,e";
  2. // split() 将字符串转换为数组
  3. console.log(txt.split(",")); // ["a", "b", "c", "d", "e"]

7)拼接字符串

  • concat()
  1. var text1 = "Hello";
  2. var text2 = "World";
  3. // concat() 连接两个或多个字符串
  4. console.log(text1.concat(" ", text2)); // Hello World

数组方法

1)转为字符串
toString() //将数组转换为字符串，以逗号连接
join(‘连接符’) //将数组元素连接成字符串

  1. // 转为字符串
  2. let arr = [0, 1, 2, 3, 4];
  3. console.log(arr.toString()); //0,1,2,3,4
  4. console.log(arr.join(":")); //0:1:2:3:4

2)连接多个数组，返回新数组
concat(数组 1,数组 2,…….) //连接多个数组返回新数组

  1. // 连接多个数组
  2. let arr1 = [0, 1, 2, 3, 4];
  3. let arr2 = ["true", "apple"];
  4. console.log(arr1.concat(arr1, arr2));
  5. //[0, 1, 2, 3, 4, 0, 1, 2, 3, 4, "true", "apple"]

3)追加元素,并返回新数组长度
unshift(值,……) //在数组的开头增加 n 个元素，并将数组的长度加 n
push(值,……) //尾部追加

  1. let arr = [0, 1, 2, 3];
  2. // 追加元素，并返回新数组长度
  3. // unshift(值，值，...): 在数组开头添加元素
  4. console.log(arr.unshift("true")); // 5
  5. console.log(arr); //["true", 0, 1, 2, 3]
  6. // push(值，值，...): 在数组尾部添加元素
  7. console.log(arr.push("true")); // 5
  8. console.log(arr); //[0, 1, 2, 3, "true"]

4)删除元素并返回该元素
shift() //删除第一个元素
pop() //删除最后一个元素

  1. let arr = [0, 1, 2, 3];
  2. // shift()删除第一个元素
  3. console.log(arr.shift()); // 0
  4. // pop()删除最后一个元素
  5. console.log(arr.pop()); // 3

5)删除元素或删除并插入新元素
splice(开始位置,长度,[新元素,新元素,……]) //返回包括删除元素的数组

  1. let arr = [0, 1, 2, 3, 4];
  2. // splice(开始位置,长度,[新元素,新元素,......]):返回包括删除元素的数组
  3. console.log(arr.splice(1, 2)); // [1, 2]
  4. console.log(arr); // [0, 3, 4]
  5. console.log(arr.splice(1, 2, "false")); //[1, 2]
  6. console.log(arr); // [0, "false", 3, 4]

6)将数组元素升序排序
sort():将数组元素升序排序

  1. let arr = [1, 2, 4, 6, 2, 5];
  2. // sort():将数组元素升序排序
  3. console.log(arr.sort()); // [1, 2, 2, 4, 5, 6]

7)颠倒数组中的元素
reverse():颠倒数组中的元素

  1. let arr = [1, 2, 3, 4];
  2. // reverse():颠倒数组中的元素
  3. console.log(arr.reverse()); // [4, 3, 2, 1]
上一条：为留言板添加字数实时统计与禁止超出功能; 2. 自选一些字符串和数组方法进行实例演示下一条：前端插件：Web Uploader（上传图片）和富文本编辑器（Ueditor）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多