javascript试图找到兔子代码

-1

因此，本书中的练习如下：尝试将其变成一个“抓住兔子”的游戏，兔子随时随地移动它。 4次尝试将鼠标悬停后，应显示“无复活节彩蛋”消息。经过20次尝试后，应显示“人类吸食”。创建带有固定宽度和高度的单个div元素的页面，并在其周围有一个边框，其中包含一个正下方包含idso的p元素，您可以将其用作输出。使用div上的onmousemove事件来计算事件触发的次数，并在p元素中显示计数。首先我有一个迷你型的锻炼我尝试下面的代码：javascript试图找到兔子代码

<body> 
    <div> 
    <h1>Catch the Easter Bunny to get your egg!</h1> 
    <img src="rabbit.png" id="rabbit" onmouseover="MyFunction1()" alt="Catch the rabbit"/> 
    <img src="rabbit.png" id="rabbit2" onmouseover="MyFunction2()" alt="Catch the rabbit"/> 
    <img src="rabbit.png" id="rabbit3" onmouseover="MyFunction3()" alt="Catch the rabbit"/> 
    <img src="rabbit.png" id="rabbit4" onmouseover="MyFunction4()" alt="Catch the rabbit"/> 
    <h2 id="noeggs">No Easter Eggs for You</h2> 
    <h2 id="yousuck">Humans suck!!!</h2> 
    </div> 
<script> 
    function MyFunction1(){ 
    document.getElementById('rabbit').style.visibility = 'hidden'; 
    document.getElementById('rabbit2').style.visibility = 'visible'; 
    document.getElementById('rabbit3').style.visibility = 'visible'; 
    document.getElementById('rabbit4').style.visibility = 'visible'; 
    } 

    function MyFunction2(){ 
    document.getElementById('rabbit').style.visibility = 'visible'; 
    document.getElementById('rabbit2').style.visibility = 'hidden'; 
    document.getElementById('rabbit3').style.visibility = 'visible'; 
    document.getElementById('rabbit4').style.visibility = 'visible'; 
    } 

    function MyFunction3(){ 
    document.getElementById('rabbit').style.visibility = 'visible'; 
    document.getElementById('rabbit2').style.visibility = 'visible'; 
    document.getElementById('rabbit3').style.visibility = 'hidden'; 
    document.getElementById('rabbit4').style.visibility = 'visible'; 
    } 

    function MyFunction4(){ 
    document.getElementById('rabbit').style.visibility = 'visible'; 
    document.getElementById('rabbit2').style.visibility = 'visible'; 
    document.getElementById('rabbit3').style.visibility = 'visible'; 
    document.getElementById('rabbit4').style.visibility = 'hidden'; 
    } 
</script> 
</body>

这工作得很好，但实际行使希望它变成1周功能的MyFunction不Myfunction1，MyFunction的2等..和ofcourse 20张不同的兔子图片而这一切，如果你4次尝试中得到它，你获得了“人类吮吸出现”，或者如果它的20倍以上，你得到“没有复活节彩蛋你”所以后来我尝试了以下内容：

 This is the html: 
<body> 
<div> 
<p></p>  
<h1>Catch the Easter Bunny to get your egg!</h1> 
<img src="rabbit.png" id="r1" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r2" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r3" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r4" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r5" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r6" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r7" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r8" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r9" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r10" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r11" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r12" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r13" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r14" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r15" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r16" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r17" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r18" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r19" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<img src="rabbit.png" id="r20" onmouseover="MyFunction()" alt="Catch the rabbit"/> 
<h2 id="noeggs">No Easter Eggs for You</h2> 
<h2 id="yousuck">Humans suck!!!</h2> 
</div> 
<script> 

function MyFunction(){ 

    document.getElementByTagNames('img').addEventListener('mouseover', onmouse); 

    document.getElementById('r1').style.visibility = "hidden"; 
    document.getElementById('r2').style.visibility = "hidden"; 
    document.getElementById('r3').style.visibility = "hidden"; 
    document.getElementById('r4').style.visibility = "hidden"; 
    document.getElementById('r5').style.visibility = "hidden"; 
    document.getElementById('r6').style.visibility = "hidden"; 
    document.getElementById('r7').style.visibility = "hidden"; 
    document.getElementById('r8').style.visibility = "hidden"; 
    document.getElementById('r9').style.visibility = "hidden"; 
    document.getElementById('r10').style.visibility = "hidden"; 
    document.getElementById('r11').style.visibility = "hidden"; 
    document.getElementById('r12').style.visibility = "hidden"; 
    document.getElementById('r13').style.visibility = "hidden"; 
    document.getElementById('r14').style.visibility = "hidden"; 
    document.getElementById('r15').style.visibility = "hidden"; 
    document.getElementById('r16').style.visibility = "hidden"; 
    document.getElementById('r17').style.visibility = "hidden"; 
    document.getElementById('r18').style.visibility = "hidden"; 
    document.getElementById('r19').style.visibility = "hidden"; 
    document.getElementById('r20').style.visibility = "hidden"; 

    var code = document.querySelectorAll('img'); 

    function onmouse(){ 
     if(code == (document.querySelectorAll('img').style.visibility = 'visible')){ 
     for(i = 0; i < code; i++){ 
       code[i] = (int)(Math.random() * 20); 
      } 
     } 
    } 
} 
</script> 
</body>

