• 当前标签:回调函数

程序开发 JavaScript 回调函数

制作点击删除,弹窗提示。 设计思路: HTML: <html>     <head>         <meta charset="utf-8">         <title>回调函数</title>         <link rel="stylesheet" href="css/alert.css">         <link rel="stylesheet" href="css/conform.css">         <script src="js/alert.js"></script>         <script src="js/confirm.js"></script>         <style>         </style>     </head>     <body>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div><div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <div>这个段落可以删除1</div>         <div>这个段落可以删除2</div>         <div>这个段落可以删除3</div>         <div>这个段落可以删除4</div>         <div>这个段落可以删除5</div>         <div>这个段落可以删除6</div>         <div>这个段落可以删除7</div>         <div>这个段落可以删除8</div>         <div>这个段落可以删除9</div>         <div>这个段落可以删除10</div>         <script>          var ps = document.querySelectorAll('div')          Array.prototype.slice.call(ps).forEach(function(p){              p.onclick = function(){                 new Confirm('确定要删除此段落吗?',function(){                     p.remove()                     new Alert('已删除').show()                 },function(){                     new Alert('已取消删除').show()                 }).show()              }          })         </script>     </body> </html> alert.css: html{     height: 100%;     /* overflow: hidden; */ } body{    height: 100%; } div.modal-mask{     width:100%;     height: 100%;     background-color: black;     opacity: 0.5;     position:absolute;     top:0;     left: 0;     z-index: 9999; } div.modal-box{     width:300px;     height: 150px;     border: 1px solid #9c9c9c;     border-radius: 10px;     position: absolute;     top:calc((100% - 150px) / 2);     left:calc((100% - 300px) / 2);     background-color: #e9e9e9;     box-shadow: 0 0 2px #444;     z-index: 10000; } div.modal-box .modal-message{

2017-08-05 12:26:09 44 0 0
阅读详情
  • 1
前往