我尝试了许多排列，但无法在一个有效的排列上发生......
这是一个学习/演示页面的简短脚本，它已准备好在您的本地主机上运行，任何人都想看到它行为不端。双击停止按钮使其工作，但似乎必须有一种方法来停止循环和重置，只需单击一下。
我只学了几个星期的 JavaScript，所以如果问题是我遗漏的简单问题，我不会感到惊讶。这是令人反感的代码:)
我的循环
// 在窗口加载时，最好有一些 .className
// 在需要它们的 DIV 元素上设置，因此它们会显示出来。
var ScaryMonster = window.onload=function portofOrigin(){
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
};
// 然后继续定义 DIVS 将要的函数的 shwack
// 通过 LOOP 代码的操作来操作。
// 函数：ItemBar1
功能项目栏1颜色（）{
timeoutIDxDiv1 = window.setTimeout(Div1neDOsomethingDoggoneIt, 160);
}
函数 Div1neDOsomethingDoggoneIt(){
div1ne.className = "springME";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// 函数：ItemBar2
功能项目栏2颜色（）{
timeoutIDxDiv2 = window.setTimeout(Div2woDOsomethingDoggoneIt, 320);
}
函数 Div2woDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
div2wo.className = "springME";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// 函数：ItemBar3
// 这里 Timer Function 是为 Loop 集合的 Item #3 定义的
功能项目栏3颜色（）{
// 如果被调用，它会在 480/800 毫秒时触发
timeoutIDxDiv3 = window.setTimeout(Div3hreeDOsomethingDoggoneIt, 480);
}
// 这是包含代码的函数
// 如果调用了 Item #3，将运行。
函数 Div3hreeDOsomethingDoggoneIt(){
// .defaultBORED 是 *non~lit~up* 的外观状态
//循环运行时的div。
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
// 而 .springME 是 *active* 显示外观
// 在“动画循环*”期间的 div
div3hree.className = "springME";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// 函数：ItemBar4
功能项目栏4颜色（）{
timeoutIDxDiv4 = window.setTimeout(Div4ourDOsomethingDoggoneIt, 640);
}
函数 Div4ourDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "springME";
Div5iver.className = "defaultBORED";
}
// 函数：ItemBar5
功能项目栏5COLOUR（）{
timeoutIDxDiv5 = window.setTimeout(Div5iveDOsomethingDoggoneIt, 800);
}
函数 Div5iveDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "springME";
}
/* ****************************************** */
// 这是主定时器循环的 BEGIN POINT 创建 faux~animation
函数 SetThemUP(){
// 这个函数在你希望的任何地方创建一个 TIMESTAMP
// 放置一个，通过调用函数。
函数只是时间戳（）{
var OkayFIRE = +新日期（）；
返回 OkayFIRE；
}
// 无论出于何种原因，它都可以作为很多函数的持有者
函数wellrelaxCODEworkWITHmeHere(){
// 此 Function 集合中的第一项是 TimeStamp。
// 通过调用具有代码的函数获得。
var newOkayFIRE = JustTIMEstamp();
// 构建一个 friggin 所需的 4 个函数中的 1 个
。
// 这是一个函数，在调用时会附加
// 将 LB 作为目标 DIV 元素的子元素组装到 DOM。
函数 SoWriteTimeStampToDivYello(){
var myDiv1 = document.getElementById("Aaaiyeeah");
var YellowTitleWrite = myDiv1.appendChild(document.createTextNode(newOkayFIRE));
返回 YellowTitleWrite;
}
// 2 of 4. 原文如此。它需要创建一个离散的 html 元素...
//上面提到的那个。
函数 FancyShitForLBWIN1(){
var compLbr="var inTheLinebreaks";
var thirdcompOFintheLinebreaks = "=document.createElement('br');";
var AssembledDocCreateLB=(compLbr+thirdcompOFintheLinebreaks);
返回 AssembledDocCreateLB；
}
// 3 of 4. 原文如此。令人惊讶的是，只能直接通过
// 在变量上插入换行符
// 拼凑在一起以提供可回收的
构造...
函数中间件（）{
var myDiv33 = document.getElementById("Aaaiyeeah");
var inTheLinebreaks7=document.createElement('br');
myDiv33.appendChild(inTheLinebreaks7);
}
// 4 of 4 和资产的最终组件
// "
reuseable" 只能部署在 DIV "Aaaiyeeah" 中
// 但当然，需要多少次，所以至少它是有用的。
函数 FancyShitForLBWIN2wo(){
var theAppending1stPart="myDiv42.appendChild(";
var varNameProper=("inTheLinebreaks");
var fouthPart=");";
var assembleAppenderHerself=(theAppending1stPart + varNameProper + fouthPart);
返回 assembleAppender 自己；
}
// 哦，LookitThet，来了，被调用了。
// 所以，这是在包装函数内部，在 TIMER 循环内部。
// 其效果是每次调用 LOOP 时，
// TIMESTAMP GO~Time 的记录被写入显示。
SoWriteTimeStampToDivYello();
FancyShitForLBWIN1();middleware();FancyShitForLBWIN2wo(); //越线
// wellrelaxCODEworkWITHmeHere() 函数结束：
}
// 然后在这里一次性调用所有的 em：
wellrelaxCODEworkWITHmeHere();
// 这些是在 MainTimerLoop 外部定义的 5ive 函数的调用；步骤或组件，
// 从中组装 LOOP。
ItemBar1COLOUR();
ItemBar2COLOUR();
ItemBar3COLOUR();
ItemBar4COLOUR();
ItemBar5COLOUR();
// 这里是对包含调用的函数的调用。
// 通过设置数字，毫秒数
// 循环计时器的持续时间，已建立。
// 所以
// 为了有一个均匀的事件持续时间，事件有
// 被计时，他们自己，在他们的数量的比率
// 以毫秒为单位的时间长度，循环将占用。
开始烦恼 = window.setTimeout(SetThemUP,800);
// SetThemUP() 结束 MAIN TIMER 循环 :: psuedo~animation
}
/* ********************** */
/* ********************************* */
// 这里开始 Gordon 建议的部分代码。
// 虽然这是由 *Reset* 按钮调用以重置 div
// 到他们的 *Loop=OFF* 外观，并清除文本
// 从一个接一个显示的 DIV 中，
// MAIN LOOP 的 PerLoop 迭代的 GoTime。
功能毁灭怪物（）{
停止（）;
重置（）;
FTWxAnotherReset(); // 这是一个笨拙的绝望~策略
// 尝试删除不需要的 .class
// 这仍然适用，并重置所有
// 5ive 到 NON~running 状态...外观。
}
// 这是 MainTimerLOOP 的 *** OFF SWITCH ***。
函数停止（）{
window.clearTimeout（开始烦恼）；
}
功能重置（）{
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
而（Aaaiyeeah.firstChild）{
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
函数 FTWxAnotherReset() {
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
而（Aaaiyeeah.firstChild）{
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
#标题鬼{
位置：绝对；
顶部：11px；
左：295px；
宽度：496px；
高度：29px；
背景颜色：#8ADFFB；
字体大小：19px；
字体粗细：粗体；
字体样式：斜体；
字体变体：小型大写字母；
颜色：黑色;
边框：3px 纯海军蓝；
填充顶部：3px；
}
#控制地点{
位置：绝对；
顶部：11px；
左：19px；
宽度：142px；
高度：42px；
背景颜色：#33EFEA；
边框：2px 实心按钮面；
}
#ControlPlace 按钮{
位置：绝对；
顶部：6px；
左：13px；
宽度：112px；
高度：29px；
背景颜色：按钮面；
font-family：bookman 旧式；
字体大小：12px；
字体粗细：粗体；
颜色：海军蓝；
}
#ControlPlaceSTOPPA{
位置：绝对；
顶部：72px；
左：19px；
宽度：142px；
高度：42px；
背景颜色：#33EFEA；
边框：2px 实心按钮面；
}
#ControlPlaceSTOPPA 按钮{
位置：绝对；
顶部：6px；
左：13px；
宽度：112px；
高度：29px；
背景颜色：按钮面；
font-family：bookman 旧式；
字体大小：12px；
字体粗细：粗体；
颜色：海军蓝；
}
#Aaaiyeeah{ /*显示每个循环Begin~Time的Unix TimeSTAMP*/
位置：绝对；
顶部：11px；
左：819px；
宽度：131px；
高度：430px；
背景颜色：#C79C96; /* Impious Colors = “失落的艺术” */
颜色：#A48F04；/* 邪恶的颜色 = "GoldyGoldfish" */
边框：2px纯黑色；
溢出-y：滚动；
}
/* 主显示框 */
#BeginLoopingLikeAMAdBastard{
位置：绝对；
顶部：137px；
左：295px；
宽度：492px；
高度：298px；
背景颜色：#333333;
边框：5px 纯紫色；
}
/* 5 Divs 在主显示 */
#Div1ne.defaultBORED{
位置：绝对；
顶部：12px；
左：11px；
宽度：112px；
高度：29px；
}
#Div1ne.springME{
位置：绝对；
顶部：12px；
左：11px；
宽度：112px；
高度：29px；
}
#Div2wo.defaultBORED{
位置：绝对；
顶部：61px；
左：11px；
宽度：112px；
高度：29px；
}
#Div2wo.springME{
位置：绝对；
顶部：61px；
左：11px；
宽度：112px；
高度：29px；
}
#Div3hree.defaultBORED{
位置：绝对；
顶部：110px；
左：11px；
宽度：112px；
高度：29px；
}
#Div3hree.springME{
位置：绝对；
顶部：110px；
左：11px；
宽度：112px；
高度：29px；
}
#Div4our.defaultBORED{
位置：绝对；
顶部：159px；
左：11px；
宽度：112px；
高度：29px；
}
#Div4our.springME{
位置：绝对；
顶部：159px；
左：11px；
宽度：112px；
高度：29px；
}
#Div5iver.defaultBORED{
位置：绝对；
顶部：208px；
左：11px；
宽度：112px；
高度：29px；
}
#Div5iver.springME{
位置：绝对；
顶部：208px；
左：11px；
宽度：112px；
高度：29px；
}
#Div1ne.AsBeforeBubba{
位置：绝对；
顶部：12px；
左：11px；
宽度：112px；
高度：29px；
背景颜色：#EEff78;
边框：2px 实心#FC3B03;
}
#Div2wo.AsBeforeBubba{
位置：绝对；
顶部：61px；
左：11px；
宽度：112px；
高度：29px；
背景颜色：#EEff78;
边框：2px 实心#FC3B03;
}
#Div3hree.AsBeforeBubba{
位置：绝对；
顶部：110px；
左：11px；
宽度：112px；
高度：29px；
背景颜色：#EEff78;
边框：2px 实心#FC3B03;
}
#Div4our.AsBeforeBubba{
位置：绝对；
顶部：159px；
左：11px；
宽度：112px；
高度：29px；
背景颜色：#EEff78;
边框：2px 实心#FC3B03;
}
#Div5iver.AsBeforeBubba{
位置：绝对；
顶部：208px；
左：11px；
宽度：112px；
高度：29px；
背景颜色：#EEff78;
边框：2px 实心#FC3B03;
}
/* 定义一些 .classNames，用于控制一些 css 语句
通过 JavaScript */
#Div1ne.springME{
背景颜色：森林绿；
边框：4px 纯红色；
}
#Div2wo.springME{
背景颜色：森林绿；
边框：4px 纯红色；
}
#Div3hree.springME{
背景颜色：森林绿；
边框：4px 纯红色；
}
#Div4our.springME{
背景颜色：森林绿；
边框：4px 纯红色；
}
#Div5iver.springME{
背景颜色：森林绿；
边框：4px 纯红色；
}
#Div1ne.defaultBORED{
背景颜色：#333333;
边框：2px纯白色；
}
#Div2wo.defaultBORED{
背景颜色：#333333;
边框：2px纯白色；
}
#Div3hree.defaultBORED{
背景颜色：#333333;
边框：2px纯白色；
}
#Div4our.defaultBORED{
背景颜色：#333333;
边框：2px纯白色；
}
#Div5iver.defaultBORED{
背景颜色：#333333;
边框：2px纯白色；
}
开始！！！
停止疯狂！
这是 JavaScript。循环或至少假装到。
对于没有自己的堆栈但好奇的任何人，请参阅
哦……你是认真的吗？？？？
看看这是否有效......好吧，伙计们，你的功能有一个大洞。我只花了 45 分钟或一个小时手动格式化 450 行，然后想添加一个链接，然后得到臭名昭著和烦人的哎呀！ANTI~jsfiddle.net 胡说八道？普莱斯！SO 似乎远远高于该服务，服务于不同的目的......减轻或在内部合并类似的功能；只是不明白对它的偏见。我确实理解在 SO 的站点上拥有大量代码的愿望......但是当后端抱怨链接时，我可以很好地调整，不是吗？ 咆哮
仍在解决问题...我不会接受必须单击两次，一次是停止动画/循环，一次是重置 5 个 div 的类名。