从0开始学web-day34-js进阶04

最新推荐文章于 2022-11-29 19:08:57 发布

oxygen_ls

最新推荐文章于 2022-11-29 19:08:57 发布

阅读量91

点赞数

分类专栏：前端 # js 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/123385068

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

1.复习
day34-js04复习
2.尝试为div元素绑定键盘事件

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 可以为div设置 tabindex属性 让其获取焦点-->
    <!-- tabindex属性的时候 它的属性值就决定了当用户按下tab键的时候，获取元素焦点的顺序 -->
    <div id="box" tabindex="2"></div>
    <input type="text" id="inp" tabindex="1">
    <script>
        // 获取元素
        var box = document.getElementById('box');
        var inp = document.getElementById('inp');

        // 尝试为box添加键盘事件
        box.onkeydown = function() {
            console.log('onkeydown');
        }

        // 获取焦点
        inp.onfocus = function() {
            console.log('获取焦点了');
        }
        // 失去焦点
        inp.onblur = function() {
            console.log('失去焦点了');
        }

        // 总结：当需要给一个div元素绑定键盘事件的时候，需要让其先获取焦点，方式就是设置tabindex属性值 按下tab键会按顺序获取焦点 按下shift+tab键会逆序执行
    </script>
</body>
</html>

3.裁剪布局交互

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!--
         裁剪布局
    <div class="container">
        遮盖层
        <div class="mask"></div>
        小方块区域
        <div class="area">
            <div class="dot"></div>
        </div>
    </div>
    -->

    <!-- 容器元素 -->
    <div id="container"></div>
    <!-- 引入tools工具文件 -->
    <script src="./js/tools.js"></script>

    
    <script>
        // 封装函数 绘制裁剪功能
        function drawImages(dom, width, height, img_url) {
            // 创建元素
            var mask = document.createElement('div');
            // 设置类名
            mask.className = 'mask';
            var area = document.createElement('div');
            area.className = 'area';
            var dot = document.createElement('div');
            dot.className = 'dot';

            // 追加元素
            dom.appendChild(mask);
            area.appendChild(dot);

            dom.appendChild(area);

            // 设置dom样式
            css(dom, {
                position: 'relative',
                width: width+'px',
                height: height+'px',
                backgroundImage: 'url('+ img_url +')',
                border: '1px solid red'
            })
            // 设置mask样式
            css(mask, {
                position: 'absolute',
                width: width+'px',
                height: height+'px',
                backgroundColor: 'rgba(0, 0, 0, 0.5)'

            })
            // 设置area样式
            css(area, {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '150px',
                height: '150px',
                backgroundImage: 'url('+ img_url +')'
            })
            // 设置dot样式
            css(dot, {
                position: 'absolute',
                width: 10+'px',
                height: 10+'px',
                borderRadius: '50%',
                backgroundColor: 'red',
                bottom: '-5px',
                right: '-5px'
            })

            // 为area绑定按下事件
            bindEvent(area, 'mousedown', function(e) {
                // 获取按下时候鼠标的位置
                var x = e.clientX;
                var y = e.clientY;

                // 获取按下时候元素的定位值
                var a_l = area.offsetLeft;
                var a_t = area.offsetTop;

                // 定义areaMove
                function areaMove(e) {
                    // 获取移动之后的鼠标位置
                    var m_x = e.x;
                    var m_y = e.y;

                    // 定义变量 简化书写
                    var resultX = m_x - x + a_l;
                    var resultY = m_y - y + a_t;

                    // 边界判断
                    // 左右
                    if(resultX < 0) {
                        resultX = 0;
                    } else if (resultX > dom.clientWidth - area.clientWidth) {
                        resultX = dom.clientWidth - area.clientWidth;
                    }
                    // 上下
                    if(resultY < 0) {
                        resultY = 0;
                    } else if (resultY > dom.clientHeight - area.clientHeight) {
                        resultY = dom.clientHeight - area.clientHeight;
                    }

                    // 赋值area的定位值
                    css(area, {
                        left: resultX + 'px',
                        top: resultY + 'px',
                        // 改变元素的背景定位
                        backgroundPositionX: -resultX + 'px',
                        backgroundPositionY: -resultY + 'px',
                    })
                }
                // 为document绑定移动事件
                bindEvent(document, 'mousemove', areaMove);

                // 鼠标抬起移除move事件
                bindEvent(document, 'mouseup', function() {
                    removeEvent(document, 'mousemove', areaMove);
                })
            })
            
            // 为dot绑定按下事件
            bindEvent(dot, 'mousedown', function(e) {
                // 在高级浏览器中冒泡方式
                e.stopPropagation();
                
                // 获取鼠标按下时候的位置
                var x = e.x;
                var y = e.y;

                // 获取当前宽高
                var a_w = area.clientWidth;
                var a_h = area.clientHeight;

                // 定义dotMove方法
                function dotMove(e) {
                    // 获取移动的位置
                    var d_l = e.x;
                    var d_t = e.y;

                    // 定义变量简化书写
                    var resultX = d_l - x + a_w;
                    var resultY = d_t - y + a_h;

                    // 边界限制
                    if(resultX < 50) {
                        resultX = 50;
                    } else if(resultX > dom.clientWidth - area.offsetLeft) {
                        resultX = dom.clientWidth - area.offsetLeft;
                    }

                    if(resultY < 50) {
                        resultY = 50;
                    } else if(resultY > dom.clientHeight - area.offsetTop) {
                        resultY = dom.clientHeight - area.offsetTop;
                    }

                    console.log(111,resultX);
                    console.log(222,resultY);

                    // 赋值area的宽高
                    css(area, {
                        width: resultX + 'px',
                        height: resultY +'px'
                    })
                }
                // 为document绑定移动事件
                bindEvent(document, 'mousemove', dotMove);

                // 鼠标抬起移除该事件
                bindEvent(document, 'mouseup', function() {
                    removeEvent(document, 'mousemove', dotMove);
                })
            })

        }
        // 执行方法
        drawImages(container, 430, 430, './images/small.jpg');
    </script>
