JSで動的なカウントダウン効果を実装する方法

js で動的なカウントダウン効果を実装する手順: まず、ユーザーが入力した目標時刻を取得し、次に現在時刻を取得し、目標時刻から現在時刻を減算して、時差を取得します。 ; 次に、取得した時差を日、時間、分、秒に変換し、残り時間を動的に出力します。

動的カウントダウンを段階的に実装してみましょう:

1. 表示スタイルを作成します

html コード:

<form>目的日期：<br><br>
     <input type="text" id="year"><span>年</span>
     <input type="text" id="month"><span>月</span>
     <input type="text" id="day"><span>日</span><br><br>
     <input type="text" id="hour"><span>时</span>
     <input type="text" id="minute"><span>分</span>
     <input type="text" id="second"><span>秒</span><br><br>
     <input type="button" value="确定" onclick="show()">
</form><br><br>
<div class="time1">还剩时间：<br><br>
     <span id="_d"></span>天 
     <span id="_h"></span>时
     <span id="_m"></span>分
     <span id="_s"></span>秒
</div>

css コード:

input{width:50px;height: 20px;border:1px solid black;}
.time1 span{display:inline-block;width:40px;height: 20px;}

レンダリング:

# 2. 動的を実装します。 countdown--js コード

最初のステップ: まず、ページに目標日付を入力したら、 [確認] をクリックして、目標時刻 を取得する必要があります。目標タイムをゲット。

function show(){
    //获取目的日期
    var myyear=document.getElementById("year").value;
    var mymonth=document.getElementById("month").value-1;
    var myday=document.getElementById("day").value;
    var myhour=document.getElementById("hour").value;
    var myminute=document.getElementById("minute").value;
    var mysecond=document.getElementById("second").value;
    var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
}

ステップ 2: 現在時刻を取得します。次に、目標時刻から現在時刻を減算し、残り時​​間を取得します。これが時差です。

//获取当前时间
 var nowTime=Date.now();

//获取时间差
var timediff=Math.round((time-nowTime)/1000);

ステップ 3: 取得した時差を日、時、分、秒に変換します。

//获取还剩多少天
var day=parseInt(timediff/3600/24);

//获取还剩多少小时
var hour=parseInt(timediff/3600%24);

//获取还剩多少分钟
var minute=parseInt(timediff/60%60);

//获取还剩多少秒
var second=timediff%60;

ステップ 4: 残り時間を出力します

//输出还剩多少时间
document.getElementById("_d").innerHTML=day;
document.getElementById("_h").innerHTML=hour;
document.getElementById("_m").innerHTML=minute;
document.getElementById("_s").innerHTML=second;

レンダリング:

#現時点では動的出力ではないため、手動で更新して目標日を入力する必要があります。

ステップ 5: タイマー setTimeout() を使用して時間を動的に出力します。

setTimeout(show,1000);
if(timediff==0){return 0;}

時差が 0 の場合は、0 を返し、出力を停止します。また、clearInterval() メソッドを使用してタイマーを停止し、動的に時刻を出力し続けることはできません。

 var set=setTimeout(show,1000);
if(timediff==0){clearInterval(set);}

時差が 0 の場合、clearInterval() メソッドを使用して setTimeout() タイマーを停止します。時刻は出力されなくなりました。

動的レンダリング:

説明:

setInterval(): 間隔を定義します。指定された期間 (ミリ秒単位) で関数を呼び出すか、式を計算するタイマー。このメソッドは、clearInterval() メソッドが呼び出されて setInterval() タイマーが停止されるか、ウィンドウが閉じられるまで、関数の呼び出しを続けます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がJSで動的なカウントダウン効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。