jQuery实现倒计时功能 jQuery实现计时器功能

现在开始为你讲解如何使用jQuery实现倒计时或计时器功能的攻略。

jQuery实现倒计时功能

使用jQuery Countdown插件

首先介绍一种简便的方法，即使用jQuery Countdown插件来帮助我们实现倒计时功能。

1. 引入jQuery库和jQuery Countdown插件库

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-countdown/2.2.0/jquery.countdown.min.js"></script>

1. HTML标签设定

在HTML标签中设定倒计时的容器，如下所示：

<div id="countdown"></div>

1. 调用jQuery Countdown插件

在JavaScript中调用jQuery Countdown插件，并设置倒计时的目标日期和时间：

$('#countdown').countdown('2019/12/31', function (event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

示例：这个例子中，我们设置的倒计时目标日期为2019年12月31日。最终效果为：页面中会有一个计时器显示剩余天数、小时数、分钟数、秒数，不断地向下计时。

原生jQuery代码实现

1. HTML标签设定

在HTML标签中设定倒计时的容器，如下所示：

<div id="countdown"></div>

1. jQuery实现倒计时功能

使用以下代码来实现倒计时功能：

var countDownDate = new Date("Dec 31, 2019 23:59:59").getTime();
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("countdown").innerHTML = days + " days " + hours + " hours "
  + minutes + " minutes " + seconds + " seconds ";
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);

示例：这个例子中，我们同样设置的倒计时目标日期为2019年12月31日。最终效果也是页面中会有一个计时器显示剩余天数、小时数、分钟数、秒数，不断地向下计时。

jQuery实现计时器功能

使用原生jQuery代码实现

1. HTML标签设定

在HTML标签中设定计时器的容器，如下所示：

<div id="timer">00:00:00</div>
<button onclick="timerStart()">Start</button>
<button onclick="timerStop()">Stop</button>

1. jQuery实现计时器功能

使用以下代码来实现计时器功能：

var seconds = 0;
var minutes = 0;
var hours = 0;
var t;

function add() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }
  $('#timer').text((hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds));
  timerStart();
}

function timerStart() {
  t = setTimeout(add, 1000);
}

function timerStop() {
  clearTimeout(t);
}

示例：这个例子中，我们使用两个按钮来控制计时器的开始和结束。初始界面显示的是00:00:00。点击Start按钮后，计时器开始向上计时，每过一秒钟，时分秒都会向上加1，并且页面所显示的计时器也会实时更新。同时也可以随时点击Stop按钮来停止计时器。

经过以上的讲解，相信你已经掌握如何使用jQuery实现倒计时或计时器功能了。希望本文对你有所帮助！