Question

对于我的学习，我在HTML，CSS，JS和JQuery中也做了很少的任务。

主要任务是移动大（红色）框和小（蓝色）框。

它应该像这样工作：用户检查上部（bigbox）或下部（smallbox）无线电以按文本输入（initialy 30px）写入的像素数（使用position：absolute）移动某个框。

问题是盒子应该精确地移动30px BUT实际上你可以在控制台中看到它移动了39px - 它发生在任何输入值 - 盒子移动的值不同于它们应该以非常低的“速度”为例5px左右按钮BOTH向右移动框，上下按钮将框移动到底部，甚至在框外。

我和JS一起工作了一个星期所以我真的很新，任何帮助都将受到高度赞赏！如果我的代码很笨 - 抱歉，我不知道网页代码应该有多好，我还在努力！

更新：DaniP在评论部分回答了我。我正在处理的问题是我忘记了实际元素的边距也被添加到绝对位置。因此，最终的解决方案是将体边距设置为0，一切都运行良好。

function parseSpeed() {
    var speed = $('#speed').val();
    if (isNaN(speed)) {
        speed = 0;
    } else {
        speed = parseInt(speed, 10);
    }
    return speed;
}
function moveIfPossible(direction) {
    var activeBox = document.getElementById(swapBoxesIfNeeded());
    var x = activeBox.getBoundingClientRect().left;
    var y = activeBox.getBoundingClientRect().top;
    console.log(activeBox.id + ": x:" + x + ",y:" + y);
    var speed = parseSpeed();
    var boxlimit = 400;
    if(activeBox.id === "smallbox"){
        boxlimit = 370;
    }else{
        boxlimit = 340;
    }
    switch (direction) {
        case 0:
            if (x - speed >= 0) {
                activeBox.style.left = (x - speed) + "px";
            } else {
                activeBox.style.left = 0 + "px";
            }
            break;
        case 1:
            if (x + speed <= boxlimit) {
                activeBox.style.left = (x + speed) + "px";
            } else {
                activeBox.style.left = boxlimit + "px";
            }
            break;
        case 2:
            if (y - speed >= 0) {
                activeBox.style.top = (y - speed) + "px";
            } else {
                activeBox.style.top = 0 + "px";
            }
            break;
        case 3:
            if (y + speed <= boxlimit) {
                activeBox.style.top = (y + speed) + "px";
            } else {
                activeBox.style.top = boxlimit + "px";
            }
            break;
    }
}

function swapBoxesIfNeeded() {
    if (document.getElementById("small").checked) {
        return "smallbox";
    } else if (document.getElementById("big").checked) {
        return "bigbox";
    }
}

function moveBoxUp() {
    moveIfPossible(2);
}

function moveBoxDown() {
    moveIfPossible(3);
}

function moveBoxLeft() {
    moveIfPossible(0);
}

function moveBoxRight() {
    moveIfPossible(1);
}

#container {
    width: 400px;
    height: 500px;
    border: solid black 1px;
}

#game_window {
    position: relative;
    width: 400px;
    height: 400px;
}

#control_panel {
    width: 100%;
    height: 100px;
    border: solid black 1px;
}

#stats {
    float: left;
    width: 50%;
    height: auto;
    margin-top: 20px;
    text-align: right;
}

#speed {
    width: 20px;
}

#smallbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: solid blue 1px;
}

#bigbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: solid red 1px;
}

#buttons {
    clear: both;
    float: right;
    width: 50%;
    height: auto;
    margin-top: -60px;
    margin-right: 50px;
    text-align: center;
}

#up {
    background: lightgray url("images/arrow-up-bold.png") no-repeat center;
    padding: 12px;
    width: 16px;
    height: 16px;
}

#down {
    background: lightgray url("images/arrow-down-bold.png") no-repeat center;
    padding: 12px;
    width: 16px;
    height: 16px;
}

#left {
    background: lightgray url("images/arrow-left-bold.png") no-repeat center;
    padding: 12px;
    width: 16px;
    height: 16px;
}

#right {
    background: lightgray url("images/arrow-right-bold.png") no-repeat center;
    padding: 12px;
    width: 16px;
    height: 16px;
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>Zadanie 6</title>
    <meta name="keywords" content="Iwb,Lista 2,Zadanie 6"/>
    <meta name="description" content="Rozwiązanie listy 2 z BDAMI"/>
    <meta name="author" content="213"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="zad6.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="zad6.js"></script>
</head>
<body>
<div id="container">
    <div id="game_window">
        <div id="smallbox"></div>
        <div id="bigbox"></div>
    </div>
    <div id="control_panel">
        <div id="stats">
            <input type="radio" id="big" name="radio" checked title="radio1"/>Duże pudełko<br/>
            <input type="radio" id="small" name="radio" title="radio2"/>Małe pudełko<br/>
            <input type="text" id="speed" name="text" title="text1" size="2" maxlength="2" value="30"/>Szybkość(px)
        </div>
        <div id="buttons">
            <div>
                <input type="button" id="up" title="up" onclick="moveBoxUp();"><br/>
            </div>
            <div>
                <input type="button" id="left" title="left" onclick="moveBoxLeft();">
                <input type="button" id="down" title="down" onclick="moveBoxDown();">
                <input type="button" id="right" title="right" onclick="moveBoxRight();">
            </div>
        </div>
    </div>
</div>
</body>
</html>

为什么我的div移动的价值不同于JS

0 个答案: