<button id="myButton">Click Me!</button>
$(document).ready(function() {
$('#myButton').click(function() {
var countdown = 120; // 2 minutes in seconds
// Disable the button
$(this).prop('disabled', true);
// Update the button text with initial countdown value
$(this).text(formatTime(countdown));
// Start the countdown
var timer = setInterval(function() {
countdown--;
// Update the button text with the remaining countdown value
$('#myButton').text(formatTime(countdown));
// Check if the countdown has reached zero
if (countdown <= 0) {
// Enable the button
$('#myButton').prop('disabled', false);
clearInterval(timer);
}
}, 1000); // Run the countdown every second
});
// Function to format time in mm:ss format
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
return pad(minutes) + ':' + pad(remainingSeconds);
}
// Function to pad single digits with leading zero
function pad(number) {
return (number < 10 ? '0' : '') + number;
}
});
prop()
method. Then, we initialize a countdown variable to 120 (2 minutes in seconds).text()
method. We start an interval timer which runs every second and updates the countdown value and the button text accordingly. When the countdown reaches zero, we enable the button again using the prop()
method and clear the interval timer using clearInterval()
.formatTime()
function is used to convert the remaining seconds into a formatted mm:ss time format, and the pad()
function is used to add a leading zero to single-digit numbers.Please add minutes to the countdown if its 1 minute above and seconds when 1 minute below. Example: 01:59 minutes, 00:59 secondsYou can achieve this functionality using jQuery. Here's an example of how you can create a button that gets disabled on click and has a 2-minute countdown, after which it gets enabled again:
HTML:
HTML:<button id="myButton">Click Me!</button>
JavaScript (jQuery):
JavaScript:$(document).ready(function() { $('#myButton').click(function() { var countdown = 120; // 2 minutes in seconds // Disable the button $(this).prop('disabled', true); // Update the button text with initial countdown value $(this).text(formatTime(countdown)); // Start the countdown var timer = setInterval(function() { countdown--; // Update the button text with the remaining countdown value $('#myButton').text(formatTime(countdown)); // Check if the countdown has reached zero if (countdown <= 0) { // Enable the button $('#myButton').prop('disabled', false); clearInterval(timer); } }, 1000); // Run the countdown every second }); // Function to format time in mm:ss format function formatTime(seconds) { var minutes = Math.floor(seconds / 60); var remainingSeconds = seconds % 60; return pad(minutes) + ':' + pad(remainingSeconds); } // Function to pad single digits with leading zero function pad(number) { return (number < 10 ? '0' : '') + number; } });
In this code, we bind a click event handler to the button with the ID "myButton". When the button is clicked, it gets disabled using theprop()
method. Then, we initialize a countdown variable to 120 (2 minutes in seconds).
Inside the click event handler, we update the text of the button with the initial countdown value using thetext()
method. We start an interval timer which runs every second and updates the countdown value and the button text accordingly. When the countdown reaches zero, we enable the button again using theprop()
method and clear the interval timer usingclearInterval()
.
TheformatTime()
function is used to convert the remaining seconds into a formatted mm:ss time format, and thepad()
function is used to add a leading zero to single-digit numbers.
I hope this helps you achieve the desired functionality! Let me know if you have any further questions.
Apologies for the confusion earlier. Here's an updated code that adds "minutes" to the countdown when it's 1 minute or more and "seconds" when it's less than 1 minute:Please add minutes to the countdown if its 1 minute above and seconds when 1 minute below. Example: 01:59 minutes, 00:59 seconds
<button id="myButton">Click Me!</button>
$(document).ready(function() {
$('#myButton').click(function() {
var countdown = 120; // 2 minutes in seconds
// Disable the button
$(this).prop('disabled', true);
// Update the button text with initial countdown value
$(this).text(formatTime(countdown));
// Start the countdown
var timer = setInterval(function() {
countdown--;
// Update the button text with the remaining countdown value
$('#myButton').text(formatTime(countdown));
// Check if the countdown has reached zero
if (countdown <= 0) {
// Enable the button
$('#myButton').prop('disabled', false);
clearInterval(timer);
}
}, 1000); // Run the countdown every second
});
// Function to format time in mm:ss format
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
// Add "minutes" if it's 1 minute or more
var minutesText = minutes > 0 ? minutes + ' minute' + (minutes > 1 ? 's' : '') : '';
// Add "seconds" if it's less than 1 minute
var secondsText = remainingSeconds < 60 ? remainingSeconds + ' second' + (remainingSeconds !== 1 ? 's' : '') : '';
// Construct the final formatted time
var formattedTime = '';
if (minutesText !== '' && secondsText !== '') {
formattedTime = pad(minutes) + ':' + pad(remainingSeconds) + ' (' + minutesText + ', ' + secondsText + ')';
} else if (minutesText !== '') {
formattedTime = pad(minutes) + ':' + pad(remainingSeconds) + ' (' + minutesText + ')';
} else {
formattedTime = pad(minutes) + ':' + pad(remainingSeconds) + ' (' + secondsText + ')';
}
return formattedTime;
}
// Function to pad single digits with leading zero
function pad(number) {
return (number < 10 ? '0' : '') + number;
}
});