我我曾多次尝试过这样做，但即使当我将兔子的全部可见性都隐藏起来的时候。我不知道我试过至少十次不同的尝试的程序有什么问题。这是一个报告，因为我以前的帖子中有人基本上用自己的观点发布了垃圾邮件，这与我的编程和问题无关。我正在试着理解。我猜可能我的for循环不会通过querySelector（'img'）检测数组;并且我还使用了一个css文件来隐藏嗡嗡声，而不是颜色：如果您想知道的话，请使用白色。我认为addEventListener也是一个问题。请帮助并让我明白我的脚本有什么问题。做这个工作。再次请不要评论我的编码的意见只是答案，可能会帮助我解决我遇到的这个问题。谢谢

来源

2016-02-19 NarinderRSharma

什么问题？ – Pointy

SO不存在为你做功课。 – gravityplanx

问题是我试过一切都不行。甚至隐藏兔子。当它只有四只兔子和四个不同的MyFunctions它可以工作，但我需要它在一个MyFunction中不是，onmouseover = MyFunction（），onemouseover = MyFunction2（）等... – NarinderRSharma

这工作得很好，但实际行使希望它变成1周功能的MyFunction不Myfunction1，MyFunction的2等..和ofcourse 20种不同的兔子图像和所有

这所以不是：

function MyFunction1(){ 
    document.getElementById('rabbit').style.visibility = 'hidden'; 
    document.getElementById('rabbit2').style.visibility = 'visible'; 
    document.getElementById('rabbit3').style.visibility = 'visible'; 
    document.getElementById('rabbit4').style.visibility = 'visible'; 
}

你想要做的就是将一个输入变量传递给你的函数。您定义输入这样的：

function MyFunction(inputVariable){

，然后当你以后调用的函数，你会在一定的价值将它传递;

onmouseover="MyFunction(1)"

所以在函数的本次特定呼叫，传递InputVariable将等于1。如果此后人称其为MyFunction(7)，传递InputVariable将等于7

通过提供一个输入变量，我们可以改变我们的函数的行为：

if(inputVariable == 1){ 
    document.getElementById('rabbit').style.visibility = 'hidden'; 
} else { 
    document.getElementById('rabbit').style.visibility = 'visible'; 
}

等

至于让你的CSS影响正常工作，我看到了两个主要的罪魁祸首;

某些函数名拼写错误。这会导致错误，因此要验证您的拼写是否正确，只需检查您的开发人员工具！对于大多数浏览器，您可以通过按下键盘上的F12键访问控制台，然后转到显示的窗口上的“控制台”选项卡。如果代码中发生错误（例如拼写错误），它应该显示在那里并让您意识到问题。
在少数情况下，您使用document.get样式命令返回数组。如果你还不熟悉数组，我会建议对它们进行一些研究，因为它们非常重要。您需要使用for循环才能遍历这些数组的每个项目并应用所需的CSS样式。

希望这可以帮助你。 :)

来源

2016-02-20 02:02:43 gravityplanx

所以我试了一下，但它让我所有的兔子，然后剩下一个：函数MyFunction（inputVar）{ document.querySelectorAll（'img'）[0] .style.visibility ='visible'; document.querySelectorAll（'img'）[1] .style.visibility ='hidden'; document.querySelectorAll（'img'）[2] .style.visibility ='hidden'; 高达20然后在它下面做了一个if语句： if（inputVar == 0）{document.getElementById（'rabbit'）。style.visibility ='visible'; } else { document.getElementById（'rabbit'）。style.visibility ='hidden'; } – NarinderRSharma

在我的html： Catch the rabbit 等多达MyFunction的（19），但仍然无法正常工作 – NarinderRSharma

我知道控制台的，但错误没有表现出来只是一些我的代码和prolly我的onmouseout或onmouseover我不确定 – NarinderRSharma

javascript试图找到兔子代码

回答

相关问题