这里为了使效果更好的让用户体现出来，点击时添加的样式为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="data: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();

点击时出现某个样式，1s后移除该样式的案例效果的更多相关文章

  1. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  2. 去除input标签点击时的默认样式

    去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框

  3. HTML实现点击时的阴影(:active)（已解决iOS微信上无法使用）

    一般是用这个委类:active 参考:http://www.w3school.com.cn/cssref/selector_active.asp 但是业界上实现的效果中,今日头条的手机端网页却不是这样 ...

  4. win32 htmlayout点击按钮创建新窗口，以及按钮图片样式

    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...

  5. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  6. css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

  7. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  8. 注意Android里TextView控件的一个小坑，用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  9. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

随机推荐

  1. python---hash查找

    以前只会用,没了解过原理. # coding = utf-8 class HashTable: def __init__(self): # 哈希表的初始大小已经被选择为 11.尽管这是任意的,但是重要 ...

  2. 一键安装基于dns的高可用k8s集群(3节点，etcd https)

    在公司,使用dns切换,可能会比keepalived+haproxy,更精简的易维护. 毕竟,高可用只是偶尔切换,不是时时切换. 且dns解析在自己可控时,更不会影响k8s线上使用了. (部分代码,由 ...

  3. java web获取请求体内容

    Java Web中如何获取请求体内容呢? 我们知道请求方式分为两种:Get,Post. /*** * Compatible with GET and POST * * @param request * ...

  4. 在grails中远程调用action

    在进行类似批处理的程序时,如果在一个action中需要保存很多记录数,这会导致grails中的数据库session超过负荷,从而导致OOM. 因为这个情况的发生是由于在一次请求中,对数据进行的修改都保 ...

  5. python全栈开发day101-认证组件、权限组件、频率组件

    1.Mixins类分析 这两个函数都在GenericAPIView下,这就是为什么必须搭配继承GenericAPIView的原因. 这两个主要是get_object()较为复杂. 2.认证组件源码分析 ...

  6. Centos6.5系统压力测试过程大量TIME_WAIT

    统计tcp状态的命令: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' netstat -n | awk '/ ...

  7. flink的流处理特性

    flink的流处理特性: 支持高吞吐.低延迟.高性能的流处理 支持带有事件时间的窗口(Window)操作 支持有状态计算的Exactly-once语义 支持高度灵活的窗口(Window)操作,支持基于 ...

  8. tomcat 反代配置

    tomcat反代可以基于nginx , http进行反代 反代服务器: 有两个网口  反代服务器一般有两块网卡一块处于外网,一块处于内网用于与后端服务器通信 tomcat 节点处于内网地址 1 tom ...

  9. BZOJ3560 DZY Loves Math V 数论 快速幂

    原文链接http://www.cnblogs.com/zhouzhendong/p/8111725.html UPD(2018-03-26):蒟蒻回来重新学数论了.更新了题解和代码.之前的怼到后面去了 ...

  10. sql查询count 单独字段不同值

    1.单表查询 SELECT COUNT(CASE WHEN (字段=值列1) THEN reportstatus END) AS 已上报,COUNT(CASE WHEN (字段=值列0) THEN 字 ...