javascript_javascript スキルに基づいてミリ秒単位で正確なカウントダウン期間限定セールを実装する

この記事では、期間限定セールのカウントダウンの JavaScript 実装を共有します。参考までに、カウントダウンはミリ秒単位で正確です。具体的な内容は次のとおりです。

1. レンダリング

下の写真はJuhuasuanの期間限定グラブの効果です

2. 期間限定グラブ効果を達成するために必要な知識: Javascript Date() オブジェクト
Date() は現在の日付とイベントを返します
get Year() は年を返します。年を取得するのが最善です
操作する getFull Year() メソッド (2016 年の完全な形式)
getMonth() は月の値 (0、+1 から始まる) を返します
getDay() は曜日 (0-6) を返します
getHours() は時間数 (0 ～ 23) を返します
getMinutes() は分数 (0 ～ 59) を返します
getSeconds() は秒数を返します
getTime() はミリ秒数を返します
もちろん、上記の呼び出しメソッドをすべて使用する必要はありません。これは、ユーザー自身のニーズによっても異なります。早速、コードに直接進みましょう:
1. HTML ページのコード:
342e588355f7d4a5f7fe1bd747fdeb4194b3e26ee717c64999d7867364b1b4a3

クラス left-time を使用して、カウントダウン コンテンツを e388a4556c0f65e1904146cc1a846bee タグに配置します。 2. JS スクリプト:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余："+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

上記の JS は、限られた時間の取得の簡単な例を実装しています。parseInt() メソッドは丸め処理を行っており、getTime() は時間をミリ秒に変換します。parseInt() メソッドに加えて、Math.floor ( )は切り捨てに置き換えられます。

最後に、時間が経過したときに何を表示する必要があるかを決定するために if() を与えることを忘れないでください。そうしないと、不要なバグが表示されます。