</body>
</html>

4.放大镜

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #small {
            position: absolute;
            top: 200px;
            left: 20px;
            width: 400px;
            height: 400px;
            background-image: url(./images/small.jpg);
            border: 1px solid red;
            background-size: cover;
        }
        #mask {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            cursor: all-scroll;
        }
        #big {
            position: absolute;
            left: 450px;
            top: 200px;
            width: 400px;
            height: 400px;
            border: 1px solid red;
            background-image: url(./images/big.jpg);
            display: none;

        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <div id="small">
        <div id="mask"></div>
    </div>
    <div id="big"></div>
    
</body>
<script src="./js/tools.js"></script>
<script>
    // 获取元素
    var small = document.getElementById('small');
    var mask = document.getElementById('mask');
    var big = document.getElementById('big');

    // 鼠标移入
    small.onmouseenter = function() {
        // 让mask和big出现
        mask.style.display = 'block';
        big.style.display = 'block';
    }
    // 鼠标移出
    small.onmouseleave = function() {
        // 让mask和big隐藏
        mask.style.display = 'none';
        big.style.display = 'none';
    }

    // 获取元素位于页面之间的距离
    var small_position = offset(small);
    var small_left = small_position.left;
    var small_top = small_position.top;

    // 为small绑定move事件
    small.onmousemove = function(e) {
        // 获取当前鼠标的位置
        var x = e.pageX;
        var y = e.pageY;



        // 镜片的定位值=鼠标位于页面之间的距离-元素位于页面之间的距离
        var resultX = x - small_left - mask.clientWidth/2;
        var resultY = y - small_top - mask.clientHeight/2;

        // 边界判断
        if(resultX < 0) {
            resultX = 0;
        } else if(resultX > small.clientWidth - mask.clientWidth) {
            resultX = small.clientWidth - mask.clientWidth;
        }
        if(resultY < 0) {
            resultY = 0;
        } else if(resultY > small.clientHeight - mask.clientHeight) {
            resultY = small.clientHeight - mask.clientHeight;
        }

        // 直接赋值mask的定位值
        mask.style.left = resultX + 'px';
        mask.style.top = resultY + 'px';

        // 改变大图的背景图片定位
        big.style.backgroundPositionX = -resultX*2 + 'px';
        big.style.backgroundPositionY = -resultY*2 + 'px';
    }
