Не могу разобраться, как можно сделать так, чтобы таймер запускался по нажатию на кнопку, а не при загрузке страницы? Заранее спасибо.
;
(function($, window, document, undefined) {
var pluginName = "countdown360",
defaults = {
radius: 15.5, // radius of arc
strokeStyle: "#0081d7", // the color of the stroke
strokeWidth: 5, // the stroke width, dynamically calulated if omitted in options
fillStyle: "#004388", // the fill color
fontColor: "#477050", // the font color
fontFamily: "sans-serif", // the font family
fontSize: 15, // the font size, dynamically calulated if omitted in options
fontWeight: 200, // the font weight
autostart: false, // start the countdown automatically
seconds: 10, // the number of seconds to count down
label: ["second", "seconds"], // the label to use or false if none
startOverAfterAdding: true, // Start the timer over after time is added with addSeconds
smooth: false, // should the timer be smooth or stepping
onComplete: function() {}
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
if (!this.settings.fontSize) {
this.settings.fontSize = this.settings.radius / 1.2;
}
if (!this.settings.strokeWidth) {
this.settings.strokeWidth = this.settings.radius / 4;
}
this._defaults = defaults;
this._name = pluginName;
this._init();
}
Plugin.prototype = {
getTimeRemaining: function() {
var timeRemaining = this._secondsLeft(this.getElapsedTime());
return timeRemaining;
},
getElapsedTime: function() {
return Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
},
extendTimer: function(value) {
var seconds = parseInt(value),
secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) {
this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value));
}
},
addSeconds: function(value) {
var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
if (this.settings.startOverAfterAdding) {
this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value);
this.start();
} else {
this.settings.seconds += parseInt(value);
}
},
start: function() {
this.startedAt = new Date();
this._drawCountdownShape(Math.PI * 3.5, true);
this._drawCountdownLabel(0);
var timerInterval = 1000;
if (this.settings.smooth) {
timerInterval = 16;
}
this.interval = setInterval(jQuery.proxy(this._draw, this), timerInterval);
},
stop: function(cb) {
clearInterval(this.interval);
if (cb) {
cb();
}
},
_init: function() {
this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
this.settings.height = this.settings.width;
this.settings.arcX = this.settings.radius + this.settings.strokeWidth;
this.settings.arcY = this.settings.arcX;
this._initPen(this._getCanvas());
if (this.settings.autostart) {
this.start();
}
},
_getCanvas: function() {
var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" +
this.settings.width + "\" height=\"" +
this.settings.height + "\">" +
"<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>");
$(this.element).prepend($canvas[0]);
return $canvas[0];
},
_initPen: function(canvas) {
this.pen = canvas.getContext("2d");
this.pen.lineWidth = this.settings.strokeWidth;
this.pen.strokeStyle = this.settings.strokeStyle;
this.pen.fillStyle = this.settings.fillStyle;
this.pen.textAlign = "center";
this.pen.textBaseline = "middle";
this.ariaText = $(canvas).children("#countdown-text");
this._clearRect();
},
_clearRect: function() {
this.pen.clearRect(0, 0, this.settings.width, this.settings.height);
},
_secondsLeft: function(secondsElapsed) {
return this.settings.seconds - secondsElapsed;
},
_drawCountdownLabel: function(secondsElapsed) {
this.ariaText.text(secondsLeft);
this.pen.font = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily;
var secondsLeft = this._secondsLeft(secondsElapsed),
label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1],
drawLabel = this.settings.label && this.settings.label.length === 2,
x = this.settings.width / 2;
if (drawLabel) {
y = this.settings.height / 2 - (this.settings.fontSize / 6.2);
} else {
y = this.settings.height / 2;
}
this.pen.fillStyle = this.settings.fillStyle;
this.pen.fillText(secondsLeft + 1, x, y);
this.pen.fillStyle = this.settings.fontColor;
this.pen.fillText(secondsLeft, x, y);
if (drawLabel) {
this.pen.font = "normal small-caps " + (this.settings.fontSize / 3) + "px " + this.settings.fontFamily;
this.pen.fillText(label, this.settings.width / 2, this.settings.height / 2 + (this.settings.fontSize / 0.0));
}
},
_drawCountdownShape: function(endAngle, drawStroke) {
this.pen.fillStyle = this.settings.fillStyle;
this.pen.beginPath();
this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI * 1.5, endAngle, false);
this.pen.fill();
if (drawStroke) {
this.pen.stroke();
}
},
_draw: function() {
var millisElapsed, secondsElapsed;
millisElapsed = new Date().getTime() - this.startedAt.getTime();
secondsElapsed = Math.floor((millisElapsed) / 1000);
endAngle = (Math.PI * 3.5) - (((Math.PI * 2) / (this.settings.seconds * 1000)) * millisElapsed);
this._clearRect();
this._drawCountdownShape(Math.PI * 3.5, false);
if (secondsElapsed < this.settings.seconds) {
this._drawCountdownShape(endAngle, true);
this._drawCountdownLabel(secondsElapsed);
} else {
this._drawCountdownLabel(this.settings.seconds);
this.stop();
this.settings.onComplete();
}
}
};
$.fn[pluginName] = function(options) {
var plugin;
this.each(function() {
plugin = $.data(this, "plugin_" + pluginName);
if (!plugin) {
plugin = new Plugin(this, options);
$.data(this, "plugin_" + pluginName, plugin);
}
});
return plugin;
};
})(jQuery, window, document);
var cdLength = $('.countdown').length; // кол-во таймеров
var cdCount = 1; // счетчик таймеров
var cdOptions = { // настройки таймеров
radius: 20,
seconds: 5,
fontColor: '#ffffff',
autostart: true,
onComplete: function() {
console.log(cdCount + ' done');
cdCount = cdCount + 1; // прибавляем к счетчику 1, чтобы получить следующий номер таймера
if (cdCount <= cdLength) { // если номер таймера <= общему кол-ву таймеров
$('#countdown' + cdCount).countdown360(cdOptions); // запускаем следующий таймер
}
}
};
$('#countdown' + cdCount).countdown360(cdOptions); // запуск первого таймера
<style>
.w3-button {width:160px;}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<p><button class="w3-button w3-blue">START</button></p>
What can you tell me about yourself?
<div id="countdown1" class="countdown"></div>
Can you list your strengths?
<div id="countdown2" class="countdown"></div>
What weaknesses do you have?
<div id="countdown3" class="countdown"></div>
Where do you see yourself five years from now?
<div id="countdown4" class="countdown"></div>
Why do you want to work here?
<div id="countdown5" class="countdown"></div>
В настройках таймеров пропишите autostart:false
и по клику активируйте первый таймер методом .start()
:
;
(function($, window, document, undefined) {
var pluginName = "countdown360",
defaults = {
radius: 15.5, // radius of arc
strokeStyle: "#0081d7", // the color of the stroke
strokeWidth: 5, // the stroke width, dynamically calulated if omitted in options
fillStyle: "#004388", // the fill color
fontColor: "#477050", // the font color
fontFamily: "sans-serif", // the font family
fontSize: 15, // the font size, dynamically calulated if omitted in options
fontWeight: 200, // the font weight
autostart: false, // start the countdown automatically
seconds: 10, // the number of seconds to count down
label: ["second", "seconds"], // the label to use or false if none
startOverAfterAdding: true, // Start the timer over after time is added with addSeconds
smooth: false, // should the timer be smooth or stepping
onComplete: function() {}
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
if (!this.settings.fontSize) {
this.settings.fontSize = this.settings.radius / 1.2;
}
if (!this.settings.strokeWidth) {
this.settings.strokeWidth = this.settings.radius / 4;
}
this._defaults = defaults;
this._name = pluginName;
this._init();
}
Plugin.prototype = {
getTimeRemaining: function() {
var timeRemaining = this._secondsLeft(this.getElapsedTime());
return timeRemaining;
},
getElapsedTime: function() {
return Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
},
extendTimer: function(value) {
var seconds = parseInt(value),
secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) {
this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value));
}
},
addSeconds: function(value) {
var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
if (this.settings.startOverAfterAdding) {
this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value);
this.start();
} else {
this.settings.seconds += parseInt(value);
}
},
start: function() {
this.startedAt = new Date();
this._drawCountdownShape(Math.PI * 3.5, true);
this._drawCountdownLabel(0);
var timerInterval = 1000;
if (this.settings.smooth) {
timerInterval = 16;
}
this.interval = setInterval(jQuery.proxy(this._draw, this), timerInterval);
},
stop: function(cb) {
clearInterval(this.interval);
if (cb) {
cb();
}
},
_init: function() {
this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
this.settings.height = this.settings.width;
this.settings.arcX = this.settings.radius + this.settings.strokeWidth;
this.settings.arcY = this.settings.arcX;
this._initPen(this._getCanvas());
if (this.settings.autostart) {
this.start();
}
},
_getCanvas: function() {
var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" +
this.settings.width + "\" height=\"" +
this.settings.height + "\">" +
"<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>");
$(this.element).prepend($canvas[0]);
return $canvas[0];
},
_initPen: function(canvas) {
this.pen = canvas.getContext("2d");
this.pen.lineWidth = this.settings.strokeWidth;
this.pen.strokeStyle = this.settings.strokeStyle;
this.pen.fillStyle = this.settings.fillStyle;
this.pen.textAlign = "center";
this.pen.textBaseline = "middle";
this.ariaText = $(canvas).children("#countdown-text");
this._clearRect();
},
_clearRect: function() {
this.pen.clearRect(0, 0, this.settings.width, this.settings.height);
},
_secondsLeft: function(secondsElapsed) {
return this.settings.seconds - secondsElapsed;
},
_drawCountdownLabel: function(secondsElapsed) {
this.ariaText.text(secondsLeft);
this.pen.font = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily;
var secondsLeft = this._secondsLeft(secondsElapsed),
label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1],
drawLabel = this.settings.label && this.settings.label.length === 2,
x = this.settings.width / 2;
if (drawLabel) {
y = this.settings.height / 2 - (this.settings.fontSize / 6.2);
} else {
y = this.settings.height / 2;
}
this.pen.fillStyle = this.settings.fillStyle;
this.pen.fillText(secondsLeft + 1, x, y);
this.pen.fillStyle = this.settings.fontColor;
this.pen.fillText(secondsLeft, x, y);
if (drawLabel) {
this.pen.font = "normal small-caps " + (this.settings.fontSize / 3) + "px " + this.settings.fontFamily;
this.pen.fillText(label, this.settings.width / 2, this.settings.height / 2 + (this.settings.fontSize / 0.0));
}
},
_drawCountdownShape: function(endAngle, drawStroke) {
this.pen.fillStyle = this.settings.fillStyle;
this.pen.beginPath();
this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI * 1.5, endAngle, false);
this.pen.fill();
if (drawStroke) {
this.pen.stroke();
}
},
_draw: function() {
var millisElapsed, secondsElapsed;
millisElapsed = new Date().getTime() - this.startedAt.getTime();
secondsElapsed = Math.floor((millisElapsed) / 1000);
endAngle = (Math.PI * 3.5) - (((Math.PI * 2) / (this.settings.seconds * 1000)) * millisElapsed);
this._clearRect();
this._drawCountdownShape(Math.PI * 3.5, false);
if (secondsElapsed < this.settings.seconds) {
this._drawCountdownShape(endAngle, true);
this._drawCountdownLabel(secondsElapsed);
} else {
this._drawCountdownLabel(this.settings.seconds);
this.stop();
this.settings.onComplete();
}
}
};
$.fn[pluginName] = function(options) {
var plugin;
this.each(function() {
plugin = $.data(this, "plugin_" + pluginName);
if (!plugin) {
plugin = new Plugin(this, options);
$.data(this, "plugin_" + pluginName, plugin);
}
});
return plugin;
};
})(jQuery, window, document);
var cdLength = $('.countdown').length; // кол-во таймеров
var cdCount = 1; // счетчик таймеров
let cdOptions = { // настройки таймеров
radius: 20,
seconds: 5,
fontColor: '#ffffff',
autostart: false,
onComplete: function() {
console.log(cdCount + ' done');
cdCount = cdCount + 1; // прибавляем к счетчику 1, чтобы получить следующий номер таймера
if (cdCount <= cdLength) { // если номер таймера <= общему кол-ву таймеров
$('#countdown' + cdCount).countdown360(cdOptions).start(); // запускаем следующий таймер
}
}
};
$('.w3-button').on('click', function() {
$('#countdown' + cdCount).countdown360(cdOptions).start();
});
<style>.w3-button {
width: 160px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<p><button class="w3-button w3-blue">START</button></p>
What can you tell me about yourself?
<div id="countdown1" class="countdown"></div>
Can you list your strengths?
<div id="countdown2" class="countdown"></div>
What weaknesses do you have?
<div id="countdown3" class="countdown"></div>
Where do you see yourself five years from now?
<div id="countdown4" class="countdown"></div>
Why do you want to work here?
<div id="countdown5" class="countdown"></div>
Это jQuery
$("button").click(function() {
ваш код для работы счётчика
}
,или onclick() на javaScript
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как можно в пагинации сделать актуальную страницу по центру? Допустим, если выбрана 4 страница, то она была бы по центру, а 1-3 рядом слева, а 5-7 рядом...
Есть список товаров на jsp у каждого есть свой idПри при нажатии на кнопку More в сервлет должен приходить запрос с id товара