js设计充值界面样式

$.ajax({

			type:"POST",
			url:"${ctx}/wx/getRechargeList?storeId="+$("#storeId").val(),
			dataType:"json",
			timeout : 5000,
			async : true,//同步
			success:function (data,i){
				if(data.rechargeRankList!=null && data.rechargeRankList.length > 0){
					var rightClass = "pull-right recharge_nub bgfff";
					var leftClass = "pull-left recharge_nub bgfff";
					var html = "";
					for(var i=0; i <data.rechargeRankList.length; i++ ){
						var rankList = data.rechargeRankList[i];
						if(parseInt(i)%2 == 0){							
							html = html + "<li  id=\""+rankList.id+"\" value=\""+rankList.rechareAmount+"\" class=\""+leftClass+"\">"+"￥"+rankList.rechareAmount+"</li>"
						}else{
							html = html + "<li  id=\""+rankList.id+"\" value=\""+rankList.rechareAmount+"\" class=\""+rightClass+"\">"+"￥"+rankList.rechareAmount+"</li>"
						}
						html = html + "<input type='hidden' name='giveAmount' value='"+rankList.fixedAmount+"'>";
						html = html + "<input type='hidden' name='givePoints' value='"+rankList.givePoints+"'>";
					}
					$("#ulRecharge").append(html);
					$("#ulRecharge").find("li").click(function() {
						 $("#rechargeAccount").html($(this).val());//充值的金额
		                 $("#consumeDiscount").html($(this).val());//充值满的额度
						 $("#fixedAmount").html(parseFloat( $(this).next().val() ).toFixed(0));//充值满返还的额度
						 $("#givePoints").html(parseFloat( $(this).next().next().val() ).toFixed(0));//充值满返还的积分
						 /*会员充值样式*/
						 $(this).css({
							"border-color":"#4DAC4A",   
							"color":"#4DAC4A",		
						 }).siblings().css({
							"border-color":"#e7e7e7",
							"color":"#999",		
						 });
						 //实际充值金额  
						 var discount = parseFloat( $("#consumeDiscount").text() );
						 var amount = parseFloat( $("#fixedAmount").text() );
						 $("#amount").html("￥"+((discount - amount).toFixed(2)));
						 
					});
					
				}
			},
			error:function(XMLHttpRequest){
				alert(XMLHttpRequest.status);
			}
		
		});

<form:form id="form1" name="form1" method="post">
		<input type="hidden" id="storeId" value="<%=storeId%>"/>
		<input type="hidden" id="openId" value="<%=openId%>"/>
		<input type="hidden" id="memberId" value="<%=memberId%>"/>
	
		<div class="wrap">
			<div class="pull-left wd100 member_recharge">
		    	<div class="pull-left recharge_money bgfff">充值金额：
		    		<span class="c4DAC4A font22">
		  <span  id="rechargeAccount" class="c4DAC4A font22"  style="width: 200px;" ></span>
		    		</span>
		    	</div>
		        <div class="pull-left member_main">
		        	<div class="pull-left wd100 recharge_new cd69837 bgfff">
		        		充值满
		        		<span type="text" id="consumeDiscount" ></span>
	                	元赠送
						<span type="text" id="fixedAmount"  ></span>
						<span  type="text"  style="display:none" id="givePoints" ></span>
						元
					</div>
		        	<div class="pull-left wd100 recharge_tit c999">选择充值金额：</div>
		            <div class="pull-left wd100 recharge_amount">
		            	<ul class="pull-left wd100 c999" id="ulRecharge">
		                	
		                </ul>
		            </div>
		            <div class="recharge_foot wd100 bgfff">
		            	<div class="pull-left recharge_actual indent12">实际付款：
		            		<span type="text" id="amount"  class="c4DAC4A font22"></span>
		            	</div>
 <input type="button" class="pull-right recharge_button bg4893DF" onclick="rechargeBut();" value="确认充值" />
		            </div>
		        </div>
		    </div>
		</div>
	</form:form>

----------------------------------------------------------------------------------------------------------------

转载 声明：本文为博主原创文章，未经博主允许不得转载。

----------------------------------------------------------------------------------------------------------------

文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！

----------------------------------------------------------------------------------------------------------------

  来都来了，那就点个赞吧