JavaScript 回调函数

黄良钵

分类: 程序开发 83 0

制作点击删除,弹窗提示。

设计思路:

设计思路

HTML:

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>回调函数</title>
  5.         <link rel="stylesheet" href="css/alert.css">
  6.         <link rel="stylesheet" href="css/conform.css">
  7.         <script src="js/alert.js"></script>
  8.         <script src="js/confirm.js"></script>
  9.         <style>
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <div>这个段落可以删除1</div>
  14.         <div>这个段落可以删除2</div>
  15.         <div>这个段落可以删除3</div>
  16.         <div>这个段落可以删除4</div>
  17.         <div>这个段落可以删除5</div>
  18.         <div>这个段落可以删除6</div>
  19.         <div>这个段落可以删除7</div>
  20.         <div>这个段落可以删除8</div>
  21.         <div>这个段落可以删除9</div>
  22.         <div>这个段落可以删除10</div>
  23.         <div>这个段落可以删除1</div>
  24.         <div>这个段落可以删除2</div>
  25.         <div>这个段落可以删除3</div>
  26.         <div>这个段落可以删除4</div>
  27.         <div>这个段落可以删除5</div>
  28.         <div>这个段落可以删除6</div>
  29.         <div>这个段落可以删除7</div>
  30.         <div>这个段落可以删除8</div>
  31.         <div>这个段落可以删除9</div>
  32.         <div>这个段落可以删除10</div>
  33.         <div>这个段落可以删除1</div>
  34.         <div>这个段落可以删除2</div>
  35.         <div>这个段落可以删除3</div>
  36.         <div>这个段落可以删除4</div>
  37.         <div>这个段落可以删除5</div>
  38.         <div>这个段落可以删除6</div>
  39.         <div>这个段落可以删除7</div>
  40.         <div>这个段落可以删除8</div>
  41.         <div>这个段落可以删除9</div>
  42.         <div>这个段落可以删除10</div>
  43.         <div>这个段落可以删除1</div>
  44.         <div>这个段落可以删除2</div>
  45.         <div>这个段落可以删除3</div>
  46.         <div>这个段落可以删除4</div>
  47.         <div>这个段落可以删除5</div>
  48.         <div>这个段落可以删除6</div>
  49.         <div>这个段落可以删除7</div>
  50.         <div>这个段落可以删除8</div>
  51.         <div>这个段落可以删除9</div>
  52.         <div>这个段落可以删除10</div>
  53.         <div>这个段落可以删除1</div>
  54.         <div>这个段落可以删除2</div>
  55.         <div>这个段落可以删除3</div>
  56.         <div>这个段落可以删除4</div>
  57.         <div>这个段落可以删除5</div>
  58.         <div>这个段落可以删除6</div>
  59.         <div>这个段落可以删除7</div>
  60.         <div>这个段落可以删除8</div>
  61.         <div>这个段落可以删除9</div>
  62.         <div>这个段落可以删除10</div>
  63.         <div>这个段落可以删除1</div>
  64.         <div>这个段落可以删除2</div>
  65.         <div>这个段落可以删除3</div>
  66.         <div>这个段落可以删除4</div>
  67.         <div>这个段落可以删除5</div>
  68.         <div>这个段落可以删除6</div>
  69.         <div>这个段落可以删除7</div>
  70.         <div>这个段落可以删除8</div>
  71.         <div>这个段落可以删除9</div>
  72.         <div>这个段落可以删除10</div>
  73.         <div>这个段落可以删除1</div>
  74.         <div>这个段落可以删除2</div>
  75.         <div>这个段落可以删除3</div>
  76.         <div>这个段落可以删除4</div>
  77.         <div>这个段落可以删除5</div>
  78.         <div>这个段落可以删除6</div>
  79.         <div>这个段落可以删除7</div>
  80.         <div>这个段落可以删除8</div>
  81.         <div>这个段落可以删除9</div>
  82.         <div>这个段落可以删除10</div>
  83.         <div>这个段落可以删除1</div>
  84.         <div>这个段落可以删除2</div>
  85.         <div>这个段落可以删除3</div>
  86.         <div>这个段落可以删除4</div>
  87.         <div>这个段落可以删除5</div>
  88.         <div>这个段落可以删除6</div>
  89.         <div>这个段落可以删除7</div>
  90.         <div>这个段落可以删除8</div>
  91.         <div>这个段落可以删除9</div>
  92.         <div>这个段落可以删除10</div><div>这个段落可以删除1</div>
  93.         <div>这个段落可以删除2</div>
  94.         <div>这个段落可以删除3</div>
  95.         <div>这个段落可以删除4</div>
  96.         <div>这个段落可以删除5</div>
  97.         <div>这个段落可以删除6</div>
  98.         <div>这个段落可以删除7</div>
  99.         <div>这个段落可以删除8</div>
  100.         <div>这个段落可以删除9</div>
  101.         <div>这个段落可以删除10</div>
  102.         <div>这个段落可以删除1</div>
  103.         <div>这个段落可以删除2</div>
  104.         <div>这个段落可以删除3</div>
  105.         <div>这个段落可以删除4</div>
  106.         <div>这个段落可以删除5</div>
  107.         <div>这个段落可以删除6</div>
  108.         <div>这个段落可以删除7</div>
  109.         <div>这个段落可以删除8</div>
  110.         <div>这个段落可以删除9</div>
  111.         <div>这个段落可以删除10</div>
  112.         <script>
  113.          var ps = document.querySelectorAll('div')
  114.          Array.prototype.slice.call(ps).forEach(function(p){
  115.              p.onclick = function(){
  116.                 new Confirm('确定要删除此段落吗?',function(){
  117.                     p.remove()
  118.                     new Alert('已删除').show()
  119.                 },function(){
  120.                     new Alert('已取消删除').show()
  121.                 }).show()
  122.              }
  123.          })
  124.         </script>
  125.     </body>
  126. </html>

