0

http://www.ultralocal.fr/refonte/test.php

如您所见，我有一个带有几个链接的菜单。除了一个之外，所有这些都启动了一个小脚本，该脚本会根据 onclick 事物更改背景颜色。“Talweg”链接以另一种方式工作，它启动一个更大的脚本，实际上使背景颜色不时地逐渐变化。我想知道的是如何让其他链接停止 Talweg 脚本并只更改一次 bgcolor。

菜单：

× <a href="#" class="line" onClick="changeBGC('pink')">Désœuvrements</a><br />
× <a href="#" class="line" onClick="changeBGC('lightblue')">Recettes</a><br />
× <a href="#" class="line" onclick="setrandomcolor()">Talweg</a><br />

简单的脚本：

function changeBGC(color){
document.bgColor = color;
}

更大的脚本可以在单击 Talweg 时启动，但我想在单击其他链接时停止。

// Set 1 dark to medium 
// Set 2 light to medium 
// Set 3 very dark to very light light
// Set 4 light to very light
// Set 5 dark to very dark 
var fade_effect=4

// What type of gradient should be applied Internet Explorer 5x or higher?
// Set "none" or "horizontal" or "vertical"
var gradient_effect="none"

var speed=800


var browserinfos=navigator.userAgent 
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie4||ie5||ns4||ns6||opera

if (fade_effect==1) {
    var darkmax=1
    var lightmax=127
}
if (fade_effect==2) {
    var darkmax=180
    var lightmax=254
}
if (fade_effect==3) {
    var darkmax=1
    var lightmax=254
}
if (fade_effect==4) {
    var darkmax=204
    var lightmax=254
}
if (fade_effect==5) {
    var darkmax=1
    var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var newred
var newgreen
var newblue
var oldred
var oldgreen
var oldblue

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
var oldcolor
var newcolor
var firsttime=true

var stepred=1
var stepgreen=1
var stepblue=1

function setrandomcolor() {
    var range=(lightmax-darkmax)
    if (firsttime) {
        newred=Math.ceil(range*Math.random())+darkmax
        newgreen=Math.ceil(range*Math.random())+darkmax
        newblue=Math.ceil(range*Math.random())+darkmax
        firsttime=false
    }

    oldred=Math.ceil(range*Math.random())+darkmax
    oldgreen=Math.ceil(range*Math.random())+darkmax
    oldblue=Math.ceil(range*Math.random())+darkmax

    stepred=newred-oldred
    if (oldred>newred) {stepred=1}
    else if (oldred<newred) {stepred=-1}
    else {stepred=0}

    stepgreen=newgreen-oldgreen
    if (oldgreen>newgreen) {stepgreen=1}
    else if (oldgreen<newgreen) {stepgreen=-1}
    else {stepgreen=0}

    stepblue=newblue-oldblue
    if (oldblue>newblue) {stepblue=1}
    else if (oldblue<newblue) {stepblue=-1}
    else {stepblue=0}
    fadebg()
}

function fadebg() {
    if (newred==oldred) {stepred=0}
    if (newgreen==oldgreen) {stepgreen=0}
    if (newblue==oldblue) {stepblue=0}
    newred+=stepred
    newgreen+=stepgreen
    newblue+=stepblue

    if (stepred!=0 || stepgreen!=0 || stepblue!=0) {
        redcol_1 = hexc[Math.floor(newred/16)];
        redcol_2 = hexc[newred%16];
        greencol_1 = hexc[Math.floor(newgreen/16)];
        greencol_2 = hexc[newgreen%16];
        bluecol_1 = hexc[Math.floor(newblue/16)];
        bluecol_2 = hexc[newblue%16];
        newcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
        if (ie5 && gradient_effect!="none") {
            if (gradient_effect=="horizontal") {gradient_effect=1}
            if (gradient_effect=="vertical") {gradient_effect=0}
            greencol_1 = hexc[Math.floor(newred/16)];
            greencol_2 = hexc[newred%16];
            bluecol_1 = hexc[Math.floor(newgreen/16)];
            bluecol_2 = hexc[newgreen%16];
            redcol_1 = hexc[Math.floor(newblue/16)];
            redcol_2 = hexc[newblue%16];
            var newcolorCompl="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
            document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolorCompl+", endColorstr="+newcolor+" GradientType="+gradient_effect+")"
        }
        else {
            document.bgColor=newcolor 
        }
        var timer=setTimeout("fadebg()",speed);
    } 
    else {
        clearTimeout(timer)
        newred=oldred
        newgreen=oldgreen
        newblue=oldblue
        oldcolor=newcolor
        setrandomcolor()
    }
}

谢谢

4

2 回答 2

1

运行时间较长的脚本会使用selfTimeout. 如果你想停止它，你需要做的就是调用clearTimeout返回的变量：

clearTimeout(timer)

当然，您可能需要更加小心，因为当您清除超时时，脚本可能正在执行中。处理它的一种方法是设置一个标志，指示脚本不需要再次重新执行。您可以从函数中提取变量声明以使代码更易于阅读。所以你的代码看起来像这样：

//variable declaration for use in fadebg function
var timer;
//variable declaration for the flag
var contBg = true;

//stop your previous script
function stopRandomBg() {
    clearTimeout(timer);
    contBg = false;
}

//changes to fadebg function
function fadebg() {
    ...
    //change this line
    //var timer=setTimeout("fadebg()",speed);
    //to
    if(contBg) {
        timer=setTimeout("fadebg()",speed);
    }
    ...
}

当您尝试停止脚本时，这些附加更改将处理脚本处于执行过程中的情况 - 它将完成执行过程然后停止。

现在您需要做的就是将onClick事件侦听器添加到调用stopRandomBg函数的链接中。

于 2013-06-14T10:04:48.570 回答
0

您必须使计时器变量成为全局变量而不是局部变量。

变种计时器；

然后在您调用其他链接时清除计时器。

function changeBGC(color){
 clearTimeout(timer);
 document.bgColor = color;
}
于 2013-06-14T10:39:05.427 回答