2016-09-16 43 views
0

我试图做一个点击者游戏,当点击次数达到一定数量时,会发生一些事情。什么都没发生。任何想法,为什么我添加的if语句在达到10次点击次数时不做任何事情?如果声明为自动刷新

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Clicker</title> 
    <script src="counter.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> 
    <style> 
     body{ 
      text-align: center; 
      background-image: url("https://gift-frog.com/wp-content/uploads/2016/06/off-white-textured-background-1920x10803.jpg"); 
     } 
     h1{ 
      font-size: 100px; 
      color: #372424; 
     } 
     h3{ 
      color: #372424; 
     } 
     h2{ 
      color: #372424; 
     } 
     *.unselectable { 
      -moz-user-select: -moz-none; 
      -khtml-user-select: none; 
      -webkit-user-select: none; 

      /* 
       Introduced in IE 10. 
       See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 
      */ 
      -ms-user-select: none; 
      user-select: none; 
     } 
    </style> 
</head> 
<body id="body" onclick="doClick()"> 
    <nav class="navbar navbar-dark navbar-inverse"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
    </button> 
    <div class="collapse" id="exCollapsingNavbar"> 
    <div class="bg-inverse p-a-1"> 
     <h4>Your Statistics</h4> 
     <span class="text-muted">graph in development</span> 
     <br> 
     <h4>Rank</h4> 
     <progress class="progress progress-success" value="bob" max="500"></progress> 
    </div> 
    </div> 
</nav> 
    <div class="container"> 
    <div class="row"> 
    <div class="col-sm-4"> 
    </div> 
    <div class="col-sm-4"> 
     <h1 class="unselectable">Clicked <h1 class="unselectable" id="counter">0</h1></h1> <h1 class="unselectable">times</h1> 
    </div> 
    <div class="col-sm-4"> 
    </div> 
    </div> 
</div> 


</body> 
</html> 

这里是它的JavaScript。

/** 
* Created by Illuminati on 9/8/2016. 
*/ 
var clicks = 0; 
var multiplyer = 0; 

function doClick() { 
    clicks = clicks + 1; 
    var theCounter = document.getElementById('counter'); 
    theCounter.textContent = clicks; 
} 
if(clicks == 10){ 
    alert("test"); 
} 
+4

将条件移动到函数内部。在它之外,它只能在页面加载时被读取,而且总是被误认为是错误的。 – SchattenJager

+0

你认为我应该不停地做一个检查?或者你是否认为将它留在点击功能中会更聪明,因为它只会在点击后立即进行检查。 –

+1

@KodySimpson不要把它放在一个区间内。如果唯一一次点击变化在函数内部,则不需要它。 –

回答

1

将条件移到函数内部。在它之外,它只能在页面加载时被读取,而且总是被误认为是错误的。

+0

谢谢你,关于autoclicker的快速问题,如果你不介意帮助我...我试图让它每5秒钟做一个点击:window.setInterval(function(){ if(rank1!= true){ 返回false; } doClick(); },5000) },而是在5秒钟内完成尽可能多的点击,在5秒后没有明显的点击 –

+0

除了最后的额外}似乎它应该工作。 setInterval一直等到第一个时间间隔到达第一次触发时间。 – SchattenJager

1

if块只能运行一次,但只要用户单击该按钮,就会运行事件处理程序。

事情是这样的:

function doClick() { 
    clicks += 1; 
    var theCounter = document.getElementById('counter'); 
    theCounter.textContent = clicks; 
    if(clicks == 10){ 
     alert("test"); 
    } 
} 

而不是做此外,counter = counter + 1你也可以使用,clicks += 1这是完全一样的事情。