JavaScriptはsetTimeoutを使ってカウントダウン効果を実現します。
4158 ワード
JavaScript原生コードの作成能力を強化するために、setTimeoutの使用方法を強化するために、カウントダウンのデモを作成しました。カウントダウンは現在のウェブサイトでは一般的な機能です。もし皆さんが好きなら残してもいいです。
構想を実現する
1、時間値を先に取得して、時間値を1から減らしてカウントを開始する場合、分59秒数59
2、秒数のビットは9から減少し、秒数のビットが0より小さい場合、秒数の10ビットは1を減らす。
3、秒数の10ビットが0より小さい場合、分のビットは1を減算します。
4、分のビットが0より小さい場合、分の10桁は1を減らす。
5、分の10桁が0未満の場合は、1時間減とする。
6、時間数が0未満の場合、停止時間は全部0となります。
コードを実現
html
終了ページ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
構想を実現する
1、時間値を先に取得して、時間値を1から減らしてカウントを開始する場合、分59秒数59
2、秒数のビットは9から減少し、秒数のビットが0より小さい場合、秒数の10ビットは1を減らす。
3、秒数の10ビットが0より小さい場合、分のビットは1を減算します。
4、分のビットが0より小さい場合、分の10桁は1を減らす。
5、分の10桁が0未満の場合は、1時間減とする。
6、時間数が0未満の場合、停止時間は全部0となります。
コードを実現
html
<p> :</p>
<span id="hour">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>
css
span{
display: inline-block;
width: 20px;
height: 20px;
background-color: #000000;
color: #ffffff;
text-align: center;
}
JavaScript
function time(){
/* */
var hourTxt = document.getElementById("hour");
var hour = parseInt(document.getElementById("hour").innerHTML);
/* */
var minuteTenTxt = document.getElementById("minuteTen");
var minuteBitTxt = document.getElementById("minuteBit");
var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
/* */
var secondTenTxt = document.getElementById("secondTen");
var secondBitTxt = document.getElementById("secondBit");
var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
function start(){
hour--;
hourTxt.innerHTML = hour;
minuteTen = 5;
minuteTenTxt.innerHTML = minuteTen;
minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit;
secondTen = 5;
secondTenTxt.innerHTML = secondTen;
secondBit = 9;
secondBitTxt.innerHTML = secondBit;
/*secondBit */
function second(){
secondBit--;
secondBitTxt.innerHTML = secondBit;
/* */
if(secondBit < 0){
secondTen--;
secondTenTxt.innerHTML = secondTen;
secondBit = 9;
secondBitTxt.innerHTML = secondBit;
/* */
setTimeout(second,1000);
/* */
if(secondTen < 0){
minuteBit--;
minuteBitTxt.innerHTML = minuteBit;
secondTen = 5;
secondTenTxt.innerHTML = secondTen;
secondBit = 9;
secondBitTxt.innerHTML = secondBit;
/* */
if(minuteBit < 0){
minuteTen--;
minuteTenTxt.innerHTML = minuteTen;
minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit;
}
/* */
if(minuteTen < 0){
hour--;
hourTxt.innerHTML = hour;
minuteTen = 5;
minuteTenTxt.innerHTML = minuteTen;
minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit;
secondTen = 5;
secondTenTxt.innerHTML = secondTen;
secondBit = 9;
secondBitTxt.innerHTML = secondBit;
}
/* */
if(hour < 0 ){
hour = 0;
hourTxt.innerHTML = hour;
minuteTen = 0;
minuteTenTxt.innerHTML = minuteTen;
minuteBit = 0;
minuteBitTxt.innerHTML = minuteBit;
secondTen = 0;
secondTenTxt.innerHTML = secondTen;
secondBit = 0;
secondBitTxt.innerHTML = secondBit;
clearTimeout(second);
clearTimeout(start);
}
}
}else{
setTimeout(second,1000);
}
}
setTimeout(second,1000);
}
setTimeout(start,1000);
}
実行ページ終了ページ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。