javascript代码不报错又不运行,Web开发,技术交流,鱼C论坛

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

javascript代码不报错又不运行

本帖最后由 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.className = classname)
{
re.push(oObject);
}
}
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.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鱼币（忍痛中）！

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

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

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

其次，你看的是啥书

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

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

这两天，你发的问题，都是“没写索引位置”，下次自己从这个开始排查{:10_256:} ～

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

这样能否得到你的5C币？？？{:10_256:}

<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.className = classname)
                           {
                                    re.push(oObject);
                           }
                     }
                     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.style.left = oDi.offsetLeft + 1 + "px";
/*alert(oDi.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
额，我的浏览器大概得重装了。。。

电脑估计也得换了{:10_266:}

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.style.left < 0)
{
oDi.style.left = "100%";
}
oDi.style.left = oDi.offsetLeft - speed + "px";
}

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

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

{:5_106:}

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上不兼容啊。。。{:10_266:}{:10_254:}

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

页: [1]

鱼C论坛's Archiver

javascript代码不报错又不运行