使用javascript制作一个圆反弹_Javascript

使用javascript制作一个圆反弹

javascript

使用javascript制作一个圆反弹,javascript,Javascript,我的目标是使一个圆向右移动，直到它碰到窗口的末端。然后它应该左转，直到撞到窗户的左侧。我很难弄明白为什么我的圆圈一旦撞到窗户的右边就不会反弹。在“反弹”之前，圆不会达到整个窗口宽度以下是html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Animate</title> <script s

我的目标是使一个圆向右移动，直到它碰到窗口的末端。然后它应该左转，直到撞到窗户的左侧。我很难弄明白为什么我的圆圈一旦撞到窗户的右边就不会反弹。在“反弹”之前，圆不会达到整个窗口宽度

以下是html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Animate</title>
    <script src="animate.js"></script>
</head>
<body>
    <h2>JavaScript Timers</h2>
    <p>
        <button onclick="left('thingToMove');">&larr; Move Left</button>
        <button onclick="stopMoving();">Stop</button>
        <button onclick="right('thingToMove');">Move Right&rarr;</button>
    </p>
    <div id='thingToMove' style="left:10px; position:absolute;">
        <img src="bluecircle.png" >
    </div>
    <div id="instructions" style="position: relative; top:1.25in;">
        <h3>Instructions</h3>
        <ol>
            <li>Re-write animate.js to use <code>setInterval()</code> instead of <code>setTimeout</code></li>
            <li>Add functionality to "bounce" off the side of the window rather than disappear.<br /><em>hint:</em> <code>window.innerWidth</code></li>
        </ol>
    </div>
</body>
</html>

到目前为止，我的javascript就是这样

var moving = "";
function $(id){
    return document.getElementById(id);
}
function right(id){
        stopMoving();
        $(id).style.left = parseInt($(id).style.left) + 1 + 'px';
        moving = setInterval(function(){right(id);},10);
        alert(window.innerWidth);
        if($(id).style.left > (window.innerWidth) + 'px'){
            left(id);
        }
}

function left(id){ 
        stopMoving();
        $(id).style.left = parseInt($(id).style.left) - 1 + 'px';
        moving = setInterval(function(){left(id);},10);
        if($(id).style.left < 0 + 'px'){
            right(id);
        }
}

function stopMoving(){
        window.clearInterval(moving);
}

var=”；
函数$（id）{
返回文档.getElementById（id）；
}
功能权限（id）{
停止移动（）；
$（id）.style.left=parseInt（$（id）.style.left）+1+'px'；
moving=setInterval（函数（）{right（id）；}，10）；
警报（窗口内宽度）；
if（$（id）.style.left>（window.innerWidth）+“px”）{
左（id）；
}
}
函数左（id）{
停止移动（）；
$（id）.style.left=parseInt（$（id）.style.left）-1+'px'；
moving=setInterval（函数（）{left（id）；}，10）；
if（$（id）.style.left<0+'px'）{
权利（id）；
}
}
函数stopMoving（）{
窗口。清除间隔（移动）；
}

圆圈通常会向右移动约90像素，然后反弹回左侧。我不知道为什么。

您正在比较字符串的宽度，这意味着字符串比较规则适用：

'90px'>'100px'

为真，因为

大于

字符串比较规则不是“人工比较”规则。

您正在比较字符串的宽度，这意味着字符串比较规则适用：

'90px'>'100px'

为真，因为

大于

字符串比较规则不是“人工比较”规则