</script>
</html>

5.获取元素的其他方式

<!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>
<body>
    <!-- <div id="box"></div>
    <div>hello world</div>
    <div>hello world</div>
    <div>hello world</div> -->

    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 获取id元素
        // var box = document.getElementById('box');

        // 希望能够向jq一样 获取元素 参数是选择器的形式
        // 在dom中提供了相应的方法 
            // document.querySelector
            // document.querySelectorAll

        // 参数表示选择器
        // var box = document.querySelector('#box');
        // 想要获取所有的div 不能通过document.querySelector
        // var divs = document.querySelector('div');

        // 而是通过 document.querySelectorAll获取
        // var divs = document.querySelectorAll('div');
        // console.log(divs);

        // 之前还可以通过document.getElementsByTagName
        // var divs2 = document.getElementsByTagName('div');
        // console.log(divs2);

    </script>
    <script>
        
        // document.querySelectorAll和document.getElementsByTagName的区别

        // 获取页面所有的li元素(动态获取元素)
        var lis = document.getElementsByTagName('li');
        // console.log(lis);

        // 静态获取元素的方式
        var query_lis = document.querySelectorAll('li')
        // // console.log(query_lis);

        // // 创建元素
        // var li = document.createElement('li');
        // // 设置内部文本
        // li.innerHTML = 'haha';

        // // 追加元素
        // list.appendChild(li);
        // console.log(lis);
        // console.log(query_lis);

        for(var i=0;i<query_lis.length;i++) {
            list.appendChild(document.createElement('li'));
        }
        console.log(lis);
        console.log(query_lis);
    </script>
</body>
</html>

6.小钢琴

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list {
            display: flex;
            width: 700px;
            border: 1px solid #000;
            height: 400px;
            margin: 0 auto;
        }
        .list > li {
            width: 100px;
            border-right: 1px solid #000;
        }
        .list > li:last-child {
            border-right: none;
        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 音频标签 -->
    <audio src="" autoplay id="audio"></audio>
    <script>
        // 获取元素
        var lis = document.querySelector('.list').querySelectorAll('li');
        var audio = document.querySelector('audio');

        // 绑定键盘事件
        document.onkeydown = function(e) {
            // 获取按下的字符
            var key = e.key;

            // 判断按下的字符
            // 当值的可能性很多的时候 可以利用switch语句
            // 利用+把key的数据类型转换成字符串
            switch (+key) {
                // // case是一个真正的全等判断
                // case 1:
                //     // 改变对应li的背景颜色
                //     lis[key-1].style.backgroundColor = 'pink';
                //     // 找到对应的音频文件
                //     audio.src = './audio/'+ key +'.mp3';
                //     break;

                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                    // 改变对应li的背景颜色
                    lis[key-1].style.backgroundColor = 'pink';
                    // 找到对应的音频文件
                    audio.src = './audio/'+ key +'.mp3';
                    break;
            
                default:
                    console.log('别瞎按');
                    break;
            }
        }

         // 绑定键盘事件
         document.onkeyup = function(e) {
            // 获取按下的字符
            var key = e.key;
            // 当值的可能性很多的时候 可以利用switch语句
            // 利用+把key的数据类型转换成字符串
            switch (+key) {
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                    // 改变对应li的背景颜色
                    lis[key-1].style.backgroundColor = '';
                    break;
            
                default:
                    console.log('别瞎按');
                    break;
            }
        }
    </script>
</body>
</html>

7.touch事件

<!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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // 获取元素
        var box = document.querySelector('#box');

        // 事件对象：
            // 在touchstart和touchmove事件中 指示手指相关信息的属性：e.touches
            // 在touchstart touchmove以及touchend事件中， 指示手指相关信息的属性：e.changedTouches

        // 添加移动端的事件

        // touchstart 触摸开始
        box.addEventListener('touchstart', function(e) {
            console.log('touchstart', e);
        })
        // touchmove 触摸移动
        box.addEventListener('touchmove', function(e) {
            console.log('touchmove', e);
        })
        // touchend 触摸结束
        box.addEventListener('touchend', function() {
            console.log('touchend');
        })
        // touchcancel 触摸中断
        // box.addEventListener('touchcancel', function() {
        //     console.log('touchcancel');
        // })

        // 使用延时器来模拟中断操作
        // setTimeout(function() {
        //     alert('来电话了');
        // }, 2000)

        
    </script>
</body>
</html>

8.过渡事件

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 添加过渡 */
            /* transition: left 1s; */
            transition: all 1s;
        }
        div.active {
            left: 200px;
        }
    </style>
