實現頁面的多個倒計時效果

阿新 • • 發佈：2019-01-10

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery實現頁面的多個倒計時</title>
</head>
<body>
<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function 
(){
    updateEndTime();
});
function updateEndTime(){
   var NowTime = new Date();
   var time = NowTime.getTime(); 
 $(".settime").each(function(I){
 var endDate =this.getAttribute("endTime"); //結束時間字串
 //轉換為時間日期型別
 var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return 
 parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
 var endTime = endDate1.getTime(); //結束時間毫秒數
 var lag = (endTime - time) / 1000; //當前時間和結束時間之間的秒數
if(lag > 0){
 var second = Math.floor(lag % 60);     
 var minite = Math.floor((lag / 60) % 60);
 var hour = Math.floor((lag / 3600) % 24);
 var day = Math.floor((lag / 3600) / 24 
);
 $(this).html(day+"天"+hour+"時"+minite+"分"+second+"秒");
}else{
 $(this).html("時間到了！！！");
}
});
   setTimeout("updateEndTime()",1000);
}
</script>

<div class="settime" endTime="2016-04-08 17:36:00"></div>
可以寫在迴圈裡，只要保持跟上面的ID一致就可以啦
<div class="settime" endTime="2016-04-10 00:00:00"></div>
</body>
</html>

此為時分秒：：：
<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
    updateEndTime();
});

function updateEndTime(){
   var NowTime = new Date();
   var time = NowTime.getTime(); 
 $(".settime").each(function(I){
 var endDate =this.getAttribute("endTime"); 
 var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
 var endTime = endDate1.getTime(); 
var lag =Math.floor((endTime - time) / 1000); 
if(lag > 0){var h = Math.floor(lag / 3600);var d = Math.floor(h/24);var m = Math.floor(lag/60%60);var s = lag%60;$(this).html(h +":"+m+":"+s);
}else{
    $(this).html("時間到");
}});
setTimeout("updateEndTime()",1000);}
</script>

打賞作者：
這裡寫圖片描述

jquery頁面多個倒計時效果

bsp width data jquer -a second ext time() size <div class="timeBox" data-times="2019/06/30,23:59:59"> 距結束 <span class="tim

實現頁面的多個倒計時效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

一個頁面多個倒計時 js

方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒計時</title> <

一個頁面多個倒計時

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!--<base href="" />

jquery 頁面多個倒計時

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

jquery 實現一個頁面多個tab頁

無法 text mage solid 出現 none poi code tle <!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/h

一個頁面多個tab選項卡效果

結果菜鳥提升 ref -a 搜索引擎 flow .cn www. 新整理同一個頁面多個tab選項卡，由於不會自己些代碼，只能從網上找現成的來改。留著備用。共3部分，HTML、CSS、JS 暫時沒有演示地址和下載地址，以後會補上。 HTML部分 <!DOCTY

jquery.vm-carousel.js實現展示多個圖片的輪播效果

angular-timer 單個頁面設定多個倒計時

最近專案中要做個一元搶購倒計時功能，一個頁面有多個倒計時。很是頭疼，還好找到angular-timer外掛,頓時輕鬆許多。做完順便做下記錄： 1.外掛地址 https://github.com/siddii/angular-timer 在index中引入以下幾個檔案

使用ZXing實現掃描多個條形碼頁面

1.前言 ZXing是google官方推出的跨平臺的基於Java實現處理掃面二維碼或者條形碼的庫。支援很多格式，一維條碼支援UPC-A，UPC-E，EAN-8，Code 39，Code 93等格式，二維條碼支援QR Code，Data Matrix，PDF 417，MaxiCode等

echarts實現一個頁面多個餅狀圖共用方法的封裝

var warnStates = (function(){ var warnNumCount = warnNum; var joinAllManCount = joinAllMan; return { warnStatesData : function(){ v

GCD實現單個頁面多個網路請求，需要監聽所有網路請求結束後重新整理UI的處理

dispatch_group_t group = dispatch_group_create(); dispatch_queue_t serialQueue = dispatch_queue_create("com.tikeyc.tikeyc", DISPATC

多個倒計時切換開始和結束

move 顯示 ont tin call () doc loop script /* * @Author: Mark * @Date: 2015-08-06 13:54:01 * @Last Modified by: Mark * @Last Modified

.net MVC 單頁面多個(行)數據修改

addm val 界面 services sum sta 設置 error ces 一 /// <summary> /// 參數信息分頁請求，前臺要設置Form，這樣可以當前頁多值修改 /// </summary> /// <returns

Android -- 自定義view實現keep歡迎頁倒計時效果

super onfinish -m use new getc awt ttr alt 1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。 2，還是老規矩，先看一下我們今天實現的效果　　相較於我們常見的倒計時

C++實現給多個變量傳值

ucs userinfo weibo ref hid gin left use margin 浦88TBR疵95閹TJ糜骯http://weibo.com/u/6348338757 屠貉業17慕M紗杜73油萊http://jz.docin.com/rido621 2B0

HTML5 audio 如何實現播放多個MP3音頻

html tel 不能則無技術分享 class listener 內容 2-0 <audio>標簽是HTML5中的新標簽，定義聲音用於嵌入音頻內容，比如音樂或其他音頻流。用的比較多音頻格式是.mp3。 <audio>標簽常用屬性如下表屬性

js獲取大表詳情頁面多個模塊相同的project_id

click border cti delete ear table region RM edi js頁面 $(function(){ 1. $(‘#project_id‘).val(project_id); --》此行代碼是前端傳過來獲取多個模塊的相同id，必不可少

一個頁面多個ng-app指令

多個ng-app 指令啟動第二個ng-app指令需要用到angular.bootstrap()方法一個頁面多個ng-app指令

ztree外掛同一頁面多個tree想要每個tree有獨立的點選事件

在同一個頁面如果有兩個tree，而且想要兩個tree的點選事件區別開來，需要設定獨立的一套setting和回撥函式，如下： //第一棵樹 var setting = { isSimpleData : true, //資料是否採用簡單 Ar

實現頁面的多個倒計時效果

相關推薦