Javascript 倒计时重定向按钮

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

例如，我有这样一个按钮：

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

---

点击后，我需要做4件不同的事情：

1-按钮“单击重定向”中的文本更改为“您将在（倒计时）后重定向”

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

3-整个按钮样式，单击后更改。例如，我想给出这种风格：

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

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

---

---

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

我希望您能回答这个问题

单击“更改样式”，然后添加脚本

$（'.butstyle'）。单击（函数（）{
var计数=20；
var Interval=setInterval（函数（）{
计数--；
$（'.butstyle'）.removeClass（'butstyle'）.addClass（'AfterChange'）；
document.getElementById（'butstyle'）。innerHTML='Countdown Timer'+count；
如果（计数=0）{
警报（“现在重定向到其他页面”）；
//类似于单击链接的行为
window.location.href=”http://stackoverflow.com";
间隔时间；
}
}, 1000);
});

单击以重定向
为按钮提供一个“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;
}

在这里拉小提琴：

希望对你有帮助

编辑：

我对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);

}

});

这里拉小提琴：
我们到了……只有Javascript


var-button=document.getElementById（'button'）；
addEventListener（'click'，function（）{
button.style.color='#ffffff'；
button.style.backgroundColor='#4CAF50'；
button.style.border='3px solid#000000'；
button.style.borderRadius='3px'；
var i=0；
var tt=setInterval（函数（）{
i=i+1；
var计数器=20-i；
button.innerHTML='您将在：'+计数器之后重定向；
如果（计数器==0）{
净间隔（tt）；
window.location=”http://www.google.com";
}
},1000);
});
.butstyle{
背景色：#e7e7e7；
颜色：#000000；
}

HTML5、CSS3和JavaScript演示
单击以重定向
到目前为止，您自己做了哪些尝试？因为如果您当时只做了一步，那么如果您在谷歌上搜索，就很容易找到指南。谢谢您的asnwer。我怎样才能解决这个问题，当我两次点击按钮时，计时器会变快。@AmirEbrahimi我做了一些更改。请参见以上更新代码。另外，如果我的回答解决了你的问题，请接受它。。。非常感谢。
.butAfter{
background-color: #4CAF50;
color: #ffffff;
border:3px solid #000000;
border-radius:3px;
}

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

}

});