设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › javascript代码不报错又不运行
返回列表 发新帖
查看: 2872|回复: 16

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

[复制链接]
1314xxxxxx
发表于 2017-7-11 21:20:37 | 显示全部楼层 |阅读模式

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

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

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

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

  12.         <script>
  13.         window.onload=function ()
  14.         {
  15.                 function getElementsByClassName(object,classname)
  16.                 {
  17.                         var oObject = document.getElementsByTagName(object);
  18.                         var re = [];
  19.                         for (var i = 0;i < oObject.length;i++)
  20.                         {
  21.                                 if (oObject[i].className = classname)
  22.                                 {
  23.                                         re.push(oObject[i]);
  24.                                 }
  25.                         }
  26.                         return re;
  27.                 }
  28.                 var oYou = document.getElementById("you");
  29.                 var oDi = getElementsByClassName("div","di");
  30.                
  31.                 document.onmousemove=function (ev)
  32.                 {
  33.                         oEv = ev||event
  34.                         var l = oYou.style.left;
  35.                         var r = oYou.style.top;
  36.                         if (l < 0)
  37.                         {
  38.                                 l = 0;
  39.                         }
  40.                         else if (r < 0)
  41.                         {
  42.                                 r = 0;
  43.                                 alert("You are win!")
  44.                         }
  45.                         else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
  46.                         {
  47.                                 l = document.documentElement.clientWidth-oYou.offsetWidth;
  48.                         }
  49.                         else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
  50.                         {
  51.                                 r = document.documentElement.clientHeight-oYou.offsetHeight;
  52.                         }
  53.                         else
  54.                         {
  55.                                 oYou.style.top=oEv.clientY;
  56.                                 oYou.style.left=oEv.clientX;
  57.                         }
  58.                        
  59.                         for (var i = 0;i < oDi[i].length;i++)*
  60.                         {*
  61.                                 oDi[i].style.left = oDi.offsetLeft + 10 + "px";*
  62.                         }*
  63.                 }
  64.                
  65.         }
  66.         </script>
  67. </head>
  68. <body>
  69.         <div id="you"></div>
  70.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
  71.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
  72.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
  73.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
  74. </body>
  75. </html>
复制代码

如果有我满意的回答，奖赏5鱼币（忍痛中）！
最佳答案
月排行榜 / 总排行榜
ba21
2017-7-11 22:08:47

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

  1. <html>
  2. <head>
  3.         <style>
  4.         #you {
  5.                 background:yellow;
  6.                 position:absolute;
  7.                 height:100px;
  8.                 width:100px;
  9.         }
  10.         </style>

  12.         <script>
  13.         window.onload=function ()
  14.         {
  15.                 function getElementsByClassName(object,classname)
  16.                 {
  17.                         var oObject = document.getElementsByTagName(object);
  18.                         var re = [];
  19.                         for (var i = 0;i < oObject.length;i++)
  20.                         {
  21.                                 if (oObject[i].className = classname)
  22.                                 {
  23.                                         re.push(oObject[i]);
  24.                                 }
  25.                         }
  26.                         return re;
  27.                 }
  28.                 var oYou = document.getElementById("you");
  29.                 var oDi = getElementsByClassName("div","di");
  30.                
  31.                 document.onmousemove=function (ev)
  32.                 {
  33.                         oEv = ev||event
  34.                         var l = oYou.style.left;
  35.                         var r = oYou.style.top;
  36.                         if (l < 0)
  37.                         {
  38.                                 l = 0;
  39.                         }
  40.                         else if (r < 0)
  41.                         {
  42.                                 r = 0;
  43.                                 alert("You are win!")
  44.                         }
  45.                         else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
  46.                         {
  47.                                 l = document.documentElement.clientWidth-oYou.offsetWidth;
  48.                         }
  49.                         else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
  50.                         {
  51.                                 r = document.documentElement.clientHeight-oYou.offsetHeight;
  52.                         }
  53.                         else
  54.                         {
  55.                                 oYou.style.top=oEv.clientY;
  56.                                 oYou.style.left=oEv.clientX;
  57.                         }
  58.                         
  59.                         for (var i = 0;i < oDi.length;i++)
  60.                         {
  61.                                 oDi[i].style.left = oDi[i].offsetLeft + 1 + "px";
  62.                                                         /*alert(oDi[i].id);*/
  63.                         }
  64.                 }
  65.                
  66.         }
  67.         </script>
  68. </head>
  69. <body>
  70.         <div id="you"></div>
  71.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
  72.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
  73.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
  74.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
  75. </body>
  76. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2017-7-11 21:48:22 | 显示全部楼层
本帖最后由 不二如是 于 2017-7-12 06:26 编辑

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

其次，你看的是啥书

错误：
  1.      for (var i = 0;i < oDi[i].length;i++)*
  2.                         {*
  3.                                 oDi[i].style.left = oDi.offsetLeft + 10 + "px";*
  4.                         }*
复制代码



建议：
  1. for (var i = 0;i < oDi.length;i++)
  2.                         {
  3.                                 oDi[i].style.left = oDi[i].offsetLeft + 10 + "px";
  4.                         }
复制代码




