私は多くの順列を試しましたが、うまくいったものでは起こり得ませんでした...
これはLearning/DEMOページの短いスクリプトであり、ローカルホストで実行する準備ができています。停止ボタンをダブルクリックすると機能しますが、ワンクリックでループを停止してリセットする方法が必要なようです。
私は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が実行する関数のシャックを定義します
//LOOPコードのアクションによって操作されます。
//関数：ItemBar1
関数ItemBar1COLOUR（）{
timeoutIDxDiv1 = window.setTimeout（Div1neDOsomethingDoggoneIt、160）;
}
関数Div1neDOsomethingDoggoneIt（）{
Div1ne.className = "springME";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
//関数：ItemBar2
関数ItemBar2COLOUR（）{
timeoutIDxDiv2 = window.setTimeout（Div2woDOsomethingDoggoneIt、320）;
}
関数Div2woDOsomethingDoggoneIt（）{
Div1ne.className = "defaultBORED";
Div2wo.className = "springME";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
//関数：ItemBar3
//ここでは、ループのセットのアイテム＃3に対してタイマー関数が定義されています
関数ItemBar3COLOUR（）{
//呼び出された場合、480/800ミリ秒で起動するように設定されています
timeoutIDxDiv3 = window.setTimeout（Div3hreeDOsomethingDoggoneIt、480）;
}
//これは、次のコードを含む関数です
//アイテム＃3が呼び出された場合に実行されます。
関数Div3hreeDOsomethingDoggoneIt（）{
// .defaultBOREDは、* non〜lit〜up*の外観の状態です
//ループの実行中のdivの。
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
//.springMEは*アクティブな*表示の外観です
//「アニメーションループ*中のdivの
Div3hree.className = "springME";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
//関数：ItemBar4
関数ItemBar4COLOUR（）{
timeoutIDxDiv4 = window.setTimeout（Div4ourDOsomethingDoggoneIt、640）;
}
関数Div4ourDOsomethingDoggoneIt（）{
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "springME";
Div5iver.className = "defaultBORED";
}
//関数：ItemBar5
関数ItemBar5COLOUR（）{
timeoutIDxDiv5 = window.setTimeout（Div5iveDOsomethingDoggoneIt、800）;
}
関数Div5iveDOsomethingDoggoneIt（）{
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "springME";
}
/ * ****************************************** * /
//これはメインタイマーループの開始点です偽のアニメーションを作成します
関数SetThemUP（）{
//この関数は、必要な場所にTIMESTAMPを作成します
//関数を呼び出して配置します。
関数JustTIMEstamp（）{
var OkayFIRE = + new Date（）;
OkayFIREを返します。
}
//何らかの理由で、これは多くの機能のホルダーとして機能します
関数wellrelaxCODEworkWITHmeHere（）{
//この関数コレクションの最初の項目はTimeStampです。
//作成するコードを持つ関数を呼び出すことによって取得されます。
var newOkayFIRE = JustTIMEstamp（）;
//frigginを構築するために必要な4つの関数の1つ'
。
//これは、呼び出されたときに追加する関数です。
//ターゲットDIV要素の子としてLBをDOMにアセンブルしました。
関数SoWriteTimeStampToDivYello（）{
var myDiv1 = document.getElementById（ "Aaaiyeeah"）;
var YellowTitleWrite = myDiv1.appendChild（document.createTextNode（newOkayFIRE））;
YellowTitleWriteを返します。
}
//2/4。sic。個別のhtml要素を作成する必要があります...
//上記で参照されたもの。
関数FancyShitForLBWIN1（）{
var compLbr = "var inTheLinebreaks";
var thirdcompOFintheLinebreaks = "= document.createElement（'br'）;";
var AssembledDocCreateLB =（compLbr + thirdcompOFintheLinebreaks）;
AssembledDocCreateLBを返します。
}
//3/4。sic。そして驚くべきことに、直接によってのみ機能します
//変数beingに改行を挿入します
//リサイクル可能な構造を提供するために一緒に石畳に
...
関数ミドルウェア（）{
var myDiv33 = document.getElementById（ "Aaaiyeeah"）;
var inTheLinebreaks7 = document.createElement（'br'）;
myDiv33.appendChild（inTheLinebreaks7）;
}
//4/4とアセットの最後のコンポーネント
//
DIV「Aaaiyeeah」でのみ展開できる「再利用可能」
//しかしもちろん、必要な回数だけなので、少なくともそれは便利です。
関数FancyShitForLBWIN2wo（）{
var theAppending1stPart = "myDiv42.appendChild（";
var varNameProper =（ "inTheLinebreaks"）;
var fouthPart = "）;";
var assembleAppenderHerself =（theAppending1stPart + varNameProper + fouthPart）;
assembleAppenderHerselfを返します。
}
//ああ、LookitThet、ここにあります、呼び出されます。
//したがって、これはラッパー関数内、TIMERループ内にあります。
// LOOPが呼び出されるたびに、
// TIMESTAMP GO〜Timeのレコードが書き出されて表示されます。
SoWriteTimeStampToDivYello（）;
FancyShitForLBWIN1（）;ミドルウェア（）; FancyShitForLBWIN2wo（）; // LINEBREAK
// wellrelaxCODEworkWITHmeHere（）関数の終わり：
}
//次に、ここですべてのemを一度に呼び出します。
wellrelaxCODEworkWITHmeHere（）;
//これらは、MainTimerLoopの外部で定義されている5つの関数の呼び出しです。ステップまたはコンポーネント、
//LOOPのアセンブル元。
ItemBar1COLOUR（）;
ItemBar2COLOUR（）;
ItemBar3COLOUR（）;
ItemBar4COLOUR（）;
ItemBar5COLOUR（）;
//これは呼び出しが含まれている関数への呼び出しです。
//数値を設定することにより、
//ループタイマーの期間が確立されます。
// したがって
//イベント期間を均等にするために、イベントは
//自分自身の数の比率で時間を計る
//ループが占有する時間の長さ（ミリ秒）。
CommenceAnnoyance = window.setTimeout（SetThemUP、800）;
// SetThemUP（）MAINTIMERループの終了::psuedo〜animation
}
/ * ********************** * /
/ * ********************************* * /
//ここからGordonによって提案されたCODEの一部が始まります。
//これは*リセット*ボタンによって呼び出され、divをリセットします
// * Loop = OFF *の外観にし、テキストをクリアします
//次々に表示されるDIVから、
//MAINLOOPのPerLoop反復のGoTime。
関数DestroyTheMonster（）{
止まる（）;
Reset（）;
FTWxAnotherReset（）; //それは厄介な絶望です〜ploy
//不要な.classを削除しようとします
//これはまだ適用されており、すべてをリセットします
// 5NON〜running状態に5...外観。
}
//これはMainTimerLOOPの***OFFSWITCH***です。
関数Stop（）{
window.clearTimeout（CommenceAnnoyance）;
}
関数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";
}
関数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 {
位置：絶対;
top：11px;
左：295px;
幅：496px;
高さ：29px;
背景色：＃8ADFFB;
font-size：19px;
font-weight：bold;
font-style：italic;
font-variant：small-caps;
色：黒;
ボーダー：3pxソリッドネイビー;
padding-top：3px;
}
#ControlPlace {
位置：絶対;
top：11px;
左：19px;
幅：142px;
高さ：42px;
背景色：＃33EFEA;
border：2pxソリッドボタンフェース;
}
#ControlPlaceボタン{
位置：絶対;
top：6px;
左：13px;
幅：112px;
高さ：29px;
背景色：buttonface;
font-family：bookman old style;
font-size：12px;
font-weight：bold;
カラー：ネイビー;
}
#ControlPlaceSTOPPA {
位置：絶対;
top：72px;
左：19px;
幅：142px;
高さ：42px;
背景色：＃33EFEA;
border：2pxソリッドボタンフェース;
}
#ControlPlaceSTOPPAボタン{
位置：絶対;
top：6px;
左：13px;
幅：112px;
高さ：29px;
背景色：buttonface;
font-family：bookman old style;
font-size：12px;
font-weight：bold;
カラー：ネイビー;
}
#Aaaiyeeah {/ *各ループのUnixTimeSTAMPを表示しますBegin〜Time * /
位置：絶対;
top：11px;
左：819px;
幅：131px;
高さ：430px;
背景色：＃C79C96; / * Impious Colors="失われた芸術"*/
色：＃A48F04; / * Impious Colors = "GoldyGoldfish" * /
border：2px solid black;
オーバーフロー-y：スクロール;
}
/*メインディスプレイボックス*/
#BeginLoopingLikeAMadBastard {
位置：絶対;
top：137px;
左：295px;
幅：492px;
高さ：298px;
背景色：＃333333;
ボーダー：5px無地紫;
}
/*5Divメインディスプレイ*/
＃Div1ne.defaultBORED {
位置：絶対;
top：12px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div1ne.springME {
位置：絶対;
top：12px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div2wo.defaultBORED {
位置：絶対;
top：61px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div2wo.springME {
位置：絶対;
top：61px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div3hree.defaultBORED {
位置：絶対;
top：110px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div3hree.springME {
位置：絶対;
top：110px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div4our.defaultBORED {
位置：絶対;
top：159px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div4our.springME {
位置：絶対;
top：159px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div5iver.defaultBORED {
位置：絶対;
top：208px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div5iver.springME {
位置：絶対;
top：208px;
左：11px;
幅：112px;
高さ：29px;
}
＃Div1ne.AsBeforeBubba {
位置：絶対;
top：12px;
左：11px;
幅：112px;
高さ：29px;
背景色：＃EEff78;
border：2px solid＃FC3B03;
}
＃Div2wo.AsBeforeBubba {
位置：絶対;
top：61px;
左：11px;
幅：112px;
高さ：29px;
背景色：＃EEff78;
border：2px solid＃FC3B03;
}
＃Div3hree.AsBeforeBubba {
位置：絶対;
top：110px;
左：11px;
幅：112px;
高さ：29px;
背景色：＃EEff78;
border：2px solid＃FC3B03;
}
＃Div4our.AsBeforeBubba {
位置：絶対;
top：159px;
左：11px;
幅：112px;
高さ：29px;
背景色：＃EEff78;
border：2px solid＃FC3B03;
}
＃Div5iver.AsBeforeBubba {
位置：絶対;
top：208px;
左：11px;
幅：112px;
高さ：29px;
背景色：＃EEff78;
border：2px solid＃FC3B03;
}
/ *制御されたいくつかのcssステートメントに対して、いくつかの.classNamesを定義します
JavaScriptによる*/
＃Div1ne.springME {
背景色：フォレストグリーン;
border：4pxの赤一色。
}
＃Div2wo.springME {
背景色：フォレストグリーン;
border：4pxの赤一色。
}
＃Div3hree.springME {
背景色：フォレストグリーン;
border：4pxの赤一色。
}
＃Div4our.springME {
背景色：フォレストグリーン;
border：4pxの赤一色。
}
＃Div5iver.springME {
背景色：フォレストグリーン;
border：4pxの赤一色。
}
＃Div1ne.defaultBORED {
背景色：＃333333;
border：2px solid white;
}
＃Div2wo.defaultBORED {
背景色：＃333333;
border：2px solid white;
}
＃Div3hree.defaultBORED {
背景色：＃333333;
border：2px solid white;
}
＃Div4our.defaultBORED {
背景色：＃333333;
border：2px solid white;
}
＃Div5iver.defaultBORED {
背景色：＃333333;
border：2px solid white;
}
開始!!!
狂気を止めろ！
これはJavaScriptです。少なくともふりをしてループまたは。
自分のスタックを持っていないが好奇心旺盛な人は、を参照してください。
ああ...あなたは本気ですか????
これが機能するかどうかを確認してください...さて、皆さん、機能にギャップのある穴があります。45分または1時間450行を手動でフォーマットしてから、リンクを追加して、悪名高い迷惑なOoopsを取得することを考えました。ANTI〜jsfiddle.netでたらめ？Pulllese！SOはそのサービスをはるかに超えているようで、別の目的を果たします...ライトアップするか、同様の機能を社内に組み込んでください。それに対する偏見を理解していないだけです。私はここSOのサイトに実質的なコードを置きたいという願望を理解しています...しかし、バックエンドがリンクについて文句を言うときは微調整してくださいね？ うそつき
まだ問題が発生しています...アニメーション/ループを停止するために1回、5つのdivのclassNameをリセットするために1回、2回クリックする必要はありません。