code 练习

最新推荐文章于 2023-06-04 11:16:45 发布

N_ora

最新推荐文章于 2023-06-04 11:16:45 发布

阅读量130

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_33359745/article/details/106760117

版权

学习code 练习

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标当前位置</title>
    <script src="./common.js"></script>

</head>
<body>
<script>
    <!--每个16毫秒存储一个坐标点 一共存储5个 在pointList中 如果坐标点大于5 就把前面的坐标删除 每个坐标点分别赋值给每个div -->
    // 如果想要多个16毫秒进入一次，可以使用time
    var div;
    var divs = [];
    var point;
    var pointList = [];
    var time = 3;
    init();
    function init(){
        for(var i =0;i<5;i++){
            div = Utils.createDom('div',document.body,{
                width:'20px',
                height:'20px',
                backgroundColor:Utils.randomColor(),
                position:'absolute'
            })
            divs.push(div);
        }
        document.addEventListener('mousemove',moveHandler)
        animation()
    }
    function animation() {
        requestAnimationFrame(animation)
        time--;
        if(time>0)return;
        if(!point)return;
        time = 3;
        // 给每个div的坐标赋值
        for(var i =0;i<pointList.length;i++){
            divs[i].style.left = pointList[i].x+'px';
            divs[i].style.top = pointList[i].y +'px';
        }
        // 判断数组长度 === 5
        if(pointList.length>=5){
            // 删除最前面的一个点
            pointList.shift();
        }
        // 执行一次animation 存储一次当前坐标点
        pointList.push({
            x:point.x,
            y:point.y
        });
    }
    function moveHandler(e) {
        // 每次移动都会将point 重新赋值
        point= {
            x:e.x,
            y:e.y
        }
    }
</script>
</body>
</html>

运动轨迹：
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标当前位置</title>
    <script src="./common.js"></script>

</head>
<body>
<script>
    <!--每个16毫秒存储一个坐标点 一共存储5个 在pointList中 如果坐标点大于5 就把前面的坐标删除 每个坐标点分别赋值给每个div -->
    // 如果想要多个16毫秒进入一次，可以使用time
    var div;
    var divs = [];
    var point;
    var pointList = [];
    var time = 3;
    init();
    function init(){
        for(var i =0;i<5;i++){
            div = Utils.createDom('div',document.body,{
                width:'20px',
                height:'20px',
                backgroundColor:Utils.randomColor(),
                position:'absolute'
            })
            divs.push(div);
        }
        document.addEventListener('mousemove',moveHandler)
        animation()
    }
    function animation() {
        requestAnimationFrame(animation)
        time--;
        if(time>0)return;
        if(!point)return;
        time = 3;
        // 给每个div的坐标赋值
        for(var i =0;i<pointList.length;i++){
            divs[i].style.left = pointList[i].x+'px';
            divs[i].style.top = pointList[i].y +'px';
        }
        // 判断数组长度 === 5
        if(pointList.length>=5){
            // 删除最前面的一个点
            pointList.shift();
        }
        // 执行一次animation 存储一次当前坐标点
        pointList.push({
            x:point.x,
            y:point.y
        });
    }
    function moveHandler(e) {
        // 每次移动都会将point 重新赋值
        point= {
            x:e.x,
            y:e.y
        }
    }
</script>
</body>
</html>

N_ora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
code 练习

学习code 练习<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <
复制链接

扫一扫