jQuery timers计时器简单应用说明

简介

jQuery timers 是一个计时器插件，可以创建一个或多个 JavaScript 计时器 (计时器本质上为独立的 JavaScript 定时器)，并提供了计时器的 start()、stop() 等方法，方便地设置计时器的启动、停止、暂停等功能。jQuery timers 的最新版本为 1.3.0，支持 jQuery 1.3+（含 1.4.2、1.5.2 等版本），另外也可以与 jQuery UI 1.7+ 结合使用。

开始使用

要使用 jQuery timers，需要引入 jquery.timers.js 文件。在 head 标签中添加如下代码：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="jquery.timers.js"></script>
</head>

常用方法

.timer()

.timer() 是 jQuery 对象的方法，用于创建一个计时器，可以设置计时器的名称和间隔时间。例如：

$('#myTimer').timer({
  delay: 1000,
  duration: 60000,
  callback: function() {
    console.log('Timer...');
  },
  repeat: true
});

以上代码的意思是创建了一个计时器，名称为“myTimer”，每隔 1000 毫秒（即 1 秒）执行一次回调函数，回调函数的内容为输出“Timer...”，计时器的总时长为 60000 毫秒（即 60 秒），计时器执行完后是否重复执行是根据 repeat 参数的值来决定的，这里设置为 true，表示重复执行。

.everyTime()

.everyTime() 是 jQuery 对象的方法，用于设定定时器的回调函数和时间间隔，每隔指定时间间隔就会执行一次设定的回调函数。例如：

$.everyTime(1000, function() {
  console.log('Time out!');
});

以上代码的意思是设定每隔 1000 毫秒（即 1 秒）执行一次回调函数，回调函数的内容为输出“Time out!”。

示例说明

示例一：倒计时

var countDown = 60; // 默认倒计时时间为 60 秒
$('#countdown').text(countDown); // 将倒计时时间显示在页面中

$('#startBtn').click(function() {
  $(this).attr('disabled', true); // 禁用按钮
  $('#stopBtn').attr('disabled', false); // 启用按钮
  var timer = $.timer(function() {
    if (countDown > 0) {
      countDown--; // 倒计时减 1
      $('#countdown').text(countDown); // 更新页面中的倒计时时间
    } else {
      timer.stop(); // 计时器停止
      $('#startBtn').attr('disabled', false); // 启用按钮
      $('#stopBtn').attr('disabled', true); // 禁用按钮
      alert('Time is up!'); // 弹出提示框
    }
  }, 1000, true); // 1000 毫秒即 1 秒，设置执行回调函数的间隔时间为 1 秒，设置计时器重复执行
});

$('#stopBtn').click(function() {
  $(this).attr('disabled', true); // 禁用按钮
  $('#startBtn').attr('disabled', false); // 启用按钮
  $.timer.clear(); // 停止所有计时器
  countDown = 60; // 倒计时时间重置为 60 秒
  $('#countdown').text(countDown); // 更新页面中的倒计时时间
});

示例二：动态更新时钟

function updateClock() {
  var now = new Date(), // 获取当前时间
      hours = now.getHours(), // 获取小时
      minutes = now.getMinutes(), // 获取分钟
      seconds = now.getSeconds(); // 获取秒数
  hours = (hours < 10 ? '0' : '') + hours; // 小时数不足两位数的在前面补 0
  minutes = (minutes < 10 ? '0' : '') + minutes; // 分钟数不足两位数的在前面补 0
  seconds = (seconds < 10 ? '0' : '') + seconds; // 秒数不足两位数的在前面补 0
  $('#clock').text(hours + ':' + minutes + ':' + seconds); // 将时钟显示在页面中
}

$(document).ready(function() {
  updateClock(); // 初始化显示当前时间
  $.timer(updateClock, 1000, true); // 每隔 1 秒调用一次 updateClock() 函数
});

以上代码的实现方式为每秒钟调用一次 updateClock() 函数，更新时钟显示时间。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery timers计时器简单应用说明 - Python技术站

jQuery timers计时器简单应用说明

jQuery timers计时器简单应用说明

简介

开始使用

常用方法

.timer()

.everyTime()

示例说明

示例一：倒计时

示例二：动态更新时钟

相关文章