javascript - 倒计时重定向按钮

Question

我正在编写需要一些 javascript 元素的代码。

例如我有一个这样的按钮:

<button class="butstyle">Click To Redirect</button>

我给这个按钮我自己的 CSS 样式:

.butstyle {
background-color: #e7e7e7;
color: #000000;
}

---

单击它后，我需要做 4 件不同的事情:

1-“点击重定向”按钮中的文本更改为“您将在(倒数计时器)之后重定向”

2- 倒数计时器 20 -> 0，从我提到的按钮开始。

3- 整个按钮样式，点击后变化。例如我想给这种风格:

background-color: #4CAF50;
color: #ffffff;
border:3px solid #000000;
border-radius:3px;

4- 当倒计时为0时，页面重定向到另一个页面。

---

如何在 onclick 函数中完成所有这些操作？

Answer 1

给你的按钮一个“id”(为了更容易实现)并使用下面的代码:

$('#myButton').on('click',function(e){
e.preventDefault();
$('#myButton').removeClass().addClass('butAfter').text('You will be redirected in: 20 seconds');
var counter = 20;
var int = setInterval(function() {
    counter--;
    $('#myButton').text('You will be redirected in: '+counter+' seconds');

    if (counter == 0) {

        clearInterval(int);
        //do your nex action here
    }
}, 1000);

});

还应该在您的 css 中声明另一个类来执行点击按钮后的更改:

.butAfter{
background-color: #4CAF50;
color: #ffffff;
border:3px solid #000000;
border-radius:3px;
}

在这里 fiddle :https://jsfiddle.net/skohg9zL/1/

希望对你有帮助!

编辑:

我对 javascript 代码进行了一些更改以修复您提到的错误:

var counter = 20;
$('.butstyle').on('click',function(e){

e.preventDefault();
e.stopPropagation();

if($(this).hasClass('butstyle')){

$('.butstyle').text('You will be redirected in: 20 seconds');
$(this).removeClass().addClass('butAfter');

var int = setInterval(function() {
    counter--;
    $('.butAfter').text('You will be redirected in: '+counter+' seconds');

    if (counter == 0) {

        clearInterval(int);
        counter = 20;
        $('#myButton').removeClass().addClass('butstyle').text('Click To Redirect');
        //do your next action here:

    }
}, 1000);

}

});

在这里 fiddle :https://jsfiddle.net/skohg9zL/6/