Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 留言板实战与添加字数实时统计功能
Blogger Information
Blog 16
fans 0
comment 0
visits 9594
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板实战与添加字数实时统计功能
Blastix Riotz
Original
669 people have browsed it

  • demo.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.     <style>
  9.         @import url('demo.css');
  11.     </style>
  12. </head>
  13. <body>
  14.     <form class="comment">
  15.         <label for="content">请留言：</label>
  16.         <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符" maxlength="100"></textarea>
  17.         <span class="notice">还可以输入100字</span>
  18.         <button class="submit" type="button" name="submit">提交</button>
  19.     </form>
  20.     <ul class="list"></ul>
  22.     <script>
  23.         //获取元素
  24.         //form
  25.         const comment = document.querySelector('.comment');
  26.         //textarea
  27.         const content = comment.content;
  28.         //btn
  29.         const submitBtn = comment.submit;
  30.         //ul
  31.         const commentList = document.querySelector('.list');
  32.         const notice = document.querySelector('.notice');
  34.         //提交按钮点击事件
  35.         submitBtn.onclick = (ev) => {
  36.             // console.log(content.value.trim().length);
  37.             let value = content.value.trim();
  39.             if (value.length > 0 && value.length<=100) {
  40.                 //将留言插入到列表中
  41.                 const newComment = document.createElement('li');
  42.                 newComment.textContent = value;
  43.                 newComment.style.boederBottom = '1px solid white';
  44.                 newComment.style.minHeight = '3em';
  46.                 //添加删除留言功能
  47.                 //未每一条留言添加删除按钮
  48.                 const deleteBtn = document.createElement('button');
  49.                 deleteBtn.textContent = '删除';
  50.                 deleteBtn.style.float = 'right';
  51.                 deleteBtn.classList.add('del-btn')
  52.                 deleteBtn.onclick = function(){
  53.                     if (confirm('是否删除')){
  54.                         //确定：true ，取消：false
  55.                         this.parentNode.remove();
  56.                         alert('删除成功')
  57.                         content.focus();
  58.                         return false;
  59.                     }
  60.                 }
  62.                 //将删除按钮添加到新留言的后面
  63.                 newComment.append(deleteBtn);
  65.                 //将新留言添加到列表的头部
  66.                 commentList.prepend(newComment);
  67.                 //通知用户
  68.                 alert('留言成功')
  69.                 //清空留言
  70.                 content.value = null;
  71.                 content.focus();
  72.                 //提示信息
  73.                 notice.textContent = '还可以输入100字';
  74.             } else {
  75.                 alert('没有内容或超过规定字数')
  76.                 content.focus();
  77.                 return false;
  78.             }
  79.         }
  80.         // oninput 监控输入, 提示信息
  81.         content.oninput=function(){
  82.             let textLength = content.value.trim().length;
  83.             notice.textContent = `还可以输入${100 - textLength}字`;
  84.         }
  85.     </script>
  86. </body>
  87. </html>
  • demo.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:lightskyblue;
  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. }
  50. .del-btn {
  51.   background-color: wheat;
  52.   color: red;
  53.   padding: 0.5em 1em;
  54.   /* height: 2.2em; */
  55.   border: none;
  56.   outline: none;
  57. }
  58. .del-btn:hover {
  59.   cursor: pointer;
  60.   background-color: lime;
  61. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post