这里为了使效果更好的让用户体现出来，点击时添加的样式为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. Https双向认证Android客户端配置

    Https .cer证书转换为BKS证书 公式https://blog.csdn.net/zww986736788/article/details/81708967 keytool -importce ...

  2. 一脸懵逼学习HBase的搭建（注意HBase的版本）

    1:Hdfs分布式文件系统存的文件,文件存储. 2:Hbase是存储的数据,海量数据存储,作用是缓存的数据,将缓存的数据满后写入到Hdfs中. 3:hbase集群中的角色: ().一个或者多个主节点, ...

  3. python爬虫实例

    import re import requests from bs4 import BeautifulSoup # 主方法 def main(): # 给请求指定一个请求头来模拟chrome浏览器 h ...

  4. Json对象处理.将对象处理成dic数组.

    var parser = new JsonConfigurationFileParser();var dict = parser.Parse("json"); using Newt ...

  5. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  6. java的局部变量和成员变量以及区别

    一.局部变量 存在某个方法中的变量就叫局部变量,局部变量一旦声明就必须赋值 否则不能使用 代码如下: class Person { String name; char sex; int age; pu ...

  7. go-关于指针和地址

    经常会见到: p . *p , &p 三个符号  p是一个指针变量的名字,表示此指针变量指向的内存地址,如果使用%p来输出的话,它将是一个16进制数. 而*p表示此指针指向的内存地址中存放的内 ...

  8. Android ADB命令 adb devices 出现error：protocol fault (no status)

    问题背景:安装apk是报error:protocol fault<no status>或error:device not found手机驱动有问题 出现的问题如下:adb devices ...

  9. appium---第四个脚本，进入app，有权限弹窗的方法

    1.以淘宝为例:进入首页,会弹出好几个权限弹窗 无法使用id定位 用xpath定位

  10. Hdu-2016解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2016 题目解析:输入n个数据,找出n个数据中最小的数据,将它与第一个数据进行交换.(这里可得看清题意, ...