</head>
<body>
    <button id="btn">点我添加过渡</button>
    <div id="box"></div>
    <script>
        // 绑定事件
        btn.onclick = function() {
            // 为元素设置类名 方法1
            // box.className = 'active';

            // 通过方法2
            box.setAttribute('class','active');
        }

        // 当元素过渡开始的时候
        box.addEventListener('transitionstart', function() {
            console.log('过渡开始');
        });
        // 当元素过渡完成的时候
        box.addEventListener('transitionend', function() {
            console.log('过渡完成');
        });
    </script>
</body>
</html>

9.动画事件

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /* 定义动画 */
        @keyframes donghua {
            from {
                left: 0;
            }
            to {
                left: 300px;
            }
        }
    </style>
</head>
<body>
    <button id="btn">点我添加动画</button>
    <div id="box"></div>
    <script>
        // 绑定事件
        btn.onclick = function() {
            box.style.animation = 'donghua 1s linear 0s 3 alternate forwards'
        }

        // 当元素动画开始的时候
        box.addEventListener('animationstart', function() {
            console.log('动画开始');
        });
        // 当元素动画完成的时候
        box.addEventListener('animationend', function() {
            console.log('动画完成');
        });
    </script>
</body>
</html>

10.zepto

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <!-- 引入zepto -->
    <script src="./js/zepto.js"></script>
    <script>
    //    当引入zepto后可以向jq那样获取元素了
    var $box = $('#box');
    // console.log($box);

    // 让元素运动到500的位置
    $box.animate({left: 100}, 2000);
    </script>
</body>
</html>

11.touch模块

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <!-- 引入zepto -->
    <script src="./js/zepto.js"></script>
    <script>
    //    当引入zepto后可以向jq那样获取元素了
    var $box = $('#box');
    
    // 绑定touch模块中的方法
    // $box.tap(function() {
    //     console.log('tap');
    // })

    // $box.click(function() {
    //     console.log('click');
    // })

    // tap 触碰
    $box.tap(function() {
        console.log('tap');
    })

    // singleTap 单击
    $box.singleTap(function() {
        console.log('singleTap');
    })

    // longTap 长按
    $box.longTap(function() {
        console.log('longTap');
    })
    // doubleTap 双击
    $box.doubleTap(function() {
        console.log('doubleTap');
    })
    // swipe 滑动
    $box.swipe(function() {
        console.log('swipe');
    })
    // swipeLeft左滑动
    $box.swipeLeft(function() {
        console.log('swipeLeft');
    })
    // swipeRight右滑动
    $box.swipeRight(function() {
        console.log('swipeRight');
    })
    // swipeUp 上滑动
    $box.swipeUp(function() {
        console.log('swipeUp');
    })
    // swipeDown下滑动
    $box.swipeDown(function() {
        console.log('swipeDown');
    })

    </script>
</body>
</html>