我尝试了许多排列，但无法在一个有效的排列中发生...
这是一个学习/演示页面的简短脚本，它可以在你的本地主机上运行，任何人都好奇地看到它行为不端。双击停止按钮使其工作，但似乎必须有一种方法可以停止循环并重置，只需单击一下。
我一直在学习JavaScript几周，所以如果问题很简单我就不会感到惊讶。这是令人反感的代码:)
MY Loop
// At window loading, be good to have some .className
// set on the DIV elements which require them, so they show up.
var ScaryMonster = window.onload=function portofOrigin(){
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
};
// Then go ahead and define a shwack of functions the DIVS will
// be manipulated by through the action of the LOOP code.
// functions: ItemBar1
function ItemBar1COLOUR(){
timeoutIDxDiv1 = window.setTimeout(Div1neDOsomethingDoggoneIt, 160);
}
function Div1neDOsomethingDoggoneIt(){
Div1ne.className = "springME";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar2
function ItemBar2COLOUR(){
timeoutIDxDiv2 = window.setTimeout(Div2woDOsomethingDoggoneIt, 320);
}
function Div2woDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "springME";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar3
// here the Timer Function is defined for the Item #3 of the set of the Loop
function ItemBar3COLOUR(){
// it is set to fire, if called, at 480/800 milliseconds
timeoutIDxDiv3 = window.setTimeout(Div3hreeDOsomethingDoggoneIt, 480);
}
// This, is the Function which contains the code which
// will be run if Item #3 is called.
function Div3hreeDOsomethingDoggoneIt(){
// .defaultBORED is the *non~lit~up* state of appearance
// of the divs while the loop is running.
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
// while .springME is the *active* display appearance
// of the div during "animation loop*
Div3hree.className = "springME";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar4
function ItemBar4COLOUR(){
timeoutIDxDiv4 = window.setTimeout(Div4ourDOsomethingDoggoneIt, 640);
}
function Div4ourDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "springME";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar5
function ItemBar5COLOUR(){
timeoutIDxDiv5 = window.setTimeout(Div5iveDOsomethingDoggoneIt, 800);
}
function Div5iveDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "springME";
}
/* ****************************************** */
// This is the BEGIN POINT of the Main Timer Loop To create the faux~animation
function SetThemUP(){
// This Function creates a TIMESTAMP anywhere you wish to
// place one, by calling the function.
function JustTIMEstamp(){
var OkayFIRE = +new Date();
return OkayFIRE;
}
// For Whatever reason this works as a holder for a whole lot of functions
function wellrelaxCODEworkWITHmeHere(){
// The first item in this Function collection, is a TimeStamp.
// Obtained by calling a Function which has code to make one.
var newOkayFIRE = JustTIMEstamp();
// 1 of 4 Functions needed to build a friggin'
.
// It is a Function which when called, appends the
// assembled LB to the DOM as a child of the target DIV element.
function SoWriteTimeStampToDivYello(){
var myDiv1 = document.getElementById("Aaaiyeeah");
var YellowTitleWrite = myDiv1.appendChild(document.createTextNode(newOkayFIRE));
return YellowTitleWrite;
}
// 2 of 4. sic. it needs to create a discrete html element...
// the one referrenced above.
function FancyShitForLBWIN1(){
var compLbr="var inTheLinebreaks";
var thirdcompOFintheLinebreaks = "=document.createElement('br');";
var AssembledDocCreateLB=(compLbr+ thirdcompOFintheLinebreaks);
return AssembledDocCreateLB;
}
// 3 of 4. sic. and surprisingly, only works by directly
// inserting a line break onto the variable being
// cobbled together to provide a recycleable
construct...
function middleware(){
var myDiv33 = document.getElementById("Aaaiyeeah");
var inTheLinebreaks7=document.createElement('br');
myDiv33.appendChild(inTheLinebreaks7);
}
// 4 of 4 and the final component for the asset
// "reuseable
" which can be deployed in DIV "Aaaiyeeah" ONLY
// but of course, as many times as required, so at least it is useful.
function FancyShitForLBWIN2wo(){
var theAppending1stPart="myDiv42.appendChild(";
var varNameProper=("inTheLinebreaks");
var fouthPart=");";
var assembleAppenderHerself=(theAppending1stPart + varNameProper + fouthPart);
return assembleAppenderHerself;
}
// Oh, LookitThet, here it is, getting called.
// So, this is inside the wrapper Function, inside the TIMER Loop.
// Which has the effect that each time the LOOP gets called,
// a record of the TIMESTAMP GO~Time is written out to display.
SoWriteTimeStampToDivYello();
FancyShitForLBWIN1();middleware();FancyShitForLBWIN2wo(); //LINEBREAK
// wellrelaxCODEworkWITHmeHere() end of function:
}
// then call all of em at one shot here:
wellrelaxCODEworkWITHmeHere();
// these are the calling of the 5ive functions which are defined OUTSIDE of the MainTimerLoop; the STEPS or Components,
// from which the LOOP is assembled.
ItemBar1COLOUR();
ItemBar2COLOUR();
ItemBar3COLOUR();
ItemBar4COLOUR();
ItemBar5COLOUR();
// here is a call to the function in which the call is contained.
// By Setting the number, the number of milliseconds of the
// duration of the Loop Timer, is established.
// Therefore
// In order to have an even event duration, the events have got
// to be timed, themselves, in a ratio of their number
// to the length of time in milliseconds, which the Loop will Occupy.
CommenceAnnoyance = window.setTimeout(SetThemUP,800);
// SetThemUP() end of MAIN TIMER Loop :: psuedo~animation
}
/* ********************** */
/* ********************************* */
// Here begins parts of CODE suggested by Gordon.
// while this is called by the *Reset* button to reset the divs
// to their *Loop=OFF* appearance, AND clear the text
// from the DIV which displays one after another, the
// GoTime of the PerLoop Iterations of the MAIN LOOP.
function DestroyTheMonster() {
Stop();
Reset();
FTWxAnotherReset(); // that is a kludgy desperation~ploy
// to try to get rid of the unwanted .class
// which is still applied, and to reset all
// 5ive to the NON~running state... appearance.
}
// This is the *** OFF SWITCH *** for the MainTimerLOOP.
function Stop() {
window.clearTimeout(CommenceAnnoyance);
}
function Reset() {
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
while (Aaaiyeeah.firstChild) {
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
function FTWxAnotherReset() {
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
while (Aaaiyeeah.firstChild) {
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
#TitleGhost{
position:absolute;
top:11px;
left:295px;
width:496px;
height:29px;
background-color:#8ADFFB;
font-size:19px;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
color:black;
border:3px solid navy;
padding-top:3px;
}
#ControlPlace{
position:absolute;
top:11px;
left:19px;
width:142px;
height:42px;
background-color:#33EFEA;
border:2px solid buttonface;
}
#ControlPlace button{
position:absolute;
top:6px;
left:13px;
width:112px;
height:29px;
background-color:buttonface;
font-family:bookman old style;
font-size:12px;
font-weight:bold;
color:navy;
}
#ControlPlaceSTOPPA{
position:absolute;
top:72px;
left:19px;
width:142px;
height:42px;
background-color:#33EFEA;
border:2px solid buttonface;
}
#ControlPlaceSTOPPA button{
position:absolute;
top:6px;
left:13px;
width:112px;
height:29px;
background-color:buttonface;
font-family:bookman old style;
font-size:12px;
font-weight:bold;
color:navy;
}
#Aaaiyeeah{ /*Displays Unix TimeSTAMP of Each Loop Begin~Time*/
position:absolute;
top:11px;
left:819px;
width:131px;
height:430px;
background-color:#C79C96; /* Impious Colours = "the lost art" */
color:#A48F04; /* Impious Colours = "GoldyGoldfish" */
border:2px solid black;
overflow-y:scroll;
}
/* Main Display Box */
#BeginLoopingLikeAMadBastard{
position:absolute;
top:137px;
left:295px;
width:492px;
height:298px;
background-color:#333333;
border:5px solid purple;
}
/* 5 Divs In the main display */
#Div1ne.defaultBORED{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
}
#Div1ne.springME{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
}
#Div2wo.defaultBORED{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
}
#Div2wo.springME{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
}
#Div3hree.defaultBORED{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
}
#Div3hree.springME{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
}
#Div4our.defaultBORED{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
}
#Div4our.springME{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
}
#Div5iver.defaultBORED{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
}
#Div5iver.springME{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
}
#Div1ne.AsBeforeBubba{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div2wo.AsBeforeBubba{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div3hree.AsBeforeBubba{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div4our.AsBeforeBubba{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div5iver.AsBeforeBubba{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
/* defining some .classNames, for some css statements controlled
by the JavaScript */
#Div1ne.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div2wo.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div3hree.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div4our.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div5iver.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div1ne.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div2wo.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div3hree.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div4our.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div5iver.defaultBORED{
background-color:#333333;
border:2px solid white;
}
Commence !!!
Stop Madness!
This Is JavaScript. Looping OR at Least Pretending To.
对于没有自己的筹码但又好奇的人，请参阅
哦......你是不是很严重？
看看这是否有效...... 好吧，伙计们，你的功能上有一个漏洞。我只花了45分钟或者手动格式化450行，然后想想添加一个链接，并获得臭名昭着的烦人的Ooops！ ANTI~jsfiddle.net废话？ Pulllese！所以。似乎远远高于这项服务，服务于不同的目的...减轻或在内部结合类似的功能;只是不明白对它的偏见。我理解在S.O打算在网站上拥有大量代码的愿望....但是当后端抱怨链接时，mebbe很好〜调整，是吗？ 咆哮
仍在解决问题......我不接受点击两次，一次停止动画/循环，一次重置5个div的className。
答案 0 :(得分：0)
在任何奇怪的竞争条件之外（由于setTimeout），我认为没有任何理由说这不符合你的意愿......
function DestroyTheMonster() {
Stop();
}
function Takes2woToTaengo() {
Stop();
setTimeout("Reset()", 800); // this is the delay
}
function Stop() {
window.clearTimeout(CommenceAnnoyance);
}
function Reset() {
var div = document.getElementById('Aaaiyeeah');
while (div.firstChild) {
div.removeChild(div.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}