这里为了使效果更好的让用户体现出来，点击时添加的样式为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. SQLServer索引及统计信息

    索引除了提高性能,还能维护数据库. 索引是一种存储结构,主要以B-Tree形式存储信息. B-Tree的定义: 1.每个节点最多只有m个节点(m>=2) 2.除了根节点和叶子节点外的每个节点上最 ...

  2. EF Core Fluent API

    多对多配置 先安装 Install-Package MySql.Data.EntityFrameworkCore 创建3个表 创建类 public class Role { public long I ...

  3. C# 操作windows服务[启动、停止、卸载、安装]

    主要宗旨:不已命令形式操作windows服务 static void Main(string[] args) { var path = @"E:\开发辅助项目\WCF\WCF.Test\WC ...

  4. Zabbix 3.2.6通过SNMP和iDRAC监控DELL服务器

    https://www.cnblogs.com/saneri/p/7772641.html

  5. Jmeter入门（压力测试）

    Jmeter介绍 Jmeter是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常好用. ...

  6. Socket.Io+HttpWebRequest 请求Api

    Socket 接收代码 <html> <head> <title>Socket Client Demo</title> <script src=& ...

  7. KnocoutJs+Mvc+BootStrap 学习笔记（Mvc）

    Mvc   1.Html 增加扩展方法 using System.Web.Mvc; namespace KnockoutBootstrapMvc.Entensions { public static ...

  8. tomcat多端口配置

    <?xml version="1.0" encoding="UTF-8"?> <Server port="8005" sh ...

  9. day 69 orm操作之表关系,多对多,多对一(wusir总结官网的API)

    对象  关系  模型 wusir博客地址orm官网API总结 django官网orm-API orm概要: ORM 跨表查询 class Book(models.Model): title = mod ...

  10. Linux常用命令行补充——持续更新

    1.查看文件夹大小 =>ls -lht 路径 ls -lht /opt/jars 2.查看文件大小 =>du -sh / du -sh /opt/jars/calllog.csv 3.编辑 ...