alert.css:

  1. html{
  2.     height: 100%;
  3.     /* overflow: hidden; */
  4. }
  5. body{
  6.    height: 100%;
  7. }
  8. div.modal-mask{
  9.     width:100%;
  10.     height: 100%;
  11.     background-colorblack;
  12.     opacity: 0.5;
  13.     position:absolute;
  14.     top:0;
  15.     left: 0;
  16.     z-index: 9999;
  17. }
  18. div.modal-box{
  19.     width:300px;
  20.     height150px;
  21.     border1px solid #9c9c9c;
  22.     border-radius: 10px;
  23.     positionabsolute;
  24.     top:calc((100% - 150px) / 2);
  25.     left:calc((100% - 300px) / 2);
  26.     background-color#e9e9e9;
  27.     box-shadow: 0 0 2px #444;
  28.     z-index: 10000;
  29. }
  30. div.modal-box .modal-message{
  31.     text-aligncenter;
  32.     margin-top35px;
  33.     font-size18px;
  34.     color#444;
  35. }
  36. div.modal-box .modal-button-box{
  37.     height50px;
  38.     positionabsolute;
  39.     bottombottom:0;
  40.     width: 100%;
  41.     border-top1px solid silver;
  42.     border-bottom-left-radius: 10px;
  43.     border-bottom-rightright-radius: 10px;
  44. }
  45. .modal-button-box div{
  46.     height49px;
  47.     width:98%;
  48.     text-aligncenter;
  49.     line-height50px;
  50.     cursorpointer;
  51.     border-radius: 10px;
  52. }

conform.css:

  1. .modal-separator{
  2.     border-left1px solid silver;
  3.     height50px;
  4.     positionabsolute;
  5.     bottombottom: 0;
  6.     left: calc(50%);
  7.     displayblock;
  8. }
  9. .modal-left-button,.modal-rightright-button{
  10.     displayblock;
  11.     width: 49%;
  12.     height48px;
  13.     positionabsolute;
  14.     bottombottom: 0;
  15.     left: 0;
  16.     text-aligncenter;
  17.     line-height50px;
  18. }
  19. .modal-rightright-button{
  20.     leftauto;
  21.     rightright: 0;
  22. }

