設定間隔でdivの幅と高さを増減する

私はこのプロジェクトを実践しており、結果の半分を達成していますが、残りの半分をどのように把握できません。基本的に私は幅が0、高さが0のdiv1を親div2の内側に配置し、幅と高さをそれぞれ280px、境界線の半径を50％としています。 div1の兄弟div3には値が入っています。 div2をクリックすると、div3のテキストが秒に変換されてからintervalに設定され、幅と高さが秒に比例して増加する関数が実行され、div1の高さと幅が親div2と等しくなるようになります。私はこれまでこれを達成していますが、今度は秒数を70に再割り当てし、div1の幅と高さを比例して減らしたいと思います。私の説明では十分ではないかもしれないので、付属のコードスニペットを参照してください。あなたの助けを前もってありがとう。設定間隔でdivの幅と高さを増減する

var display, time, loader, width, height, reverse, seconds, running, interval; 
 

 
display = document.getElementById("display"); 
 
time = document.getElementById("time"); 
 
loader = document.getElementById("loader"); 
 
width = 0; 
 
height = 0; 
 
reverse = false; 
 
running = false; 
 
seconds = parseInt(time.textContent)*60; 
 

 

 
if (width === 280 && height === 280) { 
 
    reverse = true; 
 
    time.textContent = 70; 
 
} 
 

 
display.addEventListener("click" , function(){ 
 
    
 
    if (running === false) { 
 
    running = true; 
 
    interval = setInterval(function(){ 
 
     
 
     if (reverse === false) { 
 
     width += (280-width)/seconds; 
 
     height += (280-height)/seconds; 
 
     } 
 
     else { 
 
     width -= (width/seconds); 
 
     height -= (height/seconds); 
 
     } 
 
     
 
     loader.style.width = Math.round(width) + "px"; 
 
     loader.style.height = Math.round(height) + "px"; 
 
     console.log(width + " " + height); 
 
     time.textContent = seconds; 
 
     
 

 
     
 
     if (seconds > 0) { 
 
     seconds--; 
 
     } 
 
    },1000); 
 
    } 
 
    
 
    else { 
 
    running = false; 
 
    clearInterval(interval); 
 
    console.log("Inteval cleared"); 
 
    } 
 
    
 
});

#display { 
 
    width : 280px; 
 
    height: 280px; 
 
    border: 1px solid #5fcf80; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    font-family: sans-serif; 
 
    cursor: pointer; 
 
} 
 

 
#time { 
 
    font-size: 120px; 
 
    text-align: center; 
 
    line-height: 280px; 
 
    position: relative; 
 
    z-index: 9; 
 
} 
 

 
#loader { 
 
    z-index: 1; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #5fcf80; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    
 
    <div id="display"> 
 
    
 
    <div id="time">1</div> 
 
    <div id="loader"></div> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-11-01 knight

あなたのコード内のいくつかのミスはありません。

1-その内容が実行されることはありませんので、以下のif句は無意味です：

if (width >= 280 && height >= 280) { 
    reverse = true; 
    time.textContent = 70; 
}

それは決してこれはifが0の外部にあるため実行されますおよびsetInterval。 widthとheightがまだ0のとき、最初に1回実行されます。次のコードは、setIntervalの先頭にあるべきである

2-：

これらの行が実行される。

if (seconds > 0) { seconds--;

理由は、secondsが0に達したときに何が起こるかを想像する、です。 width += (280-width)/secondsおよびheight += (280-height)/seconds。

secondsは0なので、ゼロ除算が行われます。

widthおよびheightは、NaN（数字ではありません）です。

3-コード（2）であるべきで：

if (seconds > 1) { 
    seconds--; 
} else if (seconds == 1){ 
    reverse = reverse ? false : true; 
    seconds = 70; 
}

まず、secondsが1上方0でない場合、我々は0ことからsecondsを停止するために、チェックして、その中に場合によっては、1ずつ減少します。
secondsが1の場合、最大値（または最小値）widthとに達しました。
- この場合、増加している場合はreverse、その逆の場合も同様です。
- さらに、お客様の仕様に基づいてsecondsを70にリセットします。

上記の変更に基づいて

4-、secondsの初期値は61、ない60次のようになります。私たちはの初めにすぐにsecondsが低下しますのでです

seconds = parseInt(time.textContent)*61;

addEventListener。ここで

JSFiddle

出典

2017-11-02 05:06:39

に取り組んで修正されたバージョンであるあなたの助けを本当に感謝、ありがとうございました。再度ありがとう – knight

あなたは大歓迎です:) –

設定間隔でdivの幅と高さを増減する

答えて

関連する問題