Запуск функции JS по нажатию на <button>

319
01 августа 2017, 15:30

Не могу разобраться, как можно сделать так, чтобы таймер запускался по нажатию на кнопку, а не при загрузке страницы? Заранее спасибо.

; 
(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>

Answer 1

В настройках таймеров пропишите 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>

Answer 2

Это jQuery

$("button").click(function() { 
  ваш код для работы счётчика 
}

,или onclick() на javaScript

READ ALSO
В пагинации активная страница по центру

В пагинации активная страница по центру

Как можно в пагинации сделать актуальную страницу по центру? Допустим, если выбрана 4 страница, то она была бы по центру, а 1-3 рядом слева, а 5-7 рядом...

223
Почему не работает input в форме?

Почему не работает input в форме?

Есть список товаров на jsp у каждого есть свой idПри при нажатии на кнопку More в сервлет должен приходить запрос с id товара

296
Стилизация блоков Bootstrap

Стилизация блоков Bootstrap

Доброго времени суток

272