[已解决]javascript代码不报错又不运行

1314xxxxxx · 发表于 2017-7-11 21:20:37

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 1314xxxxxx 于 2017-7-11 21:21 编辑

这个问题我弄了好几个小时。我只是个新手，不知道为什么按着书上的方法去做，但却总是没有成功。简直怀疑浏览器有问题。。。
为了不让大家误会，我事先说明一下：这个问题并非什么课堂上的课后题，我想来蹭答案；我并不是没有尝试改代码就来提问；我有在google上搜索；我有查看google控制台。
代码如下：（没写注释，sorry。可能导致程序不运行的地方我都做了个“*”号，另外说明一下，这个程序大概就是个躲避障碍游戏，有个黄色的div，会随着鼠标移动。其他的四个红色的div就是障碍，会不断进行运动。但是碰撞检测还没加上。）

<html>
<head>
        <style>
        #you {
                background:yellow;
                position:absolute;
                height:100px;
                width:100px;
        }
        </style>

        <script>
        window.onload=function ()
        {
                function getElementsByClassName(object,classname)
                {
                        var oObject = document.getElementsByTagName(object);
                        var re = [];
                        for (var i = 0;i < oObject.length;i++)
                        {
                                if (oObject[i].className = classname)
                                {
                                        re.push(oObject[i]);
                                }
                        }
                        return re;
                }
                var oYou = document.getElementById("you");
                var oDi = getElementsByClassName("div","di");
                
                document.onmousemove=function (ev)
                {
                        oEv = ev||event
                        var l = oYou.style.left;
                        var r = oYou.style.top;
                        if (l < 0)
                        {
                                l = 0;
                        }
                        else if (r < 0)
                        {
                                r = 0;
                                alert("You are win!")
                        }
                        else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
                        {
                                l = document.documentElement.clientWidth-oYou.offsetWidth;
                        }
                        else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
                        {
                                r = document.documentElement.clientHeight-oYou.offsetHeight;
                        }
                        else
                        {
                                oYou.style.top=oEv.clientY;
                                oYou.style.left=oEv.clientX;
                        }
                        
                        for (var i = 0;i < oDi[i].length;i++)*
                        {*
                                oDi[i].style.left = oDi.offsetLeft + 10 + "px";*
                        }*
                }
                
        }
        </script>
</head>
<body>
        <div id="you"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
</body>
</html>

如果有我满意的回答，奖赏5鱼币（忍痛中）！

最佳答案

月排行榜 / 总排行榜

ba21

2017-7-11 22:08:47

这样能否得到你的5C币？？？

<html>
<head>
        <style>
        #you {
                background:yellow;
                position:absolute;
                height:100px;
                width:100px;
        }
        </style>

        <script>
        window.onload=function ()
        {
                function getElementsByClassName(object,classname)
                {
                        var oObject = document.getElementsByTagName(object);
                        var re = [];
                        for (var i = 0;i < oObject.length;i++)
                        {
                                if (oObject[i].className = classname)
                                {
                                        re.push(oObject[i]);
                                }
                        }
                        return re;
                }
                var oYou = document.getElementById("you");
                var oDi = getElementsByClassName("div","di");
                
                document.onmousemove=function (ev)
                {
                        oEv = ev||event
                        var l = oYou.style.left;
                        var r = oYou.style.top;
                        if (l < 0)
                        {
                                l = 0;
                        }
                        else if (r < 0)
                        {
                                r = 0;
                                alert("You are win!")
                        }
                        else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
                        {
                                l = document.documentElement.clientWidth-oYou.offsetWidth;
                        }
                        else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
                        {
                                r = document.documentElement.clientHeight-oYou.offsetHeight;
                        }
                        else
                        {
                                oYou.style.top=oEv.clientY;
                                oYou.style.left=oEv.clientX;
                        }
                        
                        for (var i = 0;i < oDi.length;i++)
                        {
                                oDi[i].style.left = oDi[i].offsetLeft + 1 + "px";
                                                        /*alert(oDi[i].id);*/
                        }
                }
                
        }
        </script>
</head>
<body>
        <div id="you"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
</body>
</html>

跳转到最佳答案楼层

不二如是 · 发表于 2017-7-11 21:48:22

本帖最后由不二如是于 2017-7-12 06:26 编辑

首先，你要说“你这段代码”要干嘛。。。

其次，你看的是啥书

错误：

     for (var i = 0;i < oDi[i].length;i++)*
                        {*
                                oDi[i].style.left = oDi.offsetLeft + 10 + "px";*
                        }*

建议：

 for (var i = 0;i < oDi.length;i++)
                        {
                                oDi[i].style.left = oDi[i].offsetLeft + 10 + "px";
                        }

这两天，你发的问题，都是“没写索引位置[i]”，下次自己从这个开始排查

～

ba21 · 发表于 2017-7-11 22:08:47

这样能否得到你的5C币？？？

