Javascript |如何停止正在网站上运行的功能
因此,我已经有了一个脚本,允许在我的网站上运行的用户像雨特征一样激活。但我希望他们能够关闭它?事情是,我不知道如何做到这一点,我已经尝试过许多不同的事情,例如休息,返回,暂时的事情,但没有结果,所以我转向你们聪明的人并知道这一点,然后我做:)Javascript |如何停止正在网站上运行的功能
这是脚本,我激活脚本从一个按钮与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;
}}
我已经在互联网上搜索过,但我找不到任何有关它的东西,所以非常感谢。
编辑(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>
你可以尝试做一个setInterval的,然后有一个一个的setTimeout clearInterval。只是一个想法,这可能在功能之内或之外。另外,我非常确定JavaScript不会执行console.log()
并翻转布尔直到for语句完成。所以最好的方法是setInterval然后有一个clearInterval,无论是setTimeout还是只需点击一下按钮。
我有同样的问题, 你可以尝试将计时器添加到您的功能 ,你可以使用:
$('#someElement').click(function(){
// Clear the timeout
clearTimeout(timer);
});
我认为我们可以解决使用的setInterval()这个问题。它适用于我只是检查出来。
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(){
\t started = false;
\t setInterval(function(){
\t \t createRain(started)
\t },200)
})
$(document).on("click",".end",function(){
\t started = true;
\t setInterval(function(){
\t \t createRain(started)
\t },200)
\t $(".drop").remove()
})
body{
\t \t \t background-color: #000000;
\t \t \t width: 100%;
\t \t \t overflow: hidden;
\t \t }
\t \t .btn{
\t \t \t border: 1px solid #ffffff;
\t \t \t color: #ffffff;
\t \t \t background-color: transparent;
\t \t \t margin: 20px auto;
padding:5px 20px;
\t \t }
\t \t .btn:hover{
\t \t \t color: #eeeeee;
\t \t }
\t \t .drop{
\t \t \t background-color: #000;
\t \t \t width: 1px;
\t \t \t height: 3px;
\t \t \t background-color: #ffffff;
\t \t \t position: relative;
\t \t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
\t \t <button class="btn end">End</button>
\t \t <button class="btn start">Start</button>
\t </div>
\t <div class="rain">
\t \t
\t </div>
此代码有效,但在某段时间后会变得超级滞后?你知道原因吗,或者是否有解决方法? – Lunix46
你是如何调用createRain()函数 –
你叫从循环中'createRain'功能或使用的setTimeout?如果不是那么你可以从'.rain'组件中删除所有html元素。 – lkdhruw
从if和else循环中移除两个start =!。它们是循环读取的值,如果此动画无限并且按钮切换,您想在外部操作它们。具体切换时使用“真”和“假”也更明智。你也应该在开始改变后检查开始,以确保它处于首选状态。 – kdyz