html 倒计时器与jQuery.countdown和JS在倒计时结束时改变HTML aftter

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 倒计时器与jQuery.countdown和JS在倒计时结束时改变HTML aftter相关的知识，希望对你有一定的参考价值。

jQuery(function( $ ){
$(".webinar-countdown").countdown("2017/01/20 18:41:20", function(event) {
   $(this).text(event.strftime('%D days %H:%M:%S'));})
   .on('finish.countdown', function(event) {
    $(this).html('The webinar is over!').parent().addClass('disabled');
    $(".webinar-timer").html('The webinar is over!').addClass('disabled');
  });    
});

var webinarDate = {
  month: 0,
  date: 20,
  hour: 18,
  minute: 41
}

function isItWebinarDay() {
  var now = new Date();
  return (now.getMonth() == webinarDate.month && now.getDate() == webinarDate.date && now.getHours() == webinarDate.hour && now.getMinutes() == webinarDate.minute );
}

if(isItWebinarDay()){
  console.log("HURRAY!");
} else {
  console.log("PATIENCE...");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="webinar-timer">
  <span class="webinar-countdown"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
  </body>
</html>

以上是关于html 倒计时器与jQuery.countdown和JS在倒计时结束时改变HTML aftter的主要内容，如果未能解决你的问题，请参考以下文章

iOS中定时器NSTimer的使用/开启与关闭

stm32定时器之简单封装

使用html+css+js实现日历与定时器，看看今天的日期和今天剩余的时间。

JavaScript定时器与执行机制解析

springboot定时器的使用与源码分析

JS 计时器参数剖析与真题