search

博客列表 >留言板添加字数实时统计和超出判断以及数组字符串方法

留言板添加字数实时统计和超出判断以及数组字符串方法

冰雪琉璃
冰雪琉璃原创
2021年04月22日 09:56:54521浏览

留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     body{
  8.         background-color: skyblue;
  9.     }
  10.     .comment{
  11.         min-width:80%;
  12.         min-height: 80%;
  13.         border:1px solid #ccc;
  14.     }
  15.     textarea{
  16.         margin: 0 auto;
  17.     }
  18.     lable{
  19.         text-align: center;
  20.     }
  21.     </style>
  22. </head>
  23. <body>
  24. <form action="" name="write" id="write" class="comment">
  25. <lable for="content">请留言</lable>
  26. <textarea  name="content" id="content" cols="30" rows="5" placeholder="请不要超过100字，谢谢"></textarea>
  27. <button class="submit" name="submit">提交</button>
  28. </form>
  29. <ul class="list" placeholder="fdsjf"></ul>
  30. <script type="text/javascript">
  31. //获取form
  32. const form=document.querySelector(".comment");
  33. //textarea
  34. const textarea=document.querySelector("textarea");
  35. //btn
  36. const submitBtn=document.querySelector(".submit");
  37. //ul
  38. const commentList=document.querySelector(".list");
  39. //提交按钮点击事件
  40. submitBtn.onclick=function(ev){
  41.     //trim()省去字符串两边的空格
  42.     // console.log(textarea.value.trim());
  43.     ev.preventDefault();
  44.       let value=textarea.value.trim();
  45.       //剩余字符
  46.       let  remainder=100-value.length;
  47.       if(value.length>0&&value.length<=100){
  48.         // 将留言插入列表
  49.         //最新的留言总是第一条
  50.         alert("你还可以输入"+remainder+"个字符");
  51.         const newContent=document.createElement("li");
  52.         newContent.textContent=value;
  53.         //为新留言添加样式
  54.         newContent.style.color="white";
  55.         newContent.style.border="1px solid #ccc";
  56.         newContent.style.listStyle="none";
  57.         //创建一个删除按钮
  58.         const delBtn=document.createElement("button");
  59.         delBtn.textContent="删除"
  60.         delBtn.style.backgroundColor="white";
  61.         delBtn.style.float="right";
  62.         delBtn.style.border="none";
  63.         delBtn.style.marginTop="3px"
  64.         // 将删除按钮添加到新留言的后面
  65.         newContent.append(delBtn);
  66.         //将新留言添加到ul里面
  67.         commentList.prepend(newContent);
  68.         //让按钮自定义取消或者是确认confirm()
  69.         delBtn.onclick=function(){
  70.                 if(confirm("是否删除")){
  71.                     this.parentNode.remove();
  72.                     alert("删除成功");
  73.                 }
  74.             }
  75.         //通知用户留言成功
  76.         alert("留言成功");
  77.         textarea.value=null;
  78.         return false;
  79.       }
  80.       else{
  81.           alert("没有内容或者超过100字");
  82.           textarea.focus();
  83.           return false;
  84.       }
  85. }
  86. </script>
  87. </body>
  88. </html>

数组,字符串常用的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. //concat()连结两个字符串相当于"+"
  10. let str="html".concat("js, css, btr");
  11. console(str);//html js css btr
  12. console.log(['hello'],.concat(['p']));//[hellop]
  13. //slice(start,end)，当中只有一个参数时取参数后面的全部字符串,接受负值
  14. let str="hello php.cn";
  15. let res=str.slice(0,5)//hello
  16. let res2=str.slice(0)//hello php.cn
  17. let res3=str.slice(-6)//php.cn
  18. let res4=str.slice(-2)//cn
  19. //substr(start,size)
  20. let str="hello php.cn";
  21. let sub=substr(0,5)//hello
  22. let sum2=substr(-6,3)php//
  23. //trim()不计算字符串之间的空格
  24. //split将字符串变为数组,传入的参数在新生成的数组中取出。
  25. let sp=str.split("")；
  26. console.log(sp);//[h e l l o,p h p c n]
  27. //运用
  28. let email="admin@php.cn";
  29. res=email.split('@');
  30. console.log(res)//[admin][php.cn]
  31. console.log(res[0])//admin
  32. console.log(res[1])//php.cn
  33. // pop()从尾部将数组第一个元素删除(出栈)没有参数.
  34. let str2=[1,2,3];
  35. console.log(str2.pop())；//1 2
  36. //push向数组尾部添加一个元素。
  37. console.log(str2.push(1));//1 2 3 1
  38. //unshift()在头部添加一个元素
  39. let str3=[1,2,3,4];
  40. console.log(str3.unsift(2));2 1 2 3 4
  41. //shift()在头部删除一个元素没有参数
  42. console.log(str3.shift())//2 3 4
  43. //join()将数组转化为字符串默认转为逗号连结的字符串
  44. let arr=["电脑","手机","idpa"];
  45. console.log(arr.join())//"电脑,手机,idpa"
  46. //创建li
  47. let resiger=arr.join("</li><li>");
  48. console.log(`<li>${resiger}</li>`);//<li>电脑</li><li>手机</li><li>idpa</li>
  49. //slice()
  50. arr=[1,2,3,4,5,6]
  51. res=arr.slice(0,3);//123
  52. res=arr.slice(-3);//456
  53. //splice()删除返回删除的元素
  54. arr=[1,2,3,4,5,6]
  55. res=arr.splice(2);//3456
  57. //splice()新增元素
  58. //不删除元素，将第二个参数设为0，但是要传入第三个参数表示要插入的元素
  59. arr=[1,2,3,4,5,6,7,8];
  60. res=arr.splice(1,0,88,100);
  61. console.log(res)//1,88,99,2,3,4,5,6,7,8
  62. //简化
  63. res=arr.splice(1,0,...[88,100])
  64. //splice()改元素将第二个参数设为要删除的元素，但是要传入第三个参数，用来替换被删除的元素
  65. arr=[1,2,3,4,5,6,7,8,9]
  66. res=arr.splice(1,3,...[e,r]);
  67. console.log(res);//1,e,r,5,6,7,8,9
  68. //filter对每一个成员应用回调函数进行处理，返回true成员组成的数组取奇数与偶数
  69. arr=[1,2,3,4,5];
  70. res=arr.filter((item)=>item%2);
  71. console.log(res);//135
  72. res=arr.filter((item)=>!(item%2);
  73. console.log(res);//2,4
  74. //reduce()归并参数将多个成员统计之后，单值返回prev前一个值，curr后一个值，接受第三个参数表示从该值进行计算
  75. res=[1,2,3,4,5,6];
  76. res=arr.reduce(function(prev,curr){
  77.         return prev+curr;
  78. })
  79. console.log(res)//1+2+3+4+5+6=21
  80. res=[1,2,3,4,5,6];
  81. res=arr.reduce(function(prev,curr){
  82.         return prev+curr;
  83. }，10)
  84. console.log(res)//10+1+2+3+4+5+6=31
  85.    </script>
  86.  </body>
  87. </html>
上一条：磁盘未被格式化救援方法下一条：1. 实例演示Ajax的get,post请求; 2. 练习选顶卡和换肤案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多