jQuery實用LED樣式計時器倒計數器插件使用攻略?

ClassyLED是一款非常實用的LED樣式計時器 倒計數器jQuery插件。你可以實用該插件來製作各種倒計數效果,倒計時效果,電子時鐘效果,或製作LED樣式的隨機數字。使用該插件來製作LED效果非常容易,並且效果非常不錯。

本經驗介紹如何說使用ClassyLED實現LED樣式計時器 倒計數器效果。

工具/原料

筆記本電腦或是臺式機

互聯網

JQuery

ClassyLED

方法/步驟

該LED效果的動畫依賴於raphael.js-一個矢量圖形動畫庫插件。使用時要將其引入。

jQuery實用LED樣式計時器倒計數器插件使用攻略

可以使用一個空的

來製作該LED數字效果。

jQuery實用LED樣式計時器倒計數器插件使用攻略

在頁面DOM元素加載完畢之後,可以通過ClassyLED()方法來初始化該插件。

jQuery實用LED樣式計時器倒計數器插件使用攻略

配置參數如下所示:

type:LED顯示的類型,可以是:countdown,random,number 和time。默認為time。

format:LED的時間格式,例如:hh:mm:ss。默認為hh:mm。

value:如果LED的類型是number,可以通過該參數來指定值。

color:LED數字的十六進制顏色,默認是#fff。

bgcolor:背景的的十六進制顏色,默認是#000。

size:LED數字的尺寸,單位像素,默認值12。

rounded:LED數字的圓角,默認值為1。

spacing:兩個數字之間的距離,默認為1。

fontType:LED數字的字體類型,取值1-3,默認為1。

hourFormat:小時的格式,可以是12或24。默認為24。

countTo:如果是倒計時器,該參數設置要倒計時到的時間。格式為yyyy:mm:dd,例如:2015:12:25,默認為當前年的最後一天。

jQuery實用LED樣式計時器倒計數器插件使用攻略

瀏覽器兼容性如下圖所示:

jQuery實用LED樣式計時器倒計數器插件使用攻略

運行效果如下圖所示:

jQuery實用LED樣式計時器倒計數器插件使用攻略

注意事項

本插件依賴於JQuery庫

相關問題答案