<html>
<head>
        <style>
        #you {
                background:yellow;
                position:absolute;
                height:100px;
                width:100px;
        }
        </style>

        <script>
        window.onload=function ()
        {
                function getElementsByClassName(object,classname)
                {
                        var oObject = document.getElementsByTagName(object);
                        var re = [];
                        for (var i = 0;i < oObject.length;i++)
                        {
                                if (oObject[i].className = classname)
                                {
                                        re.push(oObject[i]);
                                }
                        }
                        return re;
                }
                var oYou = document.getElementById("you");
                var oDi = getElementsByClassName("div","di");
                
                document.onmousemove=function (ev)
                {
                        oEv = ev||event
                        var l = oYou.style.left;
                        var r = oYou.style.top;
                        if (l < 0)
                        {
                                l = 0;
                        }
                        else if (r < 0)
                        {
                                r = 0;
                                alert("You are win!")
                        }
                        else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
                        {
                                l = document.documentElement.clientWidth-oYou.offsetWidth;
                        }
                        else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
                        {
                                r = document.documentElement.clientHeight-oYou.offsetHeight;
                        }
                        else
                        {
                                oYou.style.top=oEv.clientY;
                                oYou.style.left=oEv.clientX;
                        }
                        
                        for (var i = 0;i < oDi.length;i++)
                        {
                                oDi[i].style.left = oDi[i].offsetLeft + 1 + "px";
                                                        /*alert(oDi[i].id);*/
                        }
                }
                
        }
        </script>
</head>
<body>
        <div id="you"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
        <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
</body>
</html>

1314xxxxxx · 发表于 2017-7-12 08:07:21

ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

我今晚试试，要是行的话5鱼币就送你了。

1314xxxxxx · 发表于 2017-7-12 08:09:30

多谢二位大神出手相助！

1314xxxxxx · 发表于 2017-7-12 08:10:11

不二如是发表于 2017-7-11 21:48
首先，你要说“你这段代码”要干嘛。。。

其次，你看的是啥书

太粗心大意了，下次肯定不会把索引搞错！

1314xxxxxx · 发表于 2017-7-12 13:09:14

ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

我只能评分1次，1次只能送1鱼币。。。你再回四次，我来评分（sorry）

1314xxxxxx · 发表于 2017-7-12 13:53:25

ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

另外问一下，第36-39行让黄色的div的left无法变成负数。可是，我用了Chrome控制台看了一下黄色div的left，发现可以为负数，这是怎么回事？

ba21 · 发表于 2017-7-12 14:12:30

1314xxxxxx 发表于 2017-7-12 13:53
另外问一下，第36-39行让黄色的div的left无法变成负数。可是，我用了Chrome控制台看了一下黄色div的left ...

哪里有负数了？黄色DIV左上角就是鼠标的指针，这样怎么也不可能会有负数。

1314xxxxxx · 发表于 2017-7-12 15:41:18

ba21 发表于 2017-7-12 14:12
哪里有负数了？黄色DIV左上角就是鼠标的指针，这样怎么也不可能会有负数。

额，我的浏览器大概得重装了。。。

ba21 · 发表于 2017-7-12 15:59:28

1314xxxxxx 发表于 2017-7-12 15:41
额，我的浏览器大概得重装了。。。

电脑估计也得换了

1314xxxxxx · 发表于 2017-7-12 16:31:30

本帖最后由 1314xxxxxx 于 2017-7-12 16:32 编辑

ba21 发表于 2017-7-12 15:59
电脑估计也得换了

的确。。。
对了，我后来多写了些代码，你来看看。

for (var i = 0;i < oDi.length;i++)
{
        var speed = Math.ceil(Math.random()*10)
        oEv = ev||event
                                                                
        if (oDi[i].style.left < 0)
        {
                oDi[i].style.left = "100%";
        }
        oDi[i].style.left = oDi[i].offsetLeft - speed + "px";
}

ba21 · 发表于 2017-7-12 16:41:10

1314xxxxxx 发表于 2017-7-12 16:31
的确。。。
对了，我后来多写了些代码，你来看看。

1314xxxxxx · 发表于 2017-7-12 16:51:02

ba21 发表于 2017-7-12 16:41

额，那啥。。。这段代码是用来让红色div移动并确保它不会移出可视区的，你看看有没有错误。

1314xxxxxx · 发表于 2017-7-12 16:55:23

ba21 发表于 2017-7-12 16:41

话说为什么代码在FF上不兼容啊。。。

ba21 · 发表于 2017-7-12 16:57:27

1314xxxxxx 发表于 2017-7-12 16:51
额，那啥。。。这段代码是用来让红色div移动并确保它不会移出可视区的，你看看有没有错误。

有。

ba21 · 发表于 2017-7-12 16:58:20

1314xxxxxx 发表于 2017-7-12 16:55
话说为什么代码在FF上不兼容啊。。。

之前的没问题，你改后的FF没黄DIV

账号		自动登录	找回密码
密码			立即注册