JS9.0-9.2-CSDN博客

本文链接：https://blog.csdn.net/wafer_biscuit/article/details/114680833

就剩轮播图了。。。加油吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main {
        /* margin: 200px auto; */
        position: relative;
        width: 300px;
        height: 200px;
        background-color: wheat;
        visibility: hidden;
    }

    .b1 {
        position: absolute;
        top: 0;
        right: 0;
    }

    body {
        background-color: white;
        /* visibility: hidden; */
    }
</style>

<body>
    <div class="bo"></div>
    <a href="###" class="cl">点击一下</a>
    <div class="main">123123
        <button class="b1">关闭</button>
    </div>
    <script>
        var bo = document.querySelector('body');
        var b1 = document.querySelector('.b1');
        var main = document.querySelector('.main');
        var cl = document.querySelector('.cl');
        cl.addEventListener('click', function () {
            main.style.visibility = 'visible';
            bo.style.backgroundColor='rgba(1,1,1,0.2)';
        });
        b1.addEventListener('click',function(){
            main.style.visibility = 'hidden';
            bo.style.backgroundColor='white';
        });//打开和关闭
        main.addEventListener('mousedown',function(e){
            var x=e.pageX-main.offsetLeft;
            var y=e.pageY-main.offsetTop;
            console.log(x);
            document.addEventListener('mousemove',move);
            function move(e){
                var xmain=e.pageX-x;
                var ymain=e.pageY-y;
                console.log(xmain);
                main.style.left=xmain+'px';
                main.style.top=ymain+'px';
            }
            main.addEventListener('mouseup',function(e){
                document.removeEventListener('mousemove',move)
            })
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .aa {
        position: relative;
        /* position是必须的！！！ */
        background-color: yellow;
        width: 200px;
        height: 100px;
    }

    .bb {
        position: relative;
        /* position是必须的！！！ */
        background-color: rgb(68, 7, 212);
        width: 200px;
        height: 100px;
    }
</style>

<body>
    <div class="a1"></div>
    <button class="b1">点一下前进200px</button>
    <button class="b2">点一下前进400px</button>
    <div class="aa">123</div>
    <div class="bb">abc</div>
    <button class="b3">backabit</button>
    <script>
        var a1 = document.querySelector('.a1');
        console.log(a1.clientWidth);//盒子内部的宽度

        function fn() {
            console.log(1);
        }
        fn();//这个要调用
        //立即执行函数，不用调用，直接立马执行
        // (function(){})()   或者        (function(){}())
        (function () {
            console.log(2);
        })();    //这个小括号可以看作是调用函数
        (function (a, b) {
            console.log(a + b);
        })(1, 3);   //分号很是重要
        //最大的作用是 独立创建了一个作用域！变量名不会冲突而且不用调用，框架必备


        var b1 = document.querySelector('.b1');
        var b2 = document.querySelector('.b2');
        b1.addEventListener('click', function () {
            a1.style.left = 0;
            var timer1 = setInterval(function () {
                var a1 = document.querySelector('.a1');
                a1.style.left = a1.offsetLeft + 4 + 'px';
                if (a1.offsetLeft >= 200) {
                    clearInterval(timer1);
                }   //停止动画的本质是停止计时器
            })
        }, 100);
        b2.addEventListener('click', function () {
            a1.style.left = 0;
            var timer2 = setInterval(function () {
                var a2 = document.querySelector('.a1');
                a1.style.left = a1.offsetLeft + 2 + 'px';
                if (a1.offsetLeft >= 400) {
                    clearInterval(timer2);
                }
            });
        });

        var b3 = document.querySelector('.b3');

        function ani1(a1, target, callback) {  //封装动画函数
            clearInterval(a1.timer2);           //解决方案
            a1.timer2 = setInterval(function () {   //很好的写法，不但使得每一个timer的意义清楚，而且不用反复开辟空间，只是在原有对象上加属性，节省了内存
                var step = Math.ceil((target - a1.offsetLeft) / 10);     //渐停效果,,避免出现小数而不精确，所以进行取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);            //实现了向后退！(利用了取整和取底)
                a1.style.left = a1.offsetLeft + step + 'px';
                if (a1.offsetLeft == target) {          //大于等于会导致backabit失效，一直动一下
                    clearInterval(a1.timer2);   //清除a1的timer2属性
                    if (callback) {
                        callback(); //如果有，就调用
                    }
                }
            }, 100);//回调函数写到这上面（清除定时器之后！！！）

        }
        var aa = document.querySelector('.aa');
        ani1(aa, 300);

        var bb = document.querySelector('.bb');
        bb.addEventListener('click', function () {
            ani1(bb, 400);   //点的越多，速度和总里程越长!每点一次，就新开个定时器解决方式在上面，使得只有一个定时器
        });
        b3.addEventListener('click', function () {
            ani1(bb, 200, function () {
                // alert('you did it!');
                bb.style.background = 'red'
            });  //回调函数，可以把函数传给另一个函数
        });
    </script>
</body>

</html>