>웹 프론트엔드 >JS 튜토리얼 >jquery는 전역 타이머 인스턴스 공유를 구현합니다.

jquery는 전역 타이머 인스턴스 공유를 구현합니다.

小云云
小云云원래의
2018-01-06 09:37:391549검색

이 글에서는 주로 쇼핑몰에서 사용할 수 있는 글로벌 타이머를 구현하기 위한 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 분 및 초 카운트다운 타이머 구현 방법

자바스크립트 타이머 구현

위 내용은 jquery는 전역 타이머 인스턴스 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.