Question

所以，我有一个脚本，允许我的网站上的用户像下雨功能一样激活。但是我希望他们能够把它关掉？问题是我对如何做到这一点没有任何线索，我尝试了很多不同的东西，比如休息，回归，一些超时的事情，但没有任何结果，所以我转向你那些聪明的人然后我知道这个：）

这是脚本，我通过onclick事件按下按钮激活脚本。

var amountOfDrops = 150; 
var started = false;
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);}
// function to generate drops
function createRain() {
if (started ===  false){

    for( i=1;i<amountOfDrops;i++) {
    var dropLeft = randRange(0,2400);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }
                            console.log("Start");
                            console.log(started);
                            started = !started; //flips the bool to stop
}else{
                                    console.log("Shut down");
                            console.log(started);
                            started = !started; //flips the bool to start
                            return false;
}}

我在互联网上搜索过但我找不到任何相关信息，所以非常感谢帮助。

EDIT（1）

所以，让我填补一些空白。

这是我的CSS：

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
                  color: #5cb1d1;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}

这就是我在html代码中调用它的方式：

<script type="text/javascript" src="scripts/Rain.js"></script>
<button onclick="createRain()">Start Rain</button>

Answer 1

我认为我们可以使用setInterval（）来解决这个问题。它适用于我只是检查出来。

＆＃13;

var amountOfDrops = 150; 
var started = false;
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);}
// function to generate drops
function createRain(started) {
if (started ===  false){

    for( i=1;i<amountOfDrops;i++) {
    var dropLeft = randRange(0,2400);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }
                            
}else{
                                   
                            
                            started = !started; //flips the bool to start
                            return false;
}}


$(document).on("click",".start",function(){
	started = false;
	setInterval(function(){
		createRain(started)
	},200)
})
$(document).on("click",".end",function(){
	started = true;
	setInterval(function(){
		createRain(started)
	},200)
	$(".drop").remove()
})

＆＃13;

body{
			background-color: #000000;
			width: 100%;
			overflow: hidden;
		}
		.btn{
			border: 1px solid #ffffff;
			color: #ffffff;
			background-color: transparent;
			margin: 20px auto;
      padding:5px 20px;
		}
		.btn:hover{
			color: #eeeeee;
		}
		.drop{
			  background-color: #000;
			  width: 1px;
			  height: 3px;
			  background-color: #ffffff;
			  position: relative;
			}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
		<button class="btn end">End</button>
		<button class="btn start">Start</button>
	</div>
	<div class="rain">
		
	</div>

＆＃13;

Answer 2

您可以尝试创建一个setInterval，然后为clearInterval设置一个setTimeout。只是一个想法，这可能是在功能内部或外部。另外，我很确定JavaScript不会执行console.log()并翻转布尔值，直到for语句完成。所以最好的方法是setInterval然后有一个clearInterval，无论是setTimeout还是只需点击一下按钮。

Answer 3

我有同样的问题，您可以尝试为您的功能添加计时器你可以使用：

$('#someElement').click(function(){
    // Clear the timeout
    clearTimeout(timer);
});

Javascript |如何停止在网站上运行的功能

3 个答案: