jqueryはグローバルタイマーインスタンス共有を実装します

この記事ではショッピングモールで使えるグローバルタイマーを実装するためのjqueryを中心に紹介しますので、皆さんのお役に立てれば幸いです。

この記事の例では、参考のためにショッピング モールで使用できる jquery グローバル タイマーを共有します。具体的な内容は次のとおりです。

実装アイデア

時間を測定するすべての要素を調べ、setInterval タイミング関数を追加します。 X 秒ごとに実行します。更新タイミング操作 (途中でフォーマット時間操作がある場合があります)。

コードの実装

ps: JQ 要素は、arr[i] を通じて値が取得されるときに DOM 要素に変換されます。DOM 要素と JQ の間の変換は、すべての値を取得するために $(arr[i])

を使用して行われます。時間を測定する要素

var arrList =$(".stime");
setInterval(function(){
 //遍历数组
 for(var i = 0,l = arrList.length; i<l ;i++ ){
  var elem = arrList[i];
  //格式化时间插入HTML文档
  $(elem).html(DateDiff( new Date(), new Date($(elem).attr("time") ), elem ));
 }
},1000);

計算 時間関数は逆にすることも、修正することもできます

ps: Java バックグラウンドから渡された時間の場合は、時間の形式に注意してください。時間はここで処理されています (落とし穴です)。

/*DateDiff 处理*/
function DateDiff(t1, t2, elem){
 //GTM CST 时间相差14小时 
 var diff = t1.setHours(t1.getHours()+14) - Date.parse(t2);
 //超过一天显示warning色
 if(diff>(1000*60*60*24)){
  $(elem).css({color:"rgb(247, 186, 42)"});
 }
 return ShowTime(diff);
}

処理関数を表示、精度は自分で選択可能

不要、コメントアウトするだけ

/*fuc 计时显示处理*/
function ShowTime(ms){
 var obj = {
  "天" : 1000*60*60*24,
  "时" : 1000*60*60,
  "分" : 1000*60
  /*
  "秒" : 1000
  */
 };
 var tmp = ms;
 var str = "";
 for( var i in obj ){
  //向下取整 1.5天 => 1天
  s = Math.floor( tmp / obj[i] );
  tmp = tmp % obj[i];
  str += s+i;
 }
 return str;
}

関連おすすめ:

jQueryタイマー機能とカウントダウン機能の実装

JavaScriptの分秒カウントダウンタイマー実装メソッド

JavaScriptタイマーの実装

以上がjqueryはグローバルタイマーインスタンス共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。