jQuery 计时器插件:jQuery Timer

jopen 7年前

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