倒计时重定向按钮

时间:2017-03-01 12:07:11

标签: javascript jquery html css

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

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

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

我给这个按钮我自己的css风格:

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

<小时/> 点击它后我需要做4件不同的事情:

1-按钮中的文字&#34;点击重定向&#34;,更改为&#34;您将重定向后(倒数计时器)&#34;

2- 倒数计时器 20 - &gt; 0,从我提到的按钮开始。

3-整个按钮样式,点击后更改。例如,我想给这种风格:

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

4-倒数计时器为0时,页面重定向到另一页。

<小时/> 如何在onclick函数中完成所有这些操作?

3 个答案:

答案 0 :(得分:1)

我跳了你的答案

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

$('.butstyle').removeClass('butstyle').addClass('AfterChange');

Fiddle Demo

&#13;
&#13;
$('.butstyle').click(function() {
  var count = 20;
 var Interval= setInterval(function() {
    count--;
    $('.butstyle').removeClass('butstyle').addClass('AfterChange');
    document.getElementById('butstyle').innerHTML = 'Countdown Timer ' + count;
    if (count == 0) {
      alert('Now Redirect To other page');
      // similar behavior as clicking on a link
      window.location.href = "http://stackoverflow.com";
     clearInterval(Interval);
    }
  }, 1000);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="butstyle" id="butstyle">Click To Redirect</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

为您的按钮添加“id”(以便于实施)并使用以下代码:

#EnvironmentSelect {
left: 0;
position:absolute;
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-ms-transition: all 10s linear;
-o-transition: all 10s linear;
transition: all 10s linear;
}
#EnvironmentSelect.animateToLeft {
left: 60px;
}

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

$('#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);

});

在这里小提琴:https://jsfiddle.net/skohg9zL/1/

希望能帮到你!

编辑:

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

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

在这里小提琴:https://jsfiddle.net/skohg9zL/6/

答案 2 :(得分:0)

这里我们只是Javascript

&#13;
&#13;
var button=document.getElementById('button');

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(function(){     
   i=i+1;
   var counter=20-i;
   button.innerHTML='You Will Be Redirect After:'+counter;
     if(counter===0){
       clearInterval(tt);
       window.location = "http://www.google.com";
     }
     
   },1000);
   
});
&#13;
.butstyle {
background-color: #e7e7e7;
color: #000000;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

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

<!-- End your code here -->
</body>
</html>
&#13;
&#13;
&#13;