购买数量和支付方式选择
这几天做项目碰到一个支付效果模块,效果图:
上图中,当点击“购买数量”小三角时可以实现框内数字的增减,输入框又是可以输入数字的,同时右侧的“支付金额”要实时显示总数额;支付方式的效果不用多说了。
实现这块的要点:
1、输入框输入数字后,触发增减小按钮时根据已输入的数字来进行增减;
2、“支付金额”处实时显示总金额;
3、输入错误时要根据不同的错误提示相关信息,判断顺序要仔细想想;
4、单选模拟;
5、当选择不同的支付方式时,支付图片会出现边框,这个边框不同于常规的向外扩展的边框,这个边框是向内伸展的;
6、支付方式选择时,该能选的地方要能选,不能选的地方点击不能选。
代码:
html:
1 <div class="mydiv"> 2 购买次数: 3 <!-- 输入框放在一个div里 --> 4 <div class="times-div"> 5 <!-- 两个小图标和两处的提示文字 --> 6 <b class="add" onclick="add()"></b> 7 <b class="cut" onclick="cut()"></b> 8 <span id="blanknote">请输入或选择购买次数!</span> 9 <span id="errornote">输入有误!</span> 10 <input type="text" value="1" id="inputtimes" /> 11 </div> 12 总价: 13 <span id="sumprice">19.9</span> 14 <!-- 支付方式选择 --> 15 <div class="payselect"> 16 <ul class="paylist" id="paylist"> 17 <li> 18 <input type="radio" id="alipay" name="payway" /> 19 <label for="alipay" class="pay-active"> 20 <i></i> 21 <div class="alipaydiv"> 22 <img src="images/alipay.jpg"/> 23 <b></b> 24 </div> 25 </label> 26 <span>推荐</span> 27 </li> 28 <li> 29 <input type="radio" id="weixinpay" name="payway" /> 30 <label for="weixinpay"> 31 <i></i> 32 <div class="weixinpaydiv"> 33 <img src="images/weixinpay.jpg"/> 34 <b></b> 35 </div> 36 </label> 37 <span>更快更安全</span> 38 </li> 39 </ul> 40 </div> 41 </div>
css:
1 .mydiv { 2 margin: 20px 0 0 20px; 3 } 4 /*放置输入框的div*/ 5 .times-div { 6 margin-right: 40px; 7 display: inline-block; 8 border: 1px solid #d0d0d0; 9 } 10 /*实现加减的小图标*/ 11 .times-div > b { 12 position: absolute; 13 margin-left: 54px; 14 display: block; 15 width: 8px; 16 height: 6px; 17 } 18 .add { 19 margin-top: 6px; 20 background: url("../images/select-icon.png") no-repeat 0 0; 21 } 22 .cut { 23 margin-top: 16px; 24 background: url("../images/select-icon.png") no-repeat 0 -8px; 25 } 26 /*输入错误提示文字*/ 27 .times-div > span { 28 display: none; 29 position: absolute; 30 margin-top: 34px; 31 color: #f00; 32 font-size: 12px; 33 } 34 /*输入框*/ 35 .times-div > input { 36 padding: 0 20px 0 15px; 37 width: 34px; 38 height: 28px; 39 line-height: 28px; 40 outline: none; 41 border: none; 42 } 43 /*总价*/ 44 #sumprice { 45 color: #f00; 46 font-size: 32px; 47 font-weight: bold; 48 } 49 50 /*支付宝和微信选择*/ 51 .paylist > li { 52 overflow: hidden; 53 line-height: 48px; 54 margin-bottom: 10px; 55 } 56 .paylist > li > input { 57 display: none; 58 } 59 .payselect { 60 margin-top: 25px; 61 } 62 .payselect label { 63 float: left; 64 display: block; 65 margin-right: 20px; 66 } 67 .paylist i { 68 float: left; 69 display: block; 70 margin: 16px 10px 0 0; 71 width: 16px; 72 height: 16px; 73 background: url("../images/radio-icon.png"); 74 } 75 .paylist div { 76 float: left; 77 display: block; 78 position: relative; 79 width: 135px; 80 height: 50px; 81 } 82 .paylist img { 83 width: 100%; 84 height: 100%; 85 } 86 .paylist span { 87 float: left; 88 } 89 .pay-active i { 90 background: url("../images/radio-icon-selected.png"); 91 } 92 .pay-active b { 93 position: absolute; 94 top: 0; 95 right: 0; 96 bottom: 0; 97 left: 0; 98 border: 2px solid #26aee0; 99 background: url("../images/pay-avtive.png") 117px 32px no-repeat; 100 }
js:
1 // 购买次数、单价、总价 2 var result = 1, 3 pricePer = 9.9, 4 priceSum = 0; 5 // 获取两处提示文字的对象 6 var blankNote = document.getElementById('blanknote'); 7 var errorNote = document.getElementById('errornote'); 8 // 获取输入框对象 9 var inputTimes = document.getElementById('inputtimes'); 10 // 获取显示总额的span对象 11 var sumPrice = document.getElementById('sumprice'); 12 // 正则,数字 13 var numReg = /^[0-9]*$/; 14 15 // add函数 16 var add = function(){ 17 result++; 18 inputTimes.value = result; 19 } 20 21 // cut函数 22 var cut = function(){ 23 // result至少要为1,所以当其至少为2时才能自减 24 if(result>1){ 25 result--; 26 inputTimes.value = result; 27 } 28 } 29 30 // 输入框可以输入,同时价钱要实时显示出来,这个方法封装成函数priceShow() 31 // 这里采取的实时方式是让浏览器每隔特定的时间执行函数priceShow() 32 setInterval('priceShow()',100); 33 var priceShow = function(){ 34 // 如果输入框输入为空,显示空白提示 35 if(inputTimes.value==''){ 36 blankNote.style.display = 'block'; 37 errorNote.style.display = 'none'; 38 } 39 // 如果输入框输入的不是纯数字,显示输入错误信息 40 else if(numReg.test(inputTimes.value)==false){ 41 errorNote.style.display = 'block'; 42 blankNote.style.display = 'none'; 43 } 44 // 剩下的情形就是输入的是纯数字 45 else { 46 errorNote.style.display = 'none'; 47 blankNote.style.display = 'none'; 48 // 由于输入会造成影响,所以要实时获取设置result的值,不然输入数字后再点击b实现add或cut时会有问题 49 result = parseFloat(inputTimes.value); 50 priceSum = pricePer*result; 51 // 精确到两位小数 52 sumPrice.innerHTML = priceSum.toFixed(2); 53 } 54 } 55 56 // 单选 57 myRadio('paylist','pay-active');
myradio.js:
1 // 模拟单选 2 3 // s1为传进来的ul的id名 4 // s2为label选中时的类名 5 var myRadio = function(s1,s2){ 6 var radioItems = document.getElementById(s1).getElementsByTagName('label'); 7 for(var i=0; i<radioItems.length; i++){ 8 // 每个label元素进行事件绑定 9 radioItems[i].onclick = function(){ 10 // 将所有label元素进行类名清空 11 for(var j=0; j<radioItems.length;j++){ 12 radioItems[j].className = ''; 13 } 14 // 当前label元素类名赋值 15 this.className = s2; 16 } 17 } 18 }
posted on 2016-09-20 22:41 junsoo_jun 阅读(509) 评论(0) 编辑 收藏 举报