alert.js

  1. function Alert(message,action){
  2.     this.message = message
  3.     this.action = action
  4.     // 首先传入一个函数 而不执行它 
  5.     // 在内部保留这个函数 当内部处理完成之后再回过头来调用这个函数
  6.     // 通知外部已经完成处理 这种函数通常为回调函数  callBack
  7.     // document.documentElement.style.overflow = 'hidden'
  8. }
  9. Alert.prototype.showMask = function(){
  10.     //  将样式分离到单独的样式表中可以随时修改样式而不需要修改代码
  11.     //  即使不懂代码也可以修改样式 js代码量也减小了
  12.     var mask = document.createElement('div')
  13.     mask.className = 'modal-mask'
  14.     document.body.appendChild(mask)
  15. }
  16. Alert.prototype.showBody = function(){
  17.     var box = document.createElement('div')
  18.     box.className = 'modal-box'
  19.     document.body.appendChild(box)
  20.     var mes = document.createElement('div')
  21.     mes.className = 'modal-message'
  22.     mes.innerText = this.message
  23.     box.appendChild(mes)
  24.     var btnBox = document.createElement('div')
  25.     btnBox.className = 'modal-button-box'
  26.     box.appendChild(btnBox)
  27. }
  28. Alert.prototype.showButton = function(){
  29.     var btn = document.createElement('div')
  30.     btn.innerText = '确定'
  31.     document.querySelector('.modal-button-box').appendChild(btn)
  32.     var self = this
  33.     btn.onclick = function(ev){
  34.       self.close()
  35.     //   因为事件处理程序中的this指向当前监听事件的标签
  36.     //   所以在这个函数中无法使用this来表示Alert对象
  37.     //   但是我们可以使用一个变量来代替this
  38.     //   这个变量就是self
  39.     // 判断self.action 是否有值 并是否是一个函数
  40.       if(typeof self.action === 'function'){
  41.           self.action()
  42.       }
  43.     }
  44. }
  45. Alert.prototype.close = function(){
  46.     var mas = document.querySelector('.modal-mask')
  47.     var box = document.querySelector('.modal-box')
  48.     document.body.removeChild(mas)
  49.     document.body.removeChild(box)
  50.     // document.documentElement.style.overflow = 'hidden'
  51. }
  52. Alert.prototype.show = function(){
  53.     this.showMask()
  54.     this.showBody()
  55.     this.showButton()
  56. }

confirm.js

  1. function Confirm(message,action1,action2){
  2.      Alert.call(this,message,action1)
  3.      this.canceAction = action2
  4. }
  5. Confirm.prototype = Object.create(Alert.prototype)
  6. Confirm.prototype.constructor = Confirm
  7. // 重写showButton方法 在按钮中生成'确定'和'取消'按钮
  8. Confirm.prototype.showButton = function(){
  9.     var btnBox = document.querySelector('.modal-button-box')
  10.     var separator = document.createElement('span')
  11.     separator.className = 'modal-separator'
  12.     btnBox.appendChild(separator)
  13.     var action1 = document.createElement('span')
  14.     action1.innerText = '确定'
  15.     action1.className = 'modal-left-button'
  16.     btnBox.appendChild(action1)
  17.     var action2 = document.createElement('span')
  18.     action2.innerText = '取消'
  19.     action2.className = 'modal-right-button'
  20.     btnBox.appendChild(action2)
  21.     var me = this
  22.     action1.onclick = function(){
  23.             me.close()
  24.             if(typeof me.action === 'function'){
  25.                 me.action()
  26.             }
  27.     }
  28.     action2.onclick = function(){
  29.         me.close()
  30.             if(typeof me.canceAction  === 'function'){
  31.                 me.canceAction()
  32.             }
  33.     }
  34. }

演示效果:

弹出框

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、回调函数、弹出窗

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 回调函数”

Loading...