耀极客论坛

 找回密码
 立即注册
查看: 425|回复: 0

一篇文章告诉你如何用事件委托实现JavaScript留言板功能

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 01:32:11 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了事件委托实现JavaScript留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  用事件委托实现留言板功能。


  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>Document‹/title>
  8.     ‹style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         body {
  14.             width: 100%;
  15.             height: 100%;
  16.             background: rgb(65, 65, 63);
  17.         }
  18.         .bacground {
  19.             width: 700px;
  20.             height: 100%;
  21.             background: white;
  22.             margin: auto;
  23.             margin-top: 20px;
  24.         }
  25.         .head,
  26.         .pop-head {
  27.             height: 50px;
  28.             font-size: 20px;
  29.             text-align: center;
  30.             line-height: 50px;
  31.         }
  32.         .name {
  33.             width: 640px;
  34.             height: 40px;
  35.             font-size: 20px;
  36.             margin: 10px 28px;
  37.             line-height: 50px;
  38.             border-radius: 8px;
  39.             border: 2px solid rgb(139, 137, 137);
  40.             outline: none;
  41.         }
  42.         .content,
  43.         .pop-reply {
  44.             width: 640px;
  45.             height: 150px;
  46.             font-size: 22px;
  47.             margin: 10px 28px;
  48.             border: 2px solid rgb(139, 137, 137);
  49.             outline: none;
  50.             border-radius: 8px;
  51.             resize: none;
  52.         }
  53.         .btn,
  54.         .pop-btn {
  55.             float: right;
  56.             height: 30px;
  57.             margin-right: 28px;
  58.             border-radius: 6px;
  59.             outline: none;
  60.             font-size: 20px;
  61.             padding: 0 20px;
  62.             background: rgb(169, 238, 255);
  63.         }
  64.         h3 {
  65.             font-size: 20px;
  66.             color: rgb(102, 102, 102);
  67.             background: rgb(205, 221, 248);
  68.             margin-top: 50px;
  69.             line-height: 50px;
  70.             text-indent: 30px;
  71.             font-weight: 545;
  72.         }
  73.         li {
  74.             list-style: none;
  75.             width: 640px;
  76.             font-size: 22px;
  77.             margin: 15px 30px;
  78.         }
  79.         .message-head {
  80.             display: flex;
  81.         }
  82.         .message-head .photo {
  83.             width: 70px;
  84.             height: 70px;
  85.             background: rgb(6, 109, 134);
  86.             display: inline-block;
  87.             border-radius: 50%;
  88.             text-align: center;
  89.             line-height: 70px;
  90.             overflow: hidden;
  91.         }
  92.         .message-head .time {
  93.             margin-left: 12px;
  94.         }
  95.         .liuyan,
  96.         .reply p {
  97.             width: 560px;
  98.             /* height: 76px; */
  99.             line-height: 50px;
  100.             display: block;
  101.             background: rgb(205, 221, 248);
  102.             font-size: 20px;
  103.             margin-left: 80px;
  104.             border-radius: 8px;
  105.             text-indent: 15px;
  106.         }
  107.         .delete {
  108.             width: 60px;
  109.             height: 30px;
  110.             display: block;
  111.             line-height: 30px;
  112.             margin-left: 580px;
  113.             /* margin-bottom: 0px; */
  114.             border-radius: 6px;
  115.             outline: none;
  116.             font-size: 15px;
  117.             background: rgb(169, 238, 255);
  118.         }
  119.         .answer {
  120.             width: 60px;
  121.             height: 30px;
  122.             display: block;
  123.             line-height: 30px;
  124.             margin-top: -29px;
  125.             margin-left: 515px;
  126.             border-radius: 6px;
  127.             outline: none;
  128.             font-size: 15px;
  129.             background: rgb(169, 238, 255);
  130.         }
  131.         .popup {
  132.             width: 100vw;
  133.             height: 100vh;
  134.             position: fixed;
  135.             background: rgba(0, 0, 0, .3);
  136.             left: 0;
  137.             top: 0;
  138.             z-index: 10;
  139.             display: flex;
  140.             align-items: center;
  141.             justify-content: center;
  142.             display: none;
  143.         }
  144.         .pop-content {
  145.             width: 700px;
  146.             background: #fff;
  147.             border-radius: 10px;
  148.             overflow: hidden;
  149.             padding-bottom: 20px;
  150.         }
  151.         .reply p {
  152.             margin-top: 10px;
  153.             background: rgba(100, 100, 100, .1);
  154.         }
  155.     ‹/style>
  156. ‹/head>
  157. ‹body>
  158.     ‹div class="bacground">
  159.         ‹div class="head">留言板‹/div>
  160.         ‹input class="name" type="text" placeholder="请输入您的昵称">
  161.         ‹textarea class="content" placeholder="请保持言论文明......">‹/textarea>
  162.         ‹button class="btn">留言‹/button>
  163.         ‹h3>大家在说‹/h3>
  164.         ‹ul class="text">
  165.             ‹!-- ‹li>
  166. ‹div class="message-head">
  167. ‹span class="photo">系统‹/span>
  168. ‹p class="time">2019-9-27 0:47:38‹/p>
  169. ‹/div>
  170. ‹p class="liuyan">测试留言‹/p>
  171. ‹div class="reply">
  172. ‹p>测试回复‹/p>
  173. ‹/div>
  174. ‹button class="delete">Delete‹/button>
  175. ‹button class="answer">Answer‹/button>
  176. ‹/li> -->
  177.         ‹/ul>
  178.     ‹/div>
  179.     ‹div class="popup">
  180.         ‹div class="pop-content">
  181.             ‹div class="pop-head">回复板‹/div>
  182.             ‹textarea class="pop-reply" placeholder="请保持言论文明......">‹/textarea>
  183.             ‹button class="pop-btn huiFu">回复‹/button>
  184.             ‹button class="pop-btn quXiao">取消‹/button>
  185.         ‹/div>
  186.     ‹/div>
  187.     ‹script>
  188.         //在事件委托中,每一个if都相当于一个独立的函数,因为每一次点击都会重新触发事件处理函数
  189.         var oAns ;
  190.         //分析:事件委托给谁? --- 共同的父元素
  191.         document.onclick = function (e) {
  192.             //事件处理对象,兼容IE8及以下版本的浏览器
  193.             e = e || event ;
  194.             // target目标  --- 具体是由哪个标签触发的
  195.             var target = e.target ;
  196.             //留言
  197.             if(target.className === 'btn'){
  198.                 //获取对象
  199.                 var nickname = $('.name').value ;
  200.                 var content = $('.content').value ;
  201.                 //判断输入是否为空
  202.                 if(nickname && content){
  203.                     //创建一个标签
  204.                     var oLi = document.createElement('li') ;
  205.                     //插入新内容
  206.                     oLi.innerHTML = `
  207.                     ‹div class="message-head">
  208.                         ‹span class="photo">${nickname}‹/span>
  209.                         ‹p class="time">2019-9-27 0:47:38‹/p>
  210.                     ‹/div>
  211.                     ‹p class="liuyan">${content}‹/p>
  212.                     ‹div class="reply">
  213.                     ‹/div>
  214.                     ‹button class="delete">Delete‹/button>
  215.                     ‹button class="answer">Answer‹/button>
  216.                     `  
  217.                     //将最新的留言插入到最上面
  218.                     $('.text').insertBefore(oLi , $('.text').firstChild) ;
  219.                     //倒计时
  220.                     clock(target , 3) ;
  221.                     //留言完后清空留言板内容
  222.                     $('.content').value = '' ;
  223.                 }else{
  224.                     alert('输入不能为空!')
  225.                 }
  226.                 return
  227.             }
  228.             //删除
  229.             if(target.className === 'delete'){
  230.                 //删除留言
  231.                 target.parentNode.remove() ;
  232.                 return
  233.             }
  234.             //回复
  235.             if(target.className === 'answer'){
  236.                 //显示弹窗
  237.                 $('.popup').style.display = 'flex' ;
  238.                 //找到回复留言的地方
  239.                 oAns = target.previousElementSibling.previousElementSibling ;
  240.                 return
  241.             }
  242.             //确认回复
  243.             if(target.className === 'pop-btn huiFu'){
  244.                 //拿到回复的内容
  245.                 var huiFuContent = $('.pop-reply').value ;
  246.                 if(huiFuContent){
  247.                     //创建一个标签
  248.                     var oP = document.createElement('p') ;
  249.                     //将内容插入标签中
  250.                     oP.innerHTML = huiFuContent ;
  251.                     //将回复插入到留言的地方
  252.                     oAns.appendChild(oP) ;
  253.                 }
  254.                 //关闭弹窗
  255.                 $('.popup').style.display = 'none' ;
  256.                 return
  257.             }
  258.             //取消回复
  259.             if(target.className === 'pop-btn quXiao'){
  260.                 $('.popup').style.display = 'none' ;
  261.                 return
  262.             }
  263.         }
  264.         //倒计时
  265.         function clock(ele , time){
  266.             if(!ele.disabled){
  267.                 ele.disabled = true ;
  268.                 ele.innerHTML = time + 's后可再次留言' ;
  269.                 var t = setInterval(function () {
  270.                     time-- ;
  271.                     ele.innerHTML = time + 's后可再次留言' ;
  272.                     if(time ‹= 0){
  273.                         clearInterval(t) ;
  274.                         ele.disabled = false ;
  275.                         ele.innerHTML = '留言' ;
  276.                     }
  277.                 },1000)
  278.             }
  279.         }
  280.         //获取对象
  281.         function $(selector){
  282.             return document.querySelector(selector) ;
  283.         }
  284.     ‹/script>
  285. ‹/body>
  286. ‹/html>
复制代码
总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:35 , Processed in 0.066065 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表