这里为了使效果更好的让用户体现出来，点击时添加的样式为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. C/C++遍历二维数组，列优先(column-major)比行优先(row-major)慢，why？

    C/C++遍历二维数组,列优先(column-major)比行优先(row-major)慢,why? 简单粗暴的答案:存在Cache机制! 稍微啰嗦一点:CPU访问内存(读/写,遍历数组的话主要是读) ...

  2. android 如何调用 隐藏的 API 接口

    怎样查看并且使用 Android 隐藏 API 和内部 APIhttps://www.jianshu.com/p/fbf45770ecc8 android 隐藏API显式调用以及内部资源使用方法htt ...

  3. 一脸懵逼学习Hive（数据仓库基础构架）

    Hive是什么?其体系结构简介*Hive的安装与管理*HiveQL数据类型,表以及表的操作*HiveQL查询数据***Hive的Java客户端** Hive的自定义函数UDF* 1:什么是Hive(一 ...

  4. Django时区的解释

    https://segmentfault.com/q/1010000000405911

  5. iframe获取元素

    原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...

  6. 2018牛客网暑假ACM多校训练赛（第三场）I Expected Size of Random Convex Hull 计算几何,凸包,其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-I.html 题目传送门 - 2018牛客多校赛第三场 I ...

  7. kafka工作流程| 命令行操作

    1.  概述 数据层:结构化数据+非结构化数据+日志信息(大部分为结构化) 传输层:flume(采集日志--->存储性框架(如HDFS.kafka.Hive.Hbase))+sqoop(关系型数 ...

  8. 20165235Linux安装及学习

    (一)安装虚拟机 在安装虚拟机的过程中我遇到了许多问题,首先是因为没有将CPU虚拟化,解决方法是我首先通过打开BIOS界面打开security,virtualization,选择Enable.解决了无 ...

  9. Django之url路由

    Django之url路由 url路由介绍 url路由是关联url及其视图函数关系的过程. 作用就是使views里面处理数据的函数与请求的url建立映射关系 url路由配置 Django的url路由配置 ...

  10. 使用zabbix监控oracle表空间

    0.概述 zabbix是一款极其强大的开源监控工具,下面我分享下zabbix如何监控表空间,跟着这个思路,监控其他项都是类似操作. 前提条件是你已经有了zabbix server和zabbix age ...