这里为了使效果更好的让用户体现出来，点击时添加的样式为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. H5实现轮播

    页面代码: <div id="body_wrapper" class="container"> <article> <sectio ...

  2. Nginx安装配置&反向代理

    使用Nginx作为前端服务能够更快更及时的响应静态页面.js.图片等,当客户端请求访问动态页面时由Nginx的反向代理给Apache处理,Apache处理完再交予Nginx返回给客户端. Nginx更 ...

  3. 新版的K8S中的flannel.yaml文件中要注意的细节

    部署flannel作为k8s中的网络插件,yaml文件都大小同异. 但在要注意以下细节. 以前,只需要前面master判断. 现在也需要有not-ready状态了. tolerations: - ke ...

  4. PyCharm安装使用 激活码

    从pycharm官网 [http://www.jetbrains.com/pycharm/download/#section=windows]下载完整安装包 激活码激活 优点:Window.Mac.U ...

  5. 3步实现ssh面密码登录

    1.上次本机的公钥和私钥 [root@vicweb ~]#ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in ...

  6. 开源工具软件XMusicDownloader——音乐下载神器

    XMusicDownloader,一款 支持从百度.网易.qq和酷狗等音乐网站搜索并下载歌曲的程序. 缘起: 一直用网易音乐听歌,但是诸如李健.周杰伦的不少歌曲,网易都没有版权,要从QQ等音乐去下载, ...

  7. cactiEZ 配置

    CactiEZ 中文版是简单有效的cacti中文解决方案,它基于centos6 整合了cacti的相关软件,重新编译的一个新的操作系统 它基于centos6,启动速度快,支持EXT4文件系统,全中文页 ...

  8. php通过CURL模拟post提交请求

    <?php header("Content-type:text/html;charset=utf-8"); class Test{ public function reque ...

  9. BZOJ4319 cerc2008 Suffix reconstruction 字符串 SA

    原文链接http://www.cnblogs.com/zhouzhendong/p/9016336.html 题目传送门 - BZOJ4319 题意 给出一个$1,2,\cdots,n$的排列,第$i ...

  10. 010 异步处理Rest服务

    一:任务 1.任务 使用Runnable异步处理Rest服务 使用DefaultResult异步处理Rest服务 异步处理的配置 2.原理图说明 二:Callable进行异步处理 1.程序 新建一个a ...