js之留言板与数组字符串函数

1.留言板

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>留言板</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. box-sizing: border-box;
  11. }
  12. li {
  13. list-style: none;
  14. }
  15. body {
  16. background-color:rgb(174, 236, 236);
  17. color: #555;
  18. }
  19. .comment {
  20. width: 40%;
  21. margin: 1em auto;
  22. display: grid;
  23. gap: 0.5em;
  24. }
  25. .comment #content {
  26. resize: none;
  27. border:none;
  28. padding: 0.5em;
  29. outline: none;
  30. }
  31. .comment #content:focus,
  32. .comment #content:hover {
  33. box-shadow: 0 0 8px steelblue;
  34. transition: 0.6s;
  35. }
  36. .comment .submit {
  37. width: 30%;
  38. margin-left: auto;
  39. background-color: lightseagreen;
  40. border: none;
  41. outline: none;
  42. color: white;
  43. height: 2.5em;
  44. }
  45. .comment .submit:hover {
  46. background-color: seagreen;
  47. transition: 0.6s;
  48. cursor: pointer;
  49. }
  50. .list {
  51. width: 80%;
  52. /* background-color: yellow; */
  53. margin: auto;
  54. padding: 1em;
  55. }
  56. .del-btn {
  57. background-color: wheat;
  58. color: red;
  59. padding:0.5em 1em;
  60. /* height: 2.2em; */
  61. border:none;
  62. outline: none;
  63. }
  64. .del-btn:hover {
  65. cursor: pointer;
  66. background-color: lime;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <form action="" class="comment">
  72. <label for="content">请留言</label>
  73. <textarea name="content" id="content" cols="30" rows="5" onkeyup="countWord(this)" maxlength="100"></textarea>
  74. <button type="button" name="submit" class="submit">提交</button>
  75. <ul class="list"></ul>
  76. </form>
  77. <script>
  78. //第一步获取元素
  79. const comment = document.querySelector('.comment');
  80. //textarea
  81. const content = comment.content;
  82. //btn
  83. const submitBtn = comment.submit;
  84. //ul
  85. const commentList = document.querySelector('.list');
  86. const wordCount = document.createElement('div');
  87. wordCount.style.color = 'red';
  88. wordCount.textContent = '还可以输入100字';
  89. submitBtn.before(wordCount);
  90. function countWord(input){
  91. if (wordCount && input) {
  92. let value = input.value;
  93. value = value.replace(/\n|\r/gi,"");
  94. wordCount.textContent = "还可以输入"+(100-value.length)+"字";
  95. }
  96. }
  97. submitBtn.onclick = (ev) => {
  98. //console.log(content.value.trim().length);
  99. let value = content.value.trim();
  100. if (value.length>0 && value.length<=100 ) {
  101. // 最新的留言应该插入第一条
  102. const newComment = document.createElement('li');
  103. newComment.textContent = value;
  104. newComment.style.borderBottom = '1px solid white';
  105. newComment.style.minHeight = '3em';
  106. //添加删除按钮
  107. const delBtn = document.createElement('button');
  108. delBtn.textContent = '删除';
  109. delBtn.style.float = 'right';
  110. delBtn.classList.add('del-btn');
  111. delBtn.onclick = function () {
  112. if (confirm('是否删除')) {
  113. // 确定是true ,反之false
  114. this.parentNode.remove();
  115. alert('删除成功');
  116. content.focus();
  117. return false;
  118. }
  119. }
  120. //将删除按钮添加到新留言的后面
  121. newComment.append(delBtn);
  122. // 将新留言添加到列表中
  123. commentList.append(newComment);
  124. //通知用户
  125. alert('留言成功');
  126. content.value = null;
  127. content.focus();
  128. }else {
  129. alert('没有内容或内容超出规定长度');
  130. content.focus();
  131. return false;
  132. }
  133. }
  134. </script>
  135. </body>
  136. </html>

效果图

2.字符串数组函数

字符串函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>字符串方法</title>
  6. </head>
  7. <body>
  8. <script>
  9. // 1.slice(start,end)
  10. //2.substr(start,size)
  11. //3. trim('去空格');
  12. let str = 'html'.concat('1','2');
  13. console.log(str);
  14. console.log(str.slice(0,1));
  15. console.log(str.slice(0))
  16. //从第几个位置开始取
  17. console.log(str.slice(1))
  18. //4.字符串打散成数组
  19. console.log(str.split(''));
  20. </script>
  21. </body>
  22. </html>

效果图

数组函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>数组常用函数</title>
  6. </head>
  7. <body>
  8. <script>
  9. // 1.栈方法
  10. // 栈:只允许在数组一端进行增删的操作
  11. let arr = [12,2];
  12. //入栈 push()
  13. //出栈 pop() 删除末尾的元素
  14. console.log(arr.pop());
  15. console.log(arr);
  16. //数组头部进行增删
  17. //unshift():从头部添加 返回值是数组元素个数
  18. //shift():从头部删除 返回值是数组元素个数
  19. console.log(arr.unshift(1))
  20. console.log(arr.shift(1))
  21. // 2.数组转字符串 join()
  22. let res = arr.join(",");
  23. console.log(res);
  24. // 3.数组的增删改 splice()
  25. arr = [1,2,3,4];
  26. //删除所有元素 返回值删除的元素
  27. console.log(arr.splice(0));
  28. //更新
  29. arr = [1,2,3,4];
  30. // 第二个元素后添加,删除一位
  31. arr.splice(1,1,...[12,22,33]);
  32. console.log(arr)
  33. //4.forEach()循环
  34. //5.filter() 过滤器 对每个成员应用回调函数进行处理返回true的成员的数组
  35. //取奇数
  36. res = arr.filter((items)=>items % 2);
  37. console.log(res);
  38. //6.reduce():归内操作,将多成员进行统计后,单值返回
  39. arr = [1,2,3,4];
  40. res = arr.reduce((prev,curr)=> prev + curr,20);//20是添加的初值
  41. console.log(res);
  42. </script>
  43. </body>
  44. </html>

效果图