gpt4 book ai didi

javascript - 在最后一张幻灯片上暂停/停止计数器

转载 作者:太空宇宙 更新时间:2023-11-04 11:33:30 26 4
gpt4 key购买 nike

我的网站上有以下代码行:

HTML

<div class="qa">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>Last</div>
</div>

<p class="countdown-timer">00:01:00</p>

JavaScript/jQuery

$(document).ready(function() {
$('.qa').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: false,
arrows: true,
mobileFirst: true,
respondTo: 'window',
useCSS: true,
swipeToSlide: false
});
});

function Stopwatch(config) {
// If no config is passed, create an empty set
config = config || {};
// Set the options (passed or default)
this.element = config.element || {};
this.previousTime = config.previousTime || new Date().getTime();
this.paused = config.paused && true;
this.elapsed = config.elapsed || 0;
this.countingUp = config.countingUp && true;
this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0);
this.updateRate = config.updateRate || 100;
this.onTimeUp = config.onTimeUp || function() {
this.stop();
};
this.onTimeUpdate = config.onTimeUpdate || function() {
console.log(this.elapsed)
};
if (!this.paused) {
this.start();
}
}

Stopwatch.prototype.start = function() {
// Unlock the timer
this.paused = false;
// Update the current time
this.previousTime = new Date().getTime();
// Launch the counter
this.keepCounting();
};

Stopwatch.prototype.keepCounting = function() {
// Lock the timer if paused
if (this.paused) {
return true;
}
// Get the current time
var now = new Date().getTime();
// Calculate the time difference from last check and add/substract it to 'elapsed'
var diff = (now - this.previousTime);
if (!this.countingUp) {
diff = -diff;
}
this.elapsed = this.elapsed + diff;
// Update the time
this.previousTime = now;
// Execute the callback for the update
this.onTimeUpdate();
// If we hit the time limit, stop and execute the callback for time up
if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) {
this.stop();
this.onTimeUp();
return true;
}
// Execute that again in 'updateRate' milliseconds
var that = this;
setTimeout(function() {
that.keepCounting();
}, this.updateRate);
};

Stopwatch.prototype.stop = function() {
// Change the status
this.paused = true;
};

$(document).ready(function() {
/*
* First example, producing 2 identical counters (counting down)
*/
$('.countdown-timer').each(function() {
var stopwatch = new Stopwatch({
'element': $(this), // DOM element
'paused': false, // Status
'elapsed': 1000 * 60 * 1, // Current time in milliseconds
'countingUp': false, // Counting up or down
'timeLimit': 0, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Times Up');

$(".qa").slick('slickGoTo', $('.qa div').length);
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});
/*
* Second example, producing 1 counter (counting up)
*/
var stopwatch = new Stopwatch({
'element': $('.countup-timer'), // DOM element
'paused': false, // Status
'elapsed': 0, // Current time in milliseconds
'countingUp': true, // Counting up or down
'timeLimit': 1000 * 60 * 1, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Countdown finished!');
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});

Example/Demo

当倒数计时器达到 0 时,它将轮播的当前位置转换到最后一张幻灯片并停止计数器运行。

由于我的元素中需要包含上一个下一个 按钮,因此用户可能希望在倒数计时器完成之前手动导航到该位置。

当他们到达最后一张幻灯片时,我如何暂停或停止计数?

最佳答案

您可以监听 slick 的 afterChange 事件,并在处理后根据当前幻灯片的位置与幻灯片总数的比较情况启动或停止秒表。例如:

  $('.qa').on('afterChange', function(slick, currentSlide) {
if(currentSlide.currentSlide < currentSlide.slideCount - 1) {
theStopwatch.start();
} else {
theStopwatch.stop();
}
});

在页面更改时,此代码段将在最后一张幻灯片上暂停秒表并在上一张幻灯片上恢复。

请注意,我将您的秒表称为 theStopwatch。您需要让您的事件处理程序可以访问您的主要秒表。

来源:http://kenwheeler.github.io/slick/ (搜索“afterChange”)

关于javascript - 在最后一张幻灯片上暂停/停止计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31900296/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com