我正在编写需要一些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函数中完成所有这些操作?
答案 0 :(得分:1)
我跳了你的答案
单击“更改样式”,然后单击“添加脚本”
$('.butstyle').removeClass('butstyle').addClass('AfterChange');
$('.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;
答案 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;
}
答案 2 :(得分:0)
这里我们只是Javascript
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;