發現一個很不錯的倒計時jquery插件,有環形特效,先上圖:
jquery開發實現倒計時網頁特效源碼,有環形效果
已經測試木有問題,代碼是開源的,下面是地址:http://www.dowebok.com/62.html
沒幣的同學可以去官網下載,土豪同學可以直接下載附件撒。同時我也貼一下官網給出的說明:
TimeCircles 是一個 jQuery 時間類插件,它能夠制作出一個漂亮環的形時間,可用于計時或倒計時。雖然 TimeCircles 默認的樣式已經很漂亮了,但它還提供了各種參數來自定義,你可以很方便的設置包括環形的大小、進度條的大小、環形的顏色、進度條的顏色、多少刷新以及控制暫停和開始。
兼容性
TimeCircles 的環形面板是 HTML5 canvars,所以它不兼容 IE6 – IE8。
使用方法
1、引入文件
1<link rel="stylesheet" href="css/TimeCircles.css">
2<script src="js/jquery.min.js"></script>
3<script src="js/TimeCircles.js"></script>
2、HTML
1<div></div>
2<div data-date="2014-01-01 00:00:00"></div>
3<div data-timer="900"></div>
可選 data-date 和 data-timer 兩個屬性,data-date 的值是具體的莫一天多少小時多少分鐘多少秒,如2014-01-01 00:00:00,他的作用是計算現在與這個時間過了多久或還有多久;data-timer 的值是一個整數,如900,它的作用是一個秒表,單位是秒。如果這兩個屬性都缺省,那么它會在頁面一開始的時候從0秒開始計時。
3、JavaScript
1$(function(){
2 $(.someTimer').TimeCircles();
3});
參數
參數 類型 說明 默認值
start 布爾值 是否自動開始 true
refresh_interval 數字 多少時間刷新面板 0.1
count_past_zero 字符串 截止后是否歸0,當倒計時結束后面板全部顯示0 true
circle_bg_color 字符串 環形背景顏色 #60686F
use_background 布爾值 是否顯示背景顏色 true
fg_width 數字 環形寬度 0.1
bg_width 數字 進度條的寬度 1.2
time json 單獨設置每個環形的文字、顏色 50
start() 函數 開始 無
stop() 函數 停止 無
destroy() 函數 從頁面中刪除計時器
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。