博客列表 >留言板实战与添加字数实时统计功能

留言板实战与添加字数实时统计功能

Blastix Riotz
Blastix Riotz原创
2021年04月23日 19:11:59663浏览

  • 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');
  10. </style>
  11. </head>
  12. <body>
  13. <form class="comment">
  14. <label for="content">请留言:</label>
  15. <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符" maxlength="100"></textarea>
  16. <span class="notice">还可以输入100字</span>
  17. <button class="submit" type="button" name="submit">提交</button>
  18. </form>
  19. <ul class="list"></ul>
  20. <script>
  21. //获取元素
  22. //form
  23. const comment = document.querySelector('.comment');
  24. //textarea
  25. const content = comment.content;
  26. //btn
  27. const submitBtn = comment.submit;
  28. //ul
  29. const commentList = document.querySelector('.list');
  30. const notice = document.querySelector('.notice');
  31. //提交按钮点击事件
  32. submitBtn.onclick = (ev) => {
  33. // console.log(content.value.trim().length);
  34. let value = content.value.trim();
  35. if (value.length > 0 && value.length<=100) {
  36. //将留言插入到列表中
  37. const newComment = document.createElement('li');
  38. newComment.textContent = value;
  39. newComment.style.boederBottom = '1px solid white';
  40. newComment.style.minHeight = '3em';
  41. //添加删除留言功能
  42. //未每一条留言添加删除按钮
  43. const deleteBtn = document.createElement('button');
  44. deleteBtn.textContent = '删除';
  45. deleteBtn.style.float = 'right';
  46. deleteBtn.classList.add('del-btn')
  47. deleteBtn.onclick = function(){
  48. if (confirm('是否删除')){
  49. //确定:true ,取消:false
  50. this.parentNode.remove();
  51. alert('删除成功')
  52. content.focus();
  53. return false;
  54. }
  55. }
  56. //将删除按钮添加到新留言的后面
  57. newComment.append(deleteBtn);
  58. //将新留言添加到列表的头部
  59. commentList.prepend(newComment);
  60. //通知用户
  61. alert('留言成功')
  62. //清空留言
  63. content.value = null;
  64. content.focus();
  65. //提示信息
  66. notice.textContent = '还可以输入100字';
  67. } else {
  68. alert('没有内容或超过规定字数')
  69. content.focus();
  70. return false;
  71. }
  72. }
  73. // oninput 监控输入, 提示信息
  74. content.oninput=function(){
  75. let textLength = content.value.trim().length;
  76. notice.textContent = `还可以输入${100 - textLength}字`;
  77. }
  78. </script>
  79. </body>
  80. </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. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议