day16

1- 什么是事件委托，原理是什么？

原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。

2- js 中有几种定时器，有什么区别？

setTimeout() 和 setInterval()

setTimeout:一次性定时器,只在指定时间后执行一次;

setInterval以指定时间为周期循环执行

3- 如何清除定时器？

clearInterval()
clearTimeout()

4-封装一个动画函数

封装变速函数:

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        margin-top: 20px;
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <input type="button" value="移动" id="btn">
    <div id="dv"></div>

    <script src="js/common.js"></script>
    <script>

        function getStyle(element, attr) {
            // 判断浏览器是否指该属性
            return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]
        }

        // 点击按钮,可以改变宽高,位置,透明度,层级关系
        function animate(element, json, fn) {
            //清理定时器
            clearInterval(element.timerId)
            // 创建定时器
            element.timerId = setInterval(function () {
                // 创建标志位,确定定时器是否要清除
                var flag = true;
                for (var attr in json) {
                    if (attr == "opacity") {  //透明度
                        // 获取元素透明度
                        var current = parseInt(getStyle(element, attr) * 100);
                        console.log(current)
                        // 计算变化步数
                        var target = json[attr] * 100;
                        var step = (target - current) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step)
                        current += step;
                        element.style[attr] = current / 100;
                    }
                    else if (attr == "z-Index") {  //z-index属性
                        // 层级关系改变就是直接改属性值
                        element.style[attr] = json[attr]
                    }
                    else { // 普通属性
                        // 获取元素当前属性值
                        var current = parseInt(getStyle(element, attr))
                        // 移动步数(获取当前属性的目标值)
                        var target = json[attr];
                        // 确定移动步数,计算步长,达到缓动效果
                        var step = (target - current) / 10;
                        // 判断 取整
                        step = step > 0 ? Math.ceil(step) : Math.floor(step) //Math.ceil向上取整,Math.floor向下取整
                        current += step
                        element.style[attr] = current + "px";
                    }
                    // 判断目标是否到达位置
                    if (current != target) {
                        flag = false
                    }
                }
                if (flag) {
                    clearInterval(element.timerId)
                    if (fn) {
                        fn()
                    }
                }
            }, 20)
        }


        // 方法调用

        getId("btn").onclick = function () {
            var json1 = { "width": 800, "height": 400, "left": 500, "top": 600, "opacity": 0.1 }
            animate(getId("dv"), json1, function () {
                var json2 = { "width": 100, "height": 100, "left": 50, "top": 50, "opacity": 1, "z-Index": 1000 }
                animate(getId("dv"), json2)
            })
        }

        /* getId("btn").onclick = function () {
            var json1 = { "width": 800, "height": 400, "left": 500, "top": 600, "opacity": 0.1 }
            animate(getId("dv"), json1, function () {
                var json2 = { "width": 100, "height": 100, "left": 50, "top": 50, "opacity": 1, "z-Index": 1000 }
                animate(getId("dv"), json2)
            })
        } */
    </script>
</body>

</html>
posted @ 2021-03-07 23:04  非自然数  阅读(48)  评论(0)    收藏  举报