购买数量和支付方式选择

这几天做项目碰到一个支付效果模块，效果图：

上图中，当点击“购买数量”小三角时可以实现框内数字的增减，输入框又是可以输入数字的，同时右侧的“支付金额”要实时显示总数额；支付方式的效果不用多说了。

实现这块的要点：

　　　　1、输入框输入数字后，触发增减小按钮时根据已输入的数字来进行增减；

　　　　2、“支付金额”处实时显示总金额；

　　　　3、输入错误时要根据不同的错误提示相关信息，判断顺序要仔细想想；

　　　　4、单选模拟；

　　　　5、当选择不同的支付方式时，支付图片会出现边框，这个边框不同于常规的向外扩展的边框，这个边框是向内伸展的；

　　　　6、支付方式选择时，该能选的地方要能选，不能选的地方点击不能选。

代码：

 html:

　　<div class="mydiv">
        购买次数：
        <!-- 输入框放在一个div里 -->
        <div class="times-div">
            <!-- 两个小图标和两处的提示文字 -->
            <b class="add" onclick="add()"></b>
            <b class="cut" onclick="cut()"></b>
            <span id="blanknote">请输入或选择购买次数！</span>
            <span id="errornote">输入有误！</span>
            <input type="text" value="1" id="inputtimes" />
        </div>
        总价：
        <span id="sumprice">19.9</span>
        <!-- 支付方式选择 -->
        <div class="payselect">
            <ul class="paylist" id="paylist">
                <li>
                    <input type="radio" id="alipay" name="payway" />
                    <label for="alipay" class="pay-active">
                        <i></i>
                        <div class="alipaydiv">
                            <img src="images/alipay.jpg"/>
                            <b></b>
                        </div>
                    </label>
                    <span>推荐</span>
                </li>
                <li>
                    <input type="radio" id="weixinpay" name="payway" />
                    <label for="weixinpay">
                        <i></i>
                        <div class="weixinpaydiv">
                            <img src="images/weixinpay.jpg"/>
                            <b></b>
                        </div>
                    </label>
                    <span>更快更安全</span>
                </li>
            </ul>
        </div>
    </div>

css:

.mydiv {
    margin: 20px 0 0 20px;
}
/*放置输入框的div*/
.times-div {
    margin-right: 40px;
    display: inline-block;
    border: 1px solid #d0d0d0;
}
/*实现加减的小图标*/
.times-div > b {
    position: absolute;
    margin-left: 54px;
    display: block;
    width: 8px;
    height: 6px;
}
.add {
    margin-top: 6px;
    background: url("../images/select-icon.png") no-repeat 0 0;
}
.cut {
    margin-top: 16px;
    background: url("../images/select-icon.png") no-repeat 0 -8px;
}
/*输入错误提示文字*/
.times-div > span {
    display: none;
    position: absolute;
    margin-top: 34px;
    color: #f00;
    font-size: 12px;
}
/*输入框*/
.times-div > input {
    padding: 0 20px 0 15px;
    width: 34px;
    height: 28px;
    line-height: 28px;
    outline: none;
    border: none;
}
/*总价*/
#sumprice {
    color: #f00;
    font-size: 32px;
    font-weight: bold;
}

/*支付宝和微信选择*/
.paylist > li {
    overflow: hidden;
    line-height: 48px;
    margin-bottom: 10px;
}
.paylist > li > input {
    display: none;
}
.payselect {
    margin-top: 25px;
}
.payselect label {
    float: left;
    display: block;
    margin-right: 20px;
}
.paylist i {
    float: left;
    display: block;
    margin: 16px 10px 0 0;
    width: 16px;
    height: 16px;
    background: url("../images/radio-icon.png");
}
.paylist div {
    float: left;
    display: block;
    position: relative;
    width: 135px;
    height: 50px;
}
.paylist img {
    width: 100%;
    height: 100%;
}
.paylist span {
    float: left;
}
.pay-active i {
    background: url("../images/radio-icon-selected.png");
}
.pay-active b {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #26aee0;
    background: url("../images/pay-avtive.png") 117px 32px no-repeat;
}

js:

// 购买次数、单价、总价
var result = 1,
    pricePer = 9.9, 
    priceSum = 0;
// 获取两处提示文字的对象
var blankNote = document.getElementById('blanknote');
var errorNote = document.getElementById('errornote');
// 获取输入框对象
var inputTimes = document.getElementById('inputtimes');
// 获取显示总额的span对象
var sumPrice = document.getElementById('sumprice');
// 正则，数字
var numReg = /^[0-9]*$/;

// add函数
var add = function(){
    result++;
    inputTimes.value = result;
}

// cut函数
var cut = function(){
    // result至少要为1，所以当其至少为2时才能自减
    if(result>1){
        result--;
        inputTimes.value = result;
    }
}

// 输入框可以输入，同时价钱要实时显示出来，这个方法封装成函数priceShow()
// 这里采取的实时方式是让浏览器每隔特定的时间执行函数priceShow()
setInterval('priceShow()',100);
var priceShow = function(){
    // 如果输入框输入为空，显示空白提示
    if(inputTimes.value==''){
        blankNote.style.display = 'block';
        errorNote.style.display = 'none';
    }
    // 如果输入框输入的不是纯数字，显示输入错误信息
    else if(numReg.test(inputTimes.value)==false){
        errorNote.style.display = 'block';
        blankNote.style.display = 'none';
    }
    // 剩下的情形就是输入的是纯数字
    else {
        errorNote.style.display = 'none';
        blankNote.style.display = 'none';
        // 由于输入会造成影响，所以要实时获取设置result的值，不然输入数字后再点击b实现add或cut时会有问题
        result = parseFloat(inputTimes.value);
        priceSum = pricePer*result;
        // 精确到两位小数
        sumPrice.innerHTML = priceSum.toFixed(2);
    }
}

// 单选
myRadio('paylist','pay-active');

myradio.js：

// 模拟单选

// s1为传进来的ul的id名
// s2为label选中时的类名
var myRadio = function(s1,s2){
    var radioItems = document.getElementById(s1).getElementsByTagName('label');
    for(var i=0; i<radioItems.length; i++){
        // 每个label元素进行事件绑定
        radioItems[i].onclick = function(){
            // 将所有label元素进行类名清空
            for(var j=0; j<radioItems.length;j++){
                radioItems[j].className = '';
            }
            // 当前label元素类名赋值
            this.className = s2;
        } 
    }
}