jQuery簡單倒計時效果完整示例
本文實例講述了jQuery簡單倒計時效果。分享給大家供大家參考,具體如下:
前天做了一個活動項目,其中有一塊需要做倒計時的效果,由于需求比較簡單,所以也就沒用網(wǎng)上各種倒計時的插件。今天抽空整理出來,分享給大家。
html 代碼如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒計時效果</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> #countDown{font-size:48px;line-height:10;text-align:center;} </style> </head> <body> <div id="countDown"></div> </body> </html> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> function countDown(years,months,days,hours,minutes){ var dateFinal = new Date(years,months,days,hours,minutes); //設置倒計時到達時間 var dateNow = new Date(); //獲取系統(tǒng)當前時間 var dateSub = dateFinal - dateNow; //計算差值,單位毫秒 var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0; //初始化各個數(shù)值 var timeHtml = ''; timeHtml += '距離' + years + '年' + toDouble(months + 1) + '月' + toDouble(days) + '日' + toDouble(hours) + '時' + toDouble(minutes) + '分還剩下'; dayBase = 24 * 60 * 60 * 1000; //計算天數(shù)的基數(shù),單位毫秒。1天等于24*60*60*1000毫秒 hourBase = 60 * 60 * 1000; //計算小時的基數(shù),單位毫秒。1小時等于60*60*1000毫秒 minuteBase = 60 * 1000; //計算分鐘的基數(shù),單位毫秒。1分鐘等于60*1000毫秒 secondBase = 1000; //計算秒鐘的基數(shù),單位毫秒。1秒鐘等于1000毫秒 day = Math.floor(dateSub / dayBase); //計算天數(shù),并取下限值。如 5.9天 = 5天 hour = Math.floor(dateSub % dayBase / hourBase); //計算小時,并取下限值。如 20.59小時 = 20小時 minute = Math.floor(dateSub % dayBase % hourBase / minuteBase); //計算分鐘,并取下限值。如 20.59分鐘 = 20分鐘 second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase); //計算秒鐘,并取下限值。如 20.59秒 = 20秒 //當天數(shù)小于等于0時,就不用顯示 if(day <= 0){ timeHtml += toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒'; }else{ timeHtml += day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒'; } $('#countDown').html(timeHtml); } //當小時,分鐘和秒鐘小于 10 的時候會顯示為個位數(shù),比較難看,需要在前面加 0。 function toDouble(num){ if(num < 10){ return '0'+ num; }else{ return '' + num; } } $(function(){ setInterval(function(){ countDown(2016,9,1,10,0); },1000); }); </script>
運行效果圖如下:
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jquery popupDialog 使用 加載jsp頁面的方法
下面小編就為大家?guī)硪黄猨query popupDialog 使用 加載jsp頁面的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動效果(高度變化)來切換元素的可見狀態(tài)。2011-06-06jQuery中checkbox反復調(diào)用attr(''checked'', true/false)只有第一次生效的解決方法
這篇文章主要介紹了jQuery中checkbox反復調(diào)用attr('checked', true/false)只有第一次生效的解決方法,通過使用prop方法代替attr方法來解決此問題,需要的朋友可以參考下2016-11-11jquery實現(xiàn)通用版鼠標經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實現(xiàn)的通用版鼠標經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06Jquery 改變radio/checkbox選中狀態(tài),獲取選中的值(示例代碼)
這篇文章主要介紹了Jquery 改變radio/checkbox選中狀態(tài),獲取選中的值(示例代碼) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12