0

在页面加载时,我的倒计时时钟再次出现。我希望它在回调结束后不再运行。我意识到我使用的代码在页面加载时再次运行。

我已经尝试了一个returnand ifandelse语句,但我认为我做错了什么。

/*Countdown until Captain Marvel Release */
var next_show = new Date('2019-04-11T12:54:00');
var diff = next_show.getTime() - new Date().getTime();

var showtime = Math.floor(diff/1000);
var clock = $('#clock3').FlipClock({
    clockFace: 'DailyCounter',
    countdown: true,
    callbacks: {
      stop: function () {
        $("#clock3").fadeOut(1000);
        $("#myButton3Show").fadeOut(1000);
        $("#myButton3Hide").fadeIn(1000);
        if(getTime==new Date) { 
          return; //stop the execution of function
      }
      }
    }
});

clock.setTime(showtime);
clock.start();

html

<div class="captainmarvel2" style="width: 30%">
   <img src="Pictures/captainlogo.png">
   <h5>In Theaters 8 March 2019</h5>
   <div id="clock3"></div>
   <a href="https://www.marvel.com/movies/captain-marvel" target="_blank"
    id="myButton3Show">About Movie</a>
   <a href="https://www.myvue.com/film/captain-marvel" target="_blank" id="myButton3Hide"style="display: none">Buy Ticket on Vue</a>
</div>

我想说如果日期不是 2019 年 4 月 24 日 T00.00.00,请运行倒计时,否则隐藏时钟和“关于电影”按钮,并显示“在 Vue 上购买门票”。

这就是我正在尝试做的事情:

var next_show = new Date('2019-04-11T12:54:00');
var diff = next_show.getTime() - new Date().getTime();

var showtime = Math.floor(diff / 1000);
if (next_show.getTime() == new Date().getTime()) {
  $("#clock3").hide();
  $("#myButton3Show").hide();
  $("#myButton3Hide").show();
} else {
  var clock = $('#clock3').FlipClock({
      clockFace: 'DailyCounter',
      countdown: true,
    }
  };

  clock.setTime(showtime);
  clock.start();

这就是我现在正在尝试的!但是,仍然无法正常工作。

您可以在 www.student.city.ac.uk/~aczc972 上查看倒计时

第 1 步:倒计时

第 2 步:倒计时完成 - 计数器和按钮淡出,新按钮淡入

第 3 步:在页面加载时,会发生这种情况!

第 1 步:倒计时 第 2 步:倒计时完成 - 计数器和按钮淡出,新按钮淡出 第 3 步:页面加载时,会发生这种情况!

4

0 回答 0