16

1-什么是事件委托，原理是什么？
　　定义：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
　　原理：事件委托利用事件冒泡（从最深的节点开始，然后逐步向上传播事件）只在他们的父元素上指定一个事件处理程序，就可以管理某一类型的的所有事件。
2-js 中有几种定时器，有什么区别？
　　两种
　　setInterval(函数,时间)
　　setTimeout(函数,时间)
　　区别：前者为循环定时器,后者只执行一次
3-如何清除定时器？
　　celerInterval()
　　clearTimeOut()

4-封装一个动画函数

封装变速函数:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8 </head>
  9 <style>
 10     * {
 11         margin: 0;
 12         padding: 0;
 13     }
 14 
 15     div {
 16         margin-top: 20px;
 17         width: 200px;
 18         height: 200px;
 19         background-color: blue;
 20         position: absolute;
 21         left: 0;
 22         top: 0;
 23     }
 24 </style>
 25 
 26 <body>
 27     <input type="button" value="移动" id="btn">
 28     <div id="dv"></div>
 29 
 30     <script src="js/common.js"></script>
 31     <script>
 32 
 33         function getStyle(element, attr) {
 34             // 判断浏览器是否指该属性
 35             return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]
 36         }
 37 
 38         // 点击按钮,可以改变宽高,位置,透明度,层级关系
 39         function animate(element, json, fn) {
 40             //清理定时器
 41             clearInterval(element.timerId)
 42             // 创建定时器
 43             element.timerId = setInterval(function () {
 44                 // 创建标志位,确定定时器是否要清除
 45                 var flag = true;
 46                 for (var attr in json) {
 47                     if (attr == "opacity") {  //透明度
 48                         // 获取元素透明度
 49                         var current = parseInt(getStyle(element, attr) * 100);
 50                         console.log(current)
 51                         // 计算变化步数
 52                         var target = json[attr] * 100;
 53                         var step = (target - current) / 10;
 54                         step = step > 0 ? Math.ceil(step) : Math.floor(step)
 55                         current += step;
 56                         element.style[attr] = current / 100;
 57                     }
 58                     else if (attr == "z-Index") {  //z-index属性
 59                         // 层级关系改变就是直接改属性值
 60                         element.style[attr] = json[attr]
 61                     }
 62                     else { // 普通属性
 63                         // 获取元素当前属性值
 64                         var current = parseInt(getStyle(element, attr))
 65                         // 移动步数(获取当前属性的目标值)
 66                         var target = json[attr];
 67                         // 确定移动步数,计算步长,达到缓动效果
 68                         var step = (target - current) / 10;
 69                         // 判断 取整
 70                         step = step > 0 ? Math.ceil(step) : Math.floor(step) //Math.ceil向上取整,Math.floor向下取整
 71                         current += step
 72                         element.style[attr] = current + "px";
 73                     }
 74                     // 判断目标是否到达位置
 75                     if (current != target) {
 76                         flag = false
 77                     }
 78                 }
 79                 if (flag) {
 80                     clearInterval(element.timerId)
 81                     if (fn) {
 82                         fn()
 83                     }
 84                 }
 85             }, 20)
 86         }
 87 
 88 
 89         // 方法调用
 90 
 91         getId("btn").onclick = function () {
 92             var json1 = { "width": 800, "height": 400, "left": 500, "top": 600, "opacity": 0.1 }
 93             animate(getId("dv"), json1, function () {
 94                 var json2 = { "width": 100, "height": 100, "left": 50, "top": 50, "opacity": 1, "z-Index": 1000 }
 95                 animate(getId("dv"), json2)
 96             })
 97         }
 98 
 99         /* getId("btn").onclick = function () {
100             var json1 = { "width": 800, "height": 400, "left": 500, "top": 600, "opacity": 0.1 }
101             animate(getId("dv"), json1, function () {
102                 var json2 = { "width": 100, "height": 100, "left": 50, "top": 50, "opacity": 1, "z-Index": 1000 }
103                 animate(getId("dv"), json2)
104             })
105         } */
106     </script>
107 </body>
108 
109 </html>

 

posted @ 2021-03-07 22:11  路~  阅读(31)  评论(0)    收藏  举报