jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
本文實(shí)例為大家分享了商城一類都可以使用的jquery全局計(jì)時(shí)器,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)思路
遍歷所有待計(jì)時(shí)元素,添加一個(gè)setInterval計(jì)時(shí)函數(shù),每隔X秒執(zhí)行更新計(jì)時(shí)操作(中間可能還有格式化時(shí)間操作)。
代碼實(shí)現(xiàn)
ps:JQ元素通過arr[i]取值時(shí)會(huì)轉(zhuǎn)變成DOM元素,dom元素和JQ之間轉(zhuǎn)換用 $(arr[i])
獲取所有待計(jì)時(shí)元素
var arrList =$(".stime"); setInterval(function(){ //遍歷數(shù)組 for(var i = 0,l = arrList.length; i<l ;i++ ){ var elem = arrList[i]; //格式化時(shí)間插入HTML文檔 $(elem).html(DateDiff( new Date(), new Date($(elem).attr("time") ), elem )); } },1000);
計(jì)算時(shí)間函數(shù),可倒可正
ps:如果是Java后臺(tái)傳過來的時(shí)間,注意下時(shí)間格式,這里已經(jīng)做了處理(是個(gè)坑點(diǎn));
/*DateDiff 處理*/ function DateDiff(t1, t2, elem){ //GTM CST 時(shí)間相差14小時(shí) 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); }
顯示處理函數(shù),可自行選擇精確度
不需要,注釋掉即可
/*fuc 計(jì)時(shí)顯示處理*/ function ShowTime(ms){ var obj = { "天" : 1000*60*60*24, "時(shí)" : 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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用jquery讀取html5 localstorage的值的方法
- jQuery訪問瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法
- jQuery timers計(jì)時(shí)器簡(jiǎn)單應(yīng)用說明
- 基于JQuery.timer插件實(shí)現(xiàn)一個(gè)計(jì)時(shí)器
- jquery 顯示*天*時(shí)*分*秒實(shí)現(xiàn)時(shí)間計(jì)時(shí)器
- 基于jquery插件編寫countdown計(jì)時(shí)器
- jQuery實(shí)現(xiàn)簡(jiǎn)單的計(jì)時(shí)器功能實(shí)例分析
- sliderToggle在寫jquery的計(jì)時(shí)器setTimeouter中不生效
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
- 利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)時(shí)器示例代碼
相關(guān)文章
jQuery中的replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換功能
這篇文章主要介紹了jQuery之replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換,使用jQuery的replace()方法可以很方便地實(shí)現(xiàn)不同尺寸圖片的切換,需要的朋友可以參考下2023-06-06easyUI使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作實(shí)例分析
這篇文章主要介紹了easyUI使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作,結(jié)合實(shí)例形式詳細(xì)分析了easyUI分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器
這篇文章主要為大家詳細(xì)介紹了基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07使用jQuery內(nèi)容過濾選擇器選擇元素實(shí)例講解
內(nèi)容過濾選擇器:根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素,其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位,接下來為大家詳細(xì)介紹下jQuery選擇器,感興趣的朋友可以參考下哈2013-04-04jquery ztree實(shí)現(xiàn)右鍵收藏功能
最近做項(xiàng)目需要使用ztree做一個(gè)右鍵收藏功能,下面小編給大家分享實(shí)例代碼,需要的朋友參考下吧2017-11-11jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯(cuò)誤提示等知識(shí),然后給出了簡(jiǎn)單使用實(shí)例和ASP.NET MVC模式下的使用實(shí)例,需要的朋友可以參考下2015-05-05