点击时出现某个样式，1s后移除该样式的案例效果
这里为了使效果更好的让用户体现出来，点击时添加的样式为background:yellow;1后移除该样式：
案例demo为：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
<link rel="stylesheet" href="css/reset.css">
<style>
.fl{
float:left;
}
.fr{
float:right;
}
.container{
width: 100%;
background-color: #eeeeee;
border-radius: 0.1rem;
margin-top: 0.24rem;
margin-bottom:0.36rem;
padding-bottom: 0.26rem;
}
.con-top{
background-color: #000000;
height: 0.56rem;
border-radius: 0.1rem 0.1rem 0rem 0rem;
text-align: center;
line-height: 0.56rem;
color:#f7be7c;
letter-spacing: 0.08rem;
}
.con-top p{
font-size: 0.25rem;
text-shadow: 1px 1px 0 #d0251e;
}
.busy{
width: 100%;
height: 0.75rem;
background-color: #d0251e;
box-sizing: border-box;
padding: 0rem 0.25rem;
color: #ffffff;
letter-spacing: 0.01rem;
}
.clears:after{
content: "";
display: block;
clear: both;
}
.busy > p{
font-size:0.18rem;
line-height: 0.75rem;
}
.busy > ul{
padding-top: 0.11rem;
}
.busy > ul img{
width: 0.57rem;
}
.busy > ul>li:nth-child(1){
font-size:0.15rem;
margin-top: 0.19rem;
margin-left: 0.13rem;
letter-spacing: 0.01rem;
}
.con-pay{
padding: 0.28rem 0rem 0rem 0.12rem;
}
.con-pay >p{
font-size: 0.18rem;
color: #333333;
margin-bottom:0.45rem;
font-weight: bold;
letter-spacing: 0.01rem;
}
.con-pay > div{
width: 80%;
margin:0 auto;
padding-bottom: 0.08rem;
border-bottom: 1px solid #999999;
}
.con-pay-1 span{
font-size: 0.24rem;
}
.con-pay-1 input{
border: none;
background-color: #eeeeee;
font-size: 0.15rem;
}
.con-pay-1 input::-webkit-outer-spin-button,
.con-pay-1 input::-webkit-inner-spin-button{
-webkit-appearance:none !important;
}
.con-pay-1 input{
-moz-appearance:textfield;
}
#pay-money{
border: none;
font-size: 0.15rem;
padding-left: 0.15rem;
}
#btn-pay{
width: 80%;
height: 0.44rem;
margin:0 auto;
background-color: blue;
text-align: center;
line-height: 0.44rem;
font-size: 0.18rem;
color: #ffffff;
border-radius: 0.25rem;
margin-top: 0.73rem;
cursor: pointer;
letter-spacing: 0.01rem;
}
.red{
background:yellow!important;
}
</style>
</head>
<body>
<div class="container ">
<div class="con-top">
<p>点金服务窗</p>
</div>
<div class="busy clears">
<p class="fl">付款给商家</p>
<ul class="fr clears busy-tx">
<li class="fr"></li>
<li class="fr"><img src="" alt=""></li>
<li class="fr"><img src="images/x_tx.png" alt="商家头像"></li>
</ul>
</div>
<div class="con-pay">
<p>付款金额</p>
<div class="con-pay-1">
<span>￥</span>
<input id="pay-money" type="number" value="" placeholder="请输入付款金额" autocomplete="off">
</div>
</div>
<div id="btn-pay" >立即支付</div>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 * 2 + 'px';//获取手机屏幕的宽度
function busyiesInfo(){
$.ajax({
url:'demo.json',
type: 'post',
})
.done(function(data) {
// console.log("success");
$('.gcddfadf-busy-tx img').attr('src', 'images/x_tx.png');
$(".gcddfadf-busy-tx li:nth-child(1)").text('啦啦啦');
})
.fail(function() {
console.log("error");
});
}
// 背景色800ms后回到原样式
function bgShow(){
var payBtn = $('#gcddfadf-btn-pay');
payBtn.addClass('red');
setTimeout(function(){
payBtn.removeClass('red');
}, 2000);
}
// 执行事件
busyiesInfo();
// 支付事件
$('#gcddfadf-btn-pay').click(function() {
bgShow();
var payMoney = $('#gcddfadf-pay-money').val();
if (payMoney == "") {
console.log("付款金额不能为空");
return;
}
$.ajax({
url: 'demo.json',
type: 'post',
dataType: 'json',
data: {param1: 'payMoney'},
})
.done(function(data) {
console.log(data);
// 连接成功执行的事件
console.log("success");
})
.fail(function() {
console.log("error");
})
});
});
</script>
</html>
运行结果：
点击前：
点击后，1s后变为蓝色：
思路：
1.定义bgshow()函数，在函数中，先执行要的类名，通过setTimeOut 1s后移除该类名
2.在点击事件中调用bgshow();
