[已解决]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

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