注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery仿手机微信支付输入密码界面效果

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-01-24
jQuery仿手机微信支付输入密码界面效果
jQuery仿手机微信支付输入密码界面效果,与微信支付密码输入简直一模板一样,浮动弹出数字键盘输入密码完成支付。


js代码

	<script type="text/javascript">
	$(function(){
		//出现浮动层
		$(".ljzf_but").click(function(){
			$(".ftc_wzsf").show();
		});
		//关闭浮动
		$(".close").click(function(){
			$(".ftc_wzsf").hide();
			$(".mm_box li").removeClass("mmdd");
			$(".mm_box li").attr("data","");
			i = 0;
		});
			//数字显示隐藏
		$(".xiaq_tb").click(function(){
			$(".numb_box").slideUp(500);
		});
		$(".mm_box").click(function(){
			$(".numb_box").slideDown(500);
		});
			//----
		var i = 0;
		$(".nub_ggg li .zf_num").click(function(){
				
			if(i<6){
				$(".mm_box li").eq(i).addClass("mmdd");
				$(".mm_box li").eq(i).attr("data",$(this).text());
				i++
				if (i==6) {
				  setTimeout(function(){
					var data = "";
						$(".mm_box li").each(function(){
						data += $(this).attr("data");
					});
					alert("支付成功"+data);
				  },100);
				};
			} 
		});
			
		$(".nub_ggg li .zf_del").click(function(){
			if(i>0){
				i--
				$(".mm_box li").eq(i).removeClass("mmdd");
				$(".mm_box li").eq(i).attr("data","");
			}
		});
	
		$(".nub_ggg li .zf_empty").click(function(){
			$(".mm_box li").removeClass("mmdd");
			$(".mm_box li").attr("data","");
			i = 0;
		});
		 
	});
</script>