开发中遇到的bug-由于==/和=引发的bug导致盒子运动失败

最新推荐文章于 2022-07-18 01:35:54 发布

火腿肠烧烤大赛冠军

最新推荐文章于 2022-07-18 01:35:54 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/s2422617864/article/details/108668249

版权

开发bug合集专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在写盒子运动时遇到的bug

在if（）判断中不要写if（a=true）哪怕你是写==呢（当然求求你比较时候不要写赋值了）
bug在60和66行中

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #b1,
    #b2,
    #b3 {
        width: 100px;
        height: 100px;
        background: deepskyblue;
    }

    #b2 {
        background: palevioletred;
        margin: 10px 0;
    }
</style>

<body>
    <!-- <div id="app"> -->
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
    <!-- </div> -->

</body>

</html>
<script type="text/javascript">
    var oDiv = document.querySelectorAll('div');
    for (var i = 0; i < oDiv.length; i++) {
        oDiv[i].onmouseover = function () {
            startMove(this, { width: 500 })
        }
        oDiv[i].onmouseout = function () {
            startMove(this, { width: 100 })
        }
    }
    var times = null;
    function startMove(ele, obj, callback) {
        var onOff = false;
        clearInterval(ele.times);
        // 开关的设置
        // 设置定时器
        ele.times = setInterval(function () {
            for (var attr in obj) {
                //计算speed 目标值 元素实时位置
                var tmpPos = parseInt(getPos(ele, attr));
                var speed = parseInt(obj[attr] - tmpPos) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (obj[attr] == tmpPos) {
                    onOff = true;
                }
                ele.style[attr] = tmpPos + speed + 'px';
            }
            // 属性都运行完毕清定时器
            if (onOff) {
                clearInterval(ele.times);
                callback && callback();
            }
        }, 30)

    }
    // 获取元素的实时位置的函数(获取的值带有px)
    function getPos(obj, attr) {
        if (obj.currentStyle) {   // 获取css的样式
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj)[attr]
        }
    }

</script>

火腿肠烧烤大赛冠军

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开发中遇到的bug-由于==/和=引发的bug导致盒子运动失败

在写盒子运动时遇到的bug在if（）判断中不要写if（a=true）哪怕你是写==呢（当然求求你比较时候不要写赋值了）bug在60和66行中<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><style type="text/css"> * { margin: 0
复制链接

扫一扫

专栏目录