はJavaScript - 減少divの幅が連続した後に一定の間隔

私はJavaScriptのnoobのだと私は、次のタスクを達成しようとしている：はJavaScript - 減少divの幅が連続した後に一定の間隔

クリック（クリックごとに増加するプログレスバーを考えてください）一定量、たとえばクリックごとに10％増加する
親divの幅がいっぱいになると、の10秒の遅延が発生するはずですdivは一定の割合で再び縮小を開始します（逆のプログレスバーのようなもの）
幅がになると、divをクリックしてを最大幅に達するまで再び増加させることができます。

参考のために、以下の画像をご確認ください：

私はステップ1を達成していると私は私がステップ2

を実装することができるよ一度ステップ3は、自分自身の世話をすると思います

第2ステップで手助けしてください（バックグラウンドdivの幅を連続的に縮小してください）。次のように

私のコードは次のとおりです。醜いコードについて申し訳ありません

var paddleBtn = document.getElementById('paddleBtn'); 
 
var paddleC = document.getElementById('paddleC'); 
 
if (paddleC) { 
 
    paddleC.style.width = "0px"; 
 
} 
 
if (paddleBtn) { 
 
    paddleBtn.style.cursor = 'pointer'; 
 
    paddleBtn.onclick = function() { 
 
    if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) { 
 
     var widthC = parseInt(paddleC.style.width) + 20; 
 
     paddleC.style.width = String(widthC).concat('px'); 
 
     if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) { 
 
     paddleC.style.width = paddleC.parentElement.offsetWidth; 
 
     } 
 
    } 
 
    if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) { 
 
     paddleC.style.backgroundColor = "#B3DDE0"; 
 
     paddleC.style.width = paddleC.parentElement.offsetWidth - 2; 
 
    } 
 
    }; 
 
}

.btn { 
 
    display: inline-block; 
 
    border: 1px solid Black; 
 
    height: 30px; 
 
    width: 100px; 
 
} 
 

 
.cooldown { 
 
    z-index: 1; 
 
    position: fixed; 
 
    height: inherit; 
 
    background-color: #DCDCDC; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    -moz-transition: width 0.4s ease-in-out; 
 
    -o-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
    transition: background-color 0.2s ease; 
 
} 
 

 
.labelT { 
 
    z-index: 2; 
 
    position: fixed; 
 
    padding: 5px; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    font-family: "Arial", Times, serif; 
 
    width: inherit; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<html> 
 

 
<head> 
 
    <script src="./script.js" async></script> 
 
</head> 
 

 
<body> 
 
    <div class='btn' id='paddleBtn'> 
 
    <div class='labelT'>Paddle</div> 
 
    <div class='cooldown' id='paddleC'></div> 
 
    </div> 
 
</body> 
 

 
</html>

、私はまだJavaScriptの基礎のこつを取得しようとしている言ったように。 StackOverflow上で動作させるためにコードサンプルを修正しなければなりませんでした。

助けてください！

ありがとうございます！ Viksit

出典

2017-12-12 blagnom650

]（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout） – Titus

@Titus setTimeoutがトリックを行いました。ありがとう！ – blagnom650

これを試すことができます。あなたの要件に応じて間隔の時間を変更することができます、私は今のところ3秒を置く。あなたは[のsetInterval]（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval）と[setTimeoutメソッドを見てみなければならないおかげ


 

 
var paddleInterval; 
 
    var paddleBtn = document.getElementById('paddleBtn'); 
 
    var paddleC = document.getElementById('paddleC'); 
 
    function decreasePaddle(){ 
 
     var widthC = parseInt(paddleC.style.width) - 20; 
 
     paddleC.style.width = String(widthC).concat('px'); 
 
     paddleC.style.backgroundColor = "#DCDCDC"; 
 
     if (parseInt(paddleC.style.width) <= 0){ 
 
clearInterval(paddleInterval); 
 
} 
 
    } 
 
    if (paddleC) { 
 
     paddleC.style.width = "0px"; 
 
    } 
 
    if (paddleBtn) { 
 
     paddleBtn.style.cursor = 'pointer'; 
 
     paddleBtn.onclick = function() { 
 
     if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) { 
 
      clearInterval(paddleInterval); 
 
      var widthC = parseInt(paddleC.style.width) + 20; 
 
      paddleC.style.width = String(widthC).concat('px'); 
 
      if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) { 
 
      paddleC.style.width = paddleC.parentElement.offsetWidth; 
 
      } 
 
     } 
 
     if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) { 
 
      paddleC.style.backgroundColor = "#B3DDE0"; 
 
      paddleC.style.width = paddleC.parentElement.offsetWidth - 2; 
 
      paddleInterval = setInterval(decreasePaddle, 3000); 
 
     } 
 
     }; 
 
    }

.btn { 
 
    display: inline-block; 
 
    border: 1px solid Black; 
 
    height: 30px; 
 
    width: 100px; 
 
} 
 

 
.cooldown { 
 
    z-index: 1; 
 
    position: fixed; 
 
    height: inherit; 
 
    background-color: #DCDCDC; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    -moz-transition: width 0.4s ease-in-out; 
 
    -o-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
    transition: background-color 0.2s ease; 
 
} 
 

 
.labelT { 
 
    z-index: 2; 
 
    position: fixed; 
 
    padding: 5px; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    font-family: "Arial", Times, serif; 
 
    width: inherit; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<html> 
 

 
<head> 
 
    <script src="./script.js" async></script> 
 
</head> 
 

 
<body> 
 
    <div class='btn' id='paddleBtn'> 
 
    <div class='labelT'>Paddle</div> 
 
    <div class='cooldown' id='paddleC'></div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-12-12 10:32:30

魅力のように動作します、ありがとう！ – blagnom650

これはsetIntervalで実行できます。到達可能な変数（IE：var interval = setInterval（..）;）に割り当てることを覚えておいて、それを参照して必要なときにいつでもキャンセルできるようにしてください（IE：ユーザーが - > setTimeout/setInterval 10s - > setInterval 200ms幅が0になるまで）

出典

2017-12-12 10:30:21

はJavaScript - 減少divの幅が連続した後に一定の間隔

答えて

関連する問題