jQuery 計時器插件:jQuery Timer

jopen 9年前發布 | 35K 次閱讀 其他jQuery插件 jQuery插件 jQuery Timer

jQuery Timer 可以在任意 HTML 元素開始,停止,恢復或者移除一個計時器,并且可以在設定的時間或者間隔一定的時間得到提醒通知。 

Demo & Instructions | Download

How to use

In your web page:

<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/timer.jquery.js"></script>
<script>
(function($) {

  //start a timer
  $("#div-id").timer();

}());
</script>

Usage Instructions

Start a timer from 100 seconds (1:40)

$("#div-id").timer({
    seconds: 100
});

Methods available on an initialized timer:

//pause an existing timer
$("#div-id").timer('pause');

//resume a paused timer
$("#div-id").timer('resume');

//remove an existing timer
$("#div-id").timer('remove');  //leaves the display intact

//get elapsed time in seconds
$("#div-id").data('seconds');

Timed Events

Start a timer and execute a function after a certain duration. You can use this to simulate a timed event.

//start a timer & execute a function in 5 minutes & 30 seconds
$('#div-id').timer({
    duration: '5m30s',
    callback: function() {
        alert('Time up!');
    }
});

Start a timer and execute a function repeatedly at a certain duration. You can use this to sync current state with the backend by initiating a ajax request at regular intervals.

//start a timer & execute a function every 2 minutes
$('#div-id').timer({
    duration: '2m',
    callback: function() {
        alert('Why, Hello there');  //you could have a ajax call here instead
    },
    repeat: true //repeatedly calls the callback you specify
});

Duration Syntax

When you initialize a timer with the duration and callback parameters, the timer plugin executes the callback function at the set duration. The syntax for specifying the duration is verbose. h for hours. m for minutes and s for seconds. Here are some examples:

'3h15m'     // 3 hours, 15 minutes
'15m'       // 15 minutes
'30s'       // 30 seconds
'2m30s'     // 2 minutes 30 seconds
'2h15m30s'  // 2 hours 15 minutes and 30 seconds

jQuery 計時器插件:jQuery Timer

項目主頁:http://www.baiduhome.net/lib/view/home/1418096000808

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!