这两天，你发的问题，都是“没写索引位置”，下次自己从这个开始排查 ～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-11 22:08:47 | 显示全部楼层    本楼为最佳答案   

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

  1. <html>
  2. <head>
  3.         <style>
  4.         #you {
  5.                 background:yellow;
  6.                 position:absolute;
  7.                 height:100px;
  8.                 width:100px;
  9.         }
  10.         </style>

  12.         <script>
  13.         window.onload=function ()
  14.         {
  15.                 function getElementsByClassName(object,classname)
  16.                 {
  17.                         var oObject = document.getElementsByTagName(object);
  18.                         var re = [];
  19.                         for (var i = 0;i < oObject.length;i++)
  20.                         {
  21.                                 if (oObject[i].className = classname)
  22.                                 {
  23.                                         re.push(oObject[i]);
  24.                                 }
  25.                         }
  26.                         return re;
  27.                 }
  28.                 var oYou = document.getElementById("you");
  29.                 var oDi = getElementsByClassName("div","di");
  30.                
  31.                 document.onmousemove=function (ev)
  32.                 {
  33.                         oEv = ev||event
  34.                         var l = oYou.style.left;
  35.                         var r = oYou.style.top;
  36.                         if (l < 0)
  37.                         {
  38.                                 l = 0;
  39.                         }
  40.                         else if (r < 0)
  41.                         {
  42.                                 r = 0;
  43.                                 alert("You are win!")
  44.                         }
  45.                         else if (l > document.documentElement.clientWidth-oYou.offsetWidth)
  46.                         {
  47.                                 l = document.documentElement.clientWidth-oYou.offsetWidth;
  48.                         }
  49.                         else if (r >document.documentElement.clientHeight-oYou.offsetHeight)
  50.                         {
  51.                                 r = document.documentElement.clientHeight-oYou.offsetHeight;
  52.                         }
  53.                         else
  54.                         {
  55.                                 oYou.style.top=oEv.clientY;
  56.                                 oYou.style.left=oEv.clientX;
  57.                         }
  58.                         
  59.                         for (var i = 0;i < oDi.length;i++)
  60.                         {
  61.                                 oDi[i].style.left = oDi[i].offsetLeft + 1 + "px";
  62.                                                         /*alert(oDi[i].id);*/
  63.                         }
  64.                 }
  65.                
  66.         }
  67.         </script>
  68. </head>
  69. <body>
  70.         <div id="you"></div>
  71.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:0%;" id="di1" class="di"></div>
  72.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:10%;" id="di2" class="di"></div>
  73.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:20%" id="di3" class="di"></div>
  74.         <div style="background:red;position:absolute;height:200px;width:300px;left:0px;top:30%" id="di4" class="di"></div>
  75. </body>
  76. </html>
复制代码

评分

参与人数 2荣誉 +6 鱼币 +11 收起 理由
1314xxxxxx + 1 感谢楼主无私奉献！
不二如是 + 6 + 10 欢迎一起打造Web板块

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 08:07:21 | 显示全部楼层
ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

我今晚试试，要是行的话5鱼币就送你了。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 08:09:30 | 显示全部楼层
多谢二位大神出手相助！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 08:10:11 | 显示全部楼层
不二如是 发表于 2017-7-11 21:48
首先，你要说“你这段代码”要干嘛。。。

其次，你看的是啥书

太粗心大意了，下次肯定不会把索引搞错！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 13:09:14 | 显示全部楼层
ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

我只能评分1次，1次只能送1鱼币。。。你再回四次，我来评分（sorry）
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 13:53:25 | 显示全部楼层
ba21 发表于 2017-7-11 22:08
这样能否得到你的5C币？？？

另外问一下，第36-39行让黄色的div的left无法变成负数。可是，我用了Chrome控制台看了一下黄色div的left，发现可以为负数，这是怎么回事？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

评分

参与人数 1鱼币 +1 收起 理由
1314xxxxxx + 1 再发三次

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 15:41:18 | 显示全部楼层
ba21 发表于 2017-7-12 14:12
哪里有负数了？黄色DIV左上角就是鼠标的指针，这样怎么也不可能会有负数。

额，我的浏览器大概得重装了。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-12 15:59:28 | 显示全部楼层
1314xxxxxx 发表于 2017-7-12 15:41
额，我的浏览器大概得重装了。。。

电脑估计也得换了

评分

参与人数 1荣誉 +1 鱼币 +1 收起 理由
1314xxxxxx + 1 + 1 再发2次。。。

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 16:31:30 | 显示全部楼层
本帖最后由 1314xxxxxx 于 2017-7-12 16:32 编辑
ba21 发表于 2017-7-12 15:59
电脑估计也得换了


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

  2. for (var i = 0;i < oDi.length;i++)
  3. {
  4.         var speed = Math.ceil(Math.random()*10)
  5.         oEv = ev||event
  6.                                                                
  7.         if (oDi[i].style.left < 0)
  8.         {
  9.                 oDi[i].style.left = "100%";
  10.         }
  11.         oDi[i].style.left = oDi[i].offsetLeft - speed + "px";
  12. }   
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-12 16:41:10 | 显示全部楼层
1314xxxxxx 发表于 2017-7-12 16:31
的确。。。
对了，我后来多写了些代码，你来看看。

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 16:51:02 | 显示全部楼层
ba21 发表于 2017-7-12 16:41

额，那啥。。。这段代码是用来让红色div移动并确保它不会移出可视区的，你看看有没有错误。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-12 16:55:23 | 显示全部楼层
ba21 发表于 2017-7-12 16:41

话说为什么代码在FF上不兼容啊。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

有。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-12 16:58:20 | 显示全部楼层
1314xxxxxx 发表于 2017-7-12 16:55
话说为什么代码在FF上不兼容啊。。。

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

评分

参与人数 1荣誉 +1 收起 理由
1314xxxxxx + 1 这是为什么呢？

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 11:44

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表