Javascript 当有人单击特定链接时,如何停止或暂停我使用的脚本之一?
正如你所看到的,我有一个带有几个链接的菜单。除了一个脚本外,所有脚本都会启动一个小脚本,根据onclick内容更改背景颜色。“Talweg”链接以另一种方式工作,它启动一个更大的脚本,实际上使背景颜色不时地、逐步地改变。 我想知道的是如何让其他链接停止Talweg脚本,只需更改一次bgcolor 菜单:Javascript 当有人单击特定链接时,如何停止或暂停我使用的脚本之一?,javascript,html,function,Javascript,Html,Function,正如你所看到的,我有一个带有几个链接的菜单。除了一个脚本外,所有脚本都会启动一个小脚本,根据onclick内容更改背景颜色。“Talweg”链接以另一种方式工作,它启动一个更大的脚本,实际上使背景颜色不时地、逐步地改变。 我想知道的是如何让其他链接停止Talweg脚本,只需更改一次bgcolor 菜单: × <a href="#" class="line" onClick="changeBGC('pink')">Désœuvrements</a><br />
× <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 />
更大的脚本,可以启动时,点击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()
}
}
function changeBGC(color){
clearTimeout(timer);
document.bgColor = color;
}
//将1暗设置为中等
//将2轻设为中等
//设置3非常暗到非常亮
//将4 light设置为very light
//将5暗设置为非常暗
var fade_效应=4
//Internet Explorer 5x或更高版本应采用哪种梯度?
//设置“无”或“水平”或“垂直”
var梯度效应=“无”
无功转速=800
var browserinfos=navigator.userAgent
var ie4=文档。全部&&!document.getElementById
var ie5=document.all&&document.getElementById&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&!文件。全部
var opera=browserinfos.match(/opera/)
var browserok=ie4 | ie5 | ns4 | ns6 |歌剧院
如果(淡入淡出效果==1){
var darkmax=1
var lightmax=127
}
如果(淡入淡出效果==2){
var darkmax=180
var lightmax=254
}
如果(淡入淡出效果==3){
var darkmax=1
var lightmax=254
}
如果(淡入淡出效果==4){
var darkmax=204
var lightmax=254
}
如果(淡入淡出效果==5){
var darkmax=1
var lightmax=80
}
var hexc=新数组('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'))
纽瑞德变种
var newgreen
纽布鲁
奥尔德雷德变种
奥尔德格林
奥尔德兰
var redcol_1
var redcol_2
格林科卢1号
绿谷2号
蓝色变种1
蓝色变种2
var oldcolor
新颜色
var firsttime=true
var stepred=1
var stepgreen=1
var stepblue=1
函数setrandomcolor(){
变量范围=(lightmax-darkmax)
如果(第一次){
newred=Math.ceil(range*Math.random())+darkmax
newgreen=Math.ceil(range*Math.random())+darkmax
newblue=Math.ceil(range*Math.random())+darkmax
第一次=错误
}
oldred=Math.ceil(range*Math.random())+darkmax
oldgreen=Math.ceil(range*Math.random())+darkmax
oldblue=Math.ceil(range*Math.random())+darkmax
阶梯红=新红-旧红
如果(oldred>newred){stepred=1}
else如果(oldrednewgreen){stepgreen=1}
else如果(oldgreennewblue){stepblue=1}
否则,如果(oldblue运行时间较长的脚本继续使用selfTimeout
重新执行自身。如果要停止它,只需对返回的变量调用cleartimout
:
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
函数的链接中。您必须将计时器变量设置为全局而不是局部
无功定时器
然后在调用其他链接时清除计时器
// 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()
}
}
function changeBGC(color){
clearTimeout(timer);
document.bgColor = color;
}
非常感谢!我更倾向于网页设计,所以javascript对我来说有点难。我补充了你说的:当我点击其他链接时,它确实会停止大脚本。但是当我重新点击“Talweg”,脚本不会再次重新启动。你有什么想法吗?再次感谢你,你帮了我很大的忙!没关系。我添加了,我想它可以工作。但不知道它是否是干净的代码!