• 纯js房贷计算器开源


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=device-dpi,width=750,user-scalable=no">
        <meta name="format-detection" content="telephone=no,email=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta content="房贷计算器" name="keywords" />
        <meta content="房贷计算器" itemprop="description" name="description" />
        <title>房贷计算器</title>
        <link rel="stylesheet" href="css/common.css">
    </head>
    
    <body>
        <div class="calWrap">
            <div class="cal_top topjianbian">
                <div class="cal_nav displayflex">
                    <div class="cal_changenav outer_bx flexli current" data-name="benxi">等额本息</div>
                    <div class="cal_changenav outer_bj flexli" data-name="benjin">等额本金</div>
                </div>
                <div class="cal_result displayflex">
                    <div class="cal_resultli flexli">
                        <div class="cal_title">参考月供(元)</div>
                        <div class="cal_price cal_price_hook">0.00</div>
                        <div class="cal_hktotal">还款总额(元)
                            <span class="htotalnum">0.00万</span>
                        </div>
                    </div>
                    <div class="cal_resultli flexli">
                        <div class="cal_title cal_dijian"></div>
                        <div class="cal_price cal_dijianprice"></div>
                        <div class="cal_hktotal cal_right">支付利息(元)
                            <span class="htotallixinum">0.00万</span>
                        </div>
                    </div>
                </div>
                <div class="cal_benxiinfo">
                    <a class="cal_bxfont" id="typethml" href="#">等额本息还款详情</a>
                    <div class="cal_bxicon"></div>
                </div>
            </div>
    
            <div class="cal_form">
                <div class="cal_li border_bottom">
                    <div class="cal_leftname">贷款类型</div>
                    <div class="cal_rightselect">
                        <select id="lanChange" class="lanchange daikuanchange">
                            <option value="1" selected="selected">商业贷款</option>
                            <option value="2">公积金贷款</option>
                            <option value="3">组合贷款</option>
                        </select>
                        <div class="rightrow"></div>
                    </div>
                </div>
                <div class="cal_li border_bottom gjj_hook">
                    <div class="cal_leftname dkname" data-zuhe="公积金贷款金额">贷款金额</div>
                    <div class="cal_rightselect">
                        <input type="tel" placeholder="请输入金额" maxlength="7" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"
                            class="lannum gjjf" />
                        <span></span>
                    </div>
                </div>
                <div class="cal_li border_bottom gjj_hook">
                    <div class="cal_leftname">贷款年限</div>
                    <div class="cal_rightselect">
                        <select id="gjjlanyear" class="lanchange yearchange">
                            <option value="20">20年</option>
                        </select>
                        <div class="rightrow"></div>
                    </div>
                </div>
                <div class="cal_li gjj_hook">
                    <div class="cal_leftname">公积金利率</div>
                    <div class="cal_rightselect">
                        <select id="gjjlanlilv" class="lanchange lilvchange">
                            <option value="0.0325">基准利率</option>
                        </select>
                        <div class="rightrow"></div>
                    </div>
                </div>
                <div class="cal_li border_bottom  shangdai_hook sdfund">
                    <div class="cal_leftname dkname" data-zuhe="商业贷款金额">贷款金额</div>
                    <div class="cal_rightselect">
                        <input type="tel" placeholder="请输入金额" maxlength="7" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"
                            class="lannum shangyef" />
                        <span></span>
                    </div>
                </div>
                <div class="cal_li border_bottom shangdai_hook">
                    <div class="cal_leftname">贷款年限</div>
                    <div class="cal_rightselect">
                        <select id="sylanyear" class="lanchange yearchange">
                            <option value="20">20年</option>
                        </select>
                        <div class="rightrow"></div>
                    </div>
                </div>
                <div class="cal_li shangdai_hook">
                    <div class="cal_leftname">商贷利率</div>
                    <div class="cal_rightselect">
                        <select id="shangyelanlilv" class="lanchange lilvchange">
                            <option value="0.049">基准利率</option>
                        </select>
                        <div class="rightrow"></div>
                    </div>
                </div>
    
    
            </div>
    
            <div class="tips">以上为央行公布的贷款基准利率,结果仅供参考</div>
    
        </div>
    
        <script src="js/zepto.min.js"></script>
        <script src="js/config.js"></script>
        <script src="js/calculate.js"></script>
        <script src="js/dom.js"></script>
    </body>
    
    </html>

    css

    body{font-family:PingFangSC-Regular,Microsoft Yahei, Hiragino Sans GB,Arial,Helvetica,"微软雅黑","宋体",sans-serif;background:#F5F5F5;font-size:24px}
    body,div,ul,li,input,button,textarea,p{margin:0;padding:0}
    ul{list-style:none}
    textarea{overflow:auto;resize:none}
    input,textarea,button,select{outline:none;appearance: none;-webkit-appearance: none;}
    input,a,img{border:0;} 
    input,button,a{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
    .displayflex{display: -webkit-box; display: -webkit-flex;display: flex;}
    .flexli{-webkit-box-flex: 1; -moz-box-flex: 1;-webkit-flex: 1;flex: 1;}
    .fl{float:left;}
    .fr{float:right;}
    .clearfix{*zoom:1}
    .clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
    .border_bottom{position: relative;}
    .border_bottom::after{content:"";position: absolute;bottom:-1px;width:718px;left:0;height:2px;background: rgba(245,245,245,1);}
    .split{position: relative;margin-top:14px;}
    .split::before{content:"";position: absolute;top:-14px;width:750px;left:0;height:14px;background:#f5f5f5;left:-32px;}
    .topjianbian{background:#EC4B39;background:-moz-linear-gradient(right,#EC4B39,#FF2C52);background:-webkit-gradient(linear,0 50%,100% 50%,from(#EC4B39),to(#FF2C52));
        background:-webkit-linear-gradient(right,#EC4B39,#FF2C52);background:-o-linear-gradient(right,#EC4B39,#FF2C52);}
    
    .calWrap{width:750px;margin:0 auto;}
    .cal_top{width: 750px;height:392px; position: relative;}
    .cal_nav{width:360px;height:58px;position: relative;top:20px;margin:0 auto;}
    .cal_nav .cal_changenav{width: 50%;font-size: 26px;color:#fff;text-align: center;line-height: 54px;border:2px solid #fff;}
    .cal_nav .cal_changenav[data-name="benjin"]{border-radius: 0 6px 6px 0;}
    .cal_nav .cal_changenav[data-name="benxi"]{border-radius: 6px 0 0 6px;border-right:0;}
    .cal_nav .cal_changenav.current{background: #fff;color:#EA4C40;}
    .cal_result{position: relative;top:49px;padding: 0 33px;height:196px;}
    .cal_result .cal_resultli{width: 50%;}
    .cal_result .cal_resultli .cal_title{font-size:22px;color:#fff;margin-bottom: 5px;height:29px;}
    .cal_result .cal_resultli .cal_price{font-size:60px;color:#fff;width: 100%;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;height:79px;}
    .cal_result .cal_resultli .cal_hktotal{width:100%;border-right:1px solid #fff;margin-top:28px;height:40px;line-height: 40px;color:#fff;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;}
    .cal_result .cal_resultli .cal_hktotal .htotalnum,.cal_result .cal_resultli .cal_hktotal .htotallixinum{font-size:30px;}
    .cal_result .cal_resultli .cal_hktotal.cal_right{border-right: 0;text-indent: 40px;}
    .cal_top .cal_benxiinfo{height:68px;position: absolute;bottom: 0;width:686px;left:0;right:0;margin:auto;border-top:1px solid rgba(255,255,255,1);display: none;}
    .cal_benxiinfo .cal_bxfont{height:68px;line-height: 68px;display: inline-block;color:#fff;font-size: 26px;text-decoration: none;}
    .cal_benxiinfo .cal_bxicon{display: inline-block;width:18px;height:18px;vertical-align: middle;position: relative;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-left:5px;}
    
    
    .cal_form{margin-top:20px;background: #fff;padding:0 32px;}
    .cal_form .cal_li{height:90px;}
    .cal_form .cal_li .cal_leftname{line-height:86px;color:#333;font-size: 30px;float:left;}
    .cal_form .cal_li .cal_rightselect{line-height:86px;color:#666;font-size: 26px;float:right;}
    .cal_form .cal_li .cal_rightselect .lanchange{line-height:84px;color:#666;font-size: 26px;border:0; height:84px;background: transparent;text-align: right;direction: rtl;}
    .cal_form .cal_li .cal_rightselect .lanchange option { direction: rtl;text-align: right;}
    .lanchange,.rightrow,.cal_rightselect input,.cal_rightselect span{display: inline-block;vertical-align: middle;}
    .cal_rightselect input::-webkit-input-placeholder{color:#A8A8A8;}
    .cal_form .cal_li .cal_rightselect .rightrow{width:15px;height:15px;border-top: 2px solid rgba(82,82,82,1);border-right: 2px solid rgba(82,82,82,1);transform: rotate(45deg);-webkit-transform: rotate(45deg);}
    .cal_form .cal_li .cal_rightselect .lannum{width:150px;height:80px;line-height: 80px;border:0;text-align: right;font-size: 26px;color:#666;}
    .calWrap .tips{color:#999;font-size:22px;margin-top:14px;padding-left:31px;}
    .gjj_hook{display: none;}
    .cal_dijian,.cal_dijianprice{text-indent: 40px;}
    
    .infoDialog{position: absolute;top:0;right:0;left:0;bottom: 0;z-index: 500;overflow-y: scroll; background: #fff;}
    .infoinner{width:750px;margin:0 auto;position: relative;}
    .infoinner .infotop{width:750px;height:218px;position: relative;}
    .infoinner .infotop .infototal{position: absolute;width:95%;height:95px;bottom: 15px;margin:0 auto;left:0;right:0;}
    .infoinner .infotop .infototal .infotli{width:25%;text-align: center;color:#fff;}
    .infoinner .infotop .infototal .infotli .name{font-size:22px;}
    .infoinner .infotop .infototal .infotli .price{font-size:30px;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top:10px;}
    .tablenav{border-bottom:2px solid #F5F5F5;background-color: #fff;box-shadow: 0 7px 7px rgba(0,0,0,0.1);}
    .tablenavinner{padding:0 10px;height:70px;}
    .tablenavinner .fixtitle{line-height: 70px;text-align: center;font-size: 26px;color:#333;}
    
    .oneyear .yeartitle{background: #F5F5F5;height:50px;line-height: 50px;font-size: 26px;color:#666;text-indent: 70px;}
    .oneyear .mounths{color:#333;font-size:26px;padding: 0 10px;}
    .oneyear .mounths .mouthli{height: 88px;}
    .oneyear .mounths .mouthli::after{left:22px;}
    .oneyear .mounths .mouthli .mouthtd{display: table;width:25%;height:88px;}
    .oneyear .mounths .mouthli .mouthtd span{display: table-cell;vertical-align: middle;text-align: center;width: 100%;height:100%;word-break: break-all;}
    .topfixedpc {position: fixed;width: 100%;left: 0;top: 0;z-index: 1000;}
    
    
    
    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInRight {
        -webkit-animation: fadeInRight .3s ease;
        animation: fadeInRight .3s ease
    }
    
    
    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    }
    
    @keyframes fadeInLeft {
        0% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    }
    
    .fadeInLeft {
        -webkit-animation: fadeInLeft .3s ease;
        animation: fadeInLeft .3s ease
    }
    View Code

    calculate.js

    var calcute = {
        //商贷-公积金贷款统一函数
        singleDk: function (type, num, year, lilv) {
            var _this = this;
            // type:1等额本息 2等额本金,num 贷款金额 year贷款年限,lilv:贷款基准利率
            if (type == 1) {
                return _this.benxi(type, num, year, lilv)
            } else if (type == 2) {
                return _this.benjin(type, num, year, lilv)
            }
        },
        //组合贷款计算
        zuhe: function (type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv) {
            var _this = this,
                year = sdyear > gjjyear ? sdyear : gjjyear;
            if (type == 1) {
                var sdObj = _this.benxi(type, sdnum, sdyear, sdlilv);
                var gjjObj = _this.benxi(type, gjjnum, gjjyear, gjjlilv);
                if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
                    var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
                        if (index < gjjObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi + gjjObj.mouthdataArray[index].yuelixi,
                                yuebenjin: item.yuebenjin + gjjObj.mouthdataArray[index].yuebenjin,
                                leftFund: item.leftFund + gjjObj.mouthdataArray[index].leftFund
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi,
                                yuebenjin: item.yuebenjin,
                                leftFund: item.leftFund
                            }
                        }
    
                    })
                } else {
                    var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
                        if (index < sdObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi + sdObj.mouthdataArray[index].yuelixi,
                                yuebenjin: item.yuebenjin + sdObj.mouthdataArray[index].yuebenjin,
                                leftFund: item.leftFund + sdObj.mouthdataArray[index].leftFund
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi,
                                yuebenjin: item.yuebenjin,
                                leftFund: item.leftFund
                            }
                        }
                    })
                }
                return {
                    yuegong: sdObj.yuegong + gjjObj.yuegong,
                    totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
                    totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
                    mouthdataArray: mergemouthdataArray,
                    totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
                    year: year
                }
    
            } else if (type == 2) {
                var sdObj = _this.benjin(type, sdnum, sdyear, sdlilv);
                var gjjObj = _this.benjin(type, gjjnum, gjjyear, gjjlilv);
                if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
                    var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
                        if (index < gjjObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi + gjjObj.mouthdataArray[index].yuelixi,
                                yuebenjin: item.yuebenjin + gjjObj.mouthdataArray[index].yuebenjin,
                                leftFund: item.leftFund + gjjObj.mouthdataArray[index].leftFund
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi,
                                yuebenjin: item.yuebenjin,
                                leftFund: item.leftFund
                            }
                        }
    
                    })
                } else {
                    var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
                        if (index < sdObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi + sdObj.mouthdataArray[index].yuelixi,
                                yuebenjin: item.yuebenjin + sdObj.mouthdataArray[index].yuebenjin,
                                leftFund: item.leftFund + sdObj.mouthdataArray[index].leftFund
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: item.yuelixi,
                                yuebenjin: item.yuebenjin,
                                leftFund: item.leftFund
                            }
                        }
                    })
                }
                return {
                    yuegong: sdObj.yuegong + gjjObj.yuegong,
                    totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
                    totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
                    yuegongdijian: sdObj.yuegongdijian + gjjObj.yuegongdijian,
                    totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
                    year: year,
                    mouthdataArray: mergemouthdataArray
                }
            }
    
        },
        //等额本息计算
        benxi: function (type, num, year, lilv) {
            //每月月供额=〔贷款本金×月利率×(1+月利率)^还款月数〕÷〔(1+月利率)^还款月数-1〕
            var mouth = parseInt(year) * 12,
                mouthlilv = parseFloat(lilv) / 12,
                dknum = parseFloat(num) * 10000;
            //每月月供
            var yuegong = (dknum * mouthlilv * Math.pow((1 + mouthlilv), mouth)) / (Math.pow((1 + mouthlilv), mouth) - 1);
            //总利息=还款月数×每月月供额-贷款本金
            var totalLixi = mouth * yuegong - dknum;
            //还款总额 总利息+贷款本金
            var totalPrice = totalLixi + dknum,
                leftFund = totalLixi + dknum;
    
            //循环月份
            var mouthdataArray = [],
                nowmouth = new Date().getMonth(),
                realmonth = 0;
    
            for (var i = 1; i <= mouth; i++) {
                realmonth = nowmouth + i;
                var yearlist = Math.floor(i / 12);
    
                realmonth = realmonth - 12 * yearlist;
    
                if (realmonth > 12) {
                    realmonth = realmonth - 12
                }
                //console.log(realmonth)
                //每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
                var yuelixi = dknum * mouthlilv * (Math.pow((1 + mouthlilv), mouth) - Math.pow((1 + mouthlilv), i - 1)) / (Math.pow((1 + mouthlilv), mouth) - 1);
                //每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
                var yuebenjin = dknum * mouthlilv * Math.pow((1 + mouthlilv), i - 1) / (Math.pow((1 + mouthlilv), mouth) - 1);
                leftFund = leftFund - (yuelixi + yuebenjin);
                if (leftFund < 0) {
                    leftFund = 0
                }
                mouthdataArray[i - 1] = {
                    monthName: realmonth + "月",
                    yuelixi: yuelixi,
                    yuebenjin: yuebenjin,
                    //剩余还款
                    leftFund: leftFund
                }
            }
            return {
                yuegong: yuegong,
                totalLixi: totalLixi,
                totalPrice: totalPrice,
                mouthdataArray: mouthdataArray,
                totalDknum: num,
                year: year
            };
        },
        //等额本金计算
        benjin: function (type, num, year, lilv) {
            var mouth = parseInt(year) * 12,
                mouthlilv = parseFloat(lilv) / 12,
                dknum = parseFloat(num) * 10000,
                yhbenjin = 0; //首月还款已还本金金额是0
            //每月应还本金=贷款本金÷还款月数
            var everymonthyh = dknum / mouth
            //每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
            var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv;
            //每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
            var yuegongdijian = everymonthyh * mouthlilv;
            //总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
            var totalLixi = ((everymonthyh + dknum * mouthlilv) + dknum / mouth * (1 + mouthlilv)) / 2 * mouth - dknum;
            //还款总额 总利息+贷款本金
            var totalPrice = totalLixi + dknum,
                leftFund = totalLixi + dknum;
    
            //循环月份
            var mouthdataArray = [],
                nowmouth = new Date().getMonth(),
                realmonth = 0;
    
            for (var i = 1; i <= mouth; i++) {
                realmonth = nowmouth + i;
                var yearlist = Math.floor(i / 12);
    
                realmonth = realmonth - 12 * yearlist;
    
                if (realmonth > 12) {
                    realmonth = realmonth - 12
                }
                yhbenjin = everymonthyh * (i - 1);
                var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv;
                //每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率
                var yuelixi = (dknum - yhbenjin) * mouthlilv;
                leftFund = leftFund - yuebenjin;
                if (leftFund < 0) {
                    leftFund = 0
                }
                mouthdataArray[i - 1] = {
                    monthName: realmonth + "月",
                    yuelixi: yuelixi,
                    //每月本金
                    yuebenjin: everymonthyh,
                    //剩余还款
                    leftFund: leftFund
                }
            }
            return {
                yuegong: yuegong,
                totalLixi: totalLixi,
                totalPrice: totalPrice,
                yuegongdijian: yuegongdijian,
                mouthdataArray: mouthdataArray,
                totalDknum: num,
                year: year
            }
    
        }
    
    }
    View Code

    config.js

    var config = {
        loanyear: [{
                year: 1,
                select: false
            },
            {
                year: 2,
                select: false
            },
            {
                year: 3,
                select: false
            },
            {
                year: 4,
                select: false
            },
            {
                year: 5,
                select: false
            },
            {
                year: 6,
                select: false
            },
            {
                year: 7,
                select: false
            },
            {
                year: 8,
                select: false
            },
            {
                year: 9,
                select: false
            },
            {
                year: 10,
                select: false
            },
            {
                year: 11,
                select: false
            },
            {
                year: 12,
                select: false
            },
            {
                year: 13,
                select: false
            },
            {
                year: 14,
                select: false
            },
            {
                year: 15,
                select: false
            },
            {
                year: 16,
                select: false
            },
            {
                year: 17,
                select: false
            },
            {
                year: 18,
                select: false
            },
            {
                year: 19,
                select: false
            },
            {
                year: 20,
                select: true
            },
            {
                year: 21,
                select: false
            },
            {
                year: 22,
                select: false
            },
            {
                year: 23,
                select: false
            },
            {
                year: 24,
                select: false
            },
            {
                year: 25,
                select: false
            },
            {
                year: 26,
                select: false
            },
            {
                year: 27,
                select: false
            },
            {
                year: 28,
                select: false
            },
            {
                year: 29,
                select: false
            },
            {
                year: 30,
                select: false
            }
        ],
        shangdaiLilv: [{
                year: 1,
                lilv: "0.0435"
            },
            {
                year: 2,
                lilv: "0.0475"
            },
            {
                year: 6,
                lilv: "0.049"
            }
        ],
        shangdaiSelect: [{
                lilv: 1,
                name: "基准利率"
            },
            {
                lilv: 1.1,
                name: "1.1倍利率"
            },
            {
                lilv: 1.15,
                name: "1.15倍利率"
            },
            {
                lilv: 1.2,
                name: "1.2倍利率"
            },
            {
                lilv: 1.3,
                name: "1.3倍利率"
            },
            {
                lilv: 0.9,
                name: "9折利率"
            },
            {
                lilv: 0.85,
                name: "85折利率"
            },
            {
                lilv: 0.8,
                name: "8折利率"
            },
            {
                lilv: 0.7,
                name: "7折利率"
            }
        ],
        gjjLilv: [{
                year: 1,
                lilv: "0.0275"
            },
            {
                year: 6,
                lilv: "0.0325"
            }
        ],
        gjjSelect: [{
                lilv: 1,
                name: "基准利率"
            },
            {
                lilv: 1.1,
                name: "1.1倍利率"
            },
            {
                lilv: 1.15,
                name: "1.15倍利率"
            },
            {
                lilv: 1.2,
                name: "1.2倍利率"
            },
            {
                lilv: 1.3,
                name: "1.3倍利率"
            },
            {
                lilv: 0.9,
                name: "9折利率"
            },
            {
                lilv: 0.85,
                name: "85折利率"
            },
            {
                lilv: 0.8,
                name: "8折利率"
            },
            {
                lilv: 0.7,
                name: "7折利率"
            }
        ]
    }
    View Code

    dom.js

    var domOperate = {
        offsetTop: $(".infotop").height(),
        fixheight: $(".tablenav").height(),
        init: function () {
            var _this = this;
            _this.yearBind();
            //初始化计算
            var sdYear = $("#sylanyear").val() || "20",
                gjjYear = $("#gjjlanyear").val() || "20";
            _this.lilvCal(sdYear, config.shangdaiLilv, config.shangdaiSelect, "shangyelanlilv");
            _this.lilvCal(gjjYear, config.gjjLilv, config.gjjSelect, "gjjlanlilv");
    
            //商贷年利率变化计算
            $("#sylanyear").change(function () {
                var year = $(this).val();
                _this.lilvCal(year, config.shangdaiLilv, config.shangdaiSelect, "shangyelanlilv");
                var selectvalue = $("#lanChange").val();
                if (selectvalue == "1") {
                    _this.resultSd();
                }
                if (selectvalue == "3") {
                    _this.resuleZh();
                }
            })
            //公积金年利率变化计算
            $("#gjjlanyear").change(function () {
                var year = $(this).val();
                _this.lilvCal(year, config.gjjLilv, config.gjjSelect, "gjjlanlilv");
                var selectvalue = $("#lanChange").val();
                if (selectvalue == "2") {
                    _this.resultGjj();
                }
                if (selectvalue == "3") {
                    _this.resuleZh();
                }
    
            })
    
            //商贷利率切换变化
            $("#shangyelanlilv").change(function () {
                var selectvalue = $("#lanChange").val();
                if (selectvalue == "1") {
                    _this.resultSd();
                }
                if (selectvalue == "3") {
                    _this.resuleZh();
                }
            })
            //公积金利率切换变化
            $("#gjjlanlilv").change(function () {
                var selectvalue = $("#lanChange").val();
                if (selectvalue == "2") {
                    _this.resultGjj();
                }
                if (selectvalue == "3") {
                    _this.resuleZh();
                }
            })
    
    
    
    
            //本息本金按钮点击
            $(".cal_changenav").on("click", function () {
                var name = $(this).data("name");
                $(this).addClass("current").siblings().removeClass("current");
                if (name == "benxi") {
                    //执行本息计算逻辑 本息type 1,本金type 2
                    _this.checkLanType("1")
                    $("#typethml").html("等额本息还款详情");
                    if ($(this).hasClass("inner_bx")) {
                        _this.resultBind("1");
                    }
    
                } else if (name == "benjin") {
                    //执行本金计算逻辑 
                    _this.checkLanType("2")
                    $("#typethml").html("等额本金还款详情");
                    if ($(this).hasClass("inner_bj")) {
                        _this.resultBind("2");
                    }
                }
            })
    
            //贷款类型切换
            $("#lanChange").change(function () {
                var values = $(this).val();
                if (values == "1") {
                    //商业贷款dom操作
                    $(".sdfund").removeClass("split");
                    $(".shangdai_hook").show();
                    $(".gjj_hook").hide();
                    $(".dkname").html("贷款金额");
                    //执行计算逻辑
                    _this.resultSd();
    
                } else if (values == "2") {
                    //公积金贷款dom操作
                    $(".sdfund").removeClass("split");
                    $(".shangdai_hook").hide();
                    $(".gjj_hook").show();
                    $(".dkname").html("贷款金额");
                    //执行计算逻辑
                    _this.resultGjj();
    
                } else if (values == "3") {
                    //组合贷款dom操作
                    $(".sdfund").addClass("split");
                    $(".shangdai_hook").show();
                    $(".gjj_hook").show();
                    $(".dkname").each(function () {
                        $(this).html($(this).data("zuhe"));
                    })
                    //执行计算逻辑
                    _this.resuleZh();
                }
            })
            //历史返回初始化逻辑计算
            if ($("#infoDialog").length <= 0) {
                _this.historyBackinit();
            }
    
            //贷款输入数字监听
            $(".lannum").on("input", function (e) {
                var enterkey = e.target.value,
                    stype = $(".current", ".cal_nav").data("name"),
                    type = "";
                stype == "benxi" ? type = "1" : type = "2";
                if ($(this).hasClass("gjjf")) {
                    // console.log("公积金逻辑")
                    _this.checkLanType(type, "", enterkey);
    
                } else {
                    // console.log("商贷计算逻辑");
                    _this.checkLanType(type, enterkey, "");
                }
                //详情显示
                if ($.trim(enterkey) != "" && !isNaN(enterkey) && enterkey > 0) {
                    $(".cal_benxiinfo").show();
                } else {
                    $(".cal_benxiinfo").hide();
                }
    
            })
    
            //详情滚动导航固定
            $("#infoDialog").scroll(_this.fixTop);
    
            //详情页面数据绑定
            if ($("#infoDialog").length > 0) {
                _this.resultBind();
            }
    
    
    
        },
        fixTop: function () {
            var _this = domOperate;
            var scrollTop = $("#infoDialog").scrollTop();
            if (scrollTop >= _this.offsetTop) {
                if (!$(".tablenav").hasClass("topfixedpc")) {
                    $(".tablenav").addClass("topfixedpc");
                    $(".yearouter").css("padding-top", _this.fixheight + "px")
                }
            } else {
                $(".tablenav").removeClass("topfixedpc");
                $(".yearouter").removeAttr("style");
            }
        },
        resultSd: function () {
            var _this = this;
            var stype = $(".current", ".cal_top").data("name"),
                type = "";
            stype == "benxi" ? type = "1" : type = "2";
            _this.shangdaiData(type);
        },
        resultGjj: function () {
            var _this = this;
            var stype = $(".current", ".cal_top").data("name"),
                type = "";
            stype == "benxi" ? type = "1" : type = "2";
            _this.gjjData(type);
        },
        resuleZh: function () {
            var _this = this;
            var stype = $(".current", ".cal_top").data("name"),
                type = "";
            stype == "benxi" ? type = "1" : type = "2";
            _this.zuheData(type);
        },
        checkLanType: function (type, sdnum, gjjnum) {
            var _this = this;
            var lanType = $("#lanChange").val();
            if (lanType == "1") {
                _this.shangdaiData(type, sdnum);
            } else if (lanType == "2") {
                _this.gjjData(type, gjjnum);
            } else if (lanType == "3") {
                _this.zuheData(type, sdnum, gjjnum);
            }
        },
        shangdaiData: function (type, num) {
            num = num || $(".shangyef").val();
            var _this = this;
            var year = $("#sylanyear").val();
            var lilv = $("#shangyelanlilv").val();
            //结果地址传参数
            _this.navigateUrl(type, "1", num, "", year, "", lilv, "");
            //调用商贷计算公式
            var resobj = calcute.singleDk(type, num, year, lilv);
            // console.log(resobj);
            _this.domOperates(type, resobj);
    
        },
        gjjData: function (type, num) {
            num = num || $(".gjjf").val();
            var _this = this;
            var year = $("#gjjlanyear").val();
            var lilv = $("#gjjlanlilv").val();
            //结果地址传参数
            _this.navigateUrl(type, "2", "", num, "", year, "", lilv);
            //调用公积金计算公式
            var resobj = calcute.singleDk(type, num, year, lilv);
            //console.log(resobj);
            _this.domOperates(type, resobj);
        },
        zuheData: function (type, sdnum, gjjnum) {
            sdnum = sdnum || $(".shangyef").val(), gjjnum = gjjnum || $(".gjjf").val();
            var _this = this;
            var sdyear = $("#sylanyear").val(),
                sdlilv = $("#shangyelanlilv").val();
            var gjjyear = $("#gjjlanyear").val(),
                gjjlilv = $("#gjjlanlilv").val();
            //结果地址传参数
            _this.navigateUrl(type, "3", sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv);
            //调用组合贷款计算公式
            var resobj = calcute.zuhe(type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv);
            //console.log(resobj);
            _this.domOperates(type, resobj);
        },
        yearBind: function () { //年份绑定
            var yearArray = [];
            config.loanyear.forEach(function (item, index) {
                var selectflag = "";
                if (item.select) {
                    selectflag = 'selected="selected"'
                }
                yearArray[index] = '<option value="' + item.year + '" ' + selectflag + '>' + item.year + '年</option>'
            })
            $("#gjjlanyear").html(yearArray.join(""));
            $("#sylanyear").html(yearArray.join(""));
        },
        lilvCal: function (year, lilv, selectcontent, id) {
            var getLilv = "",
                lilvbindArray = [];
            lilv.forEach(function (item, index) {
                if (year >= item.year) {
                    getLilv = item.lilv;
                }
            })
            var callilv = selectcontent.map(function (item, index) {
                return {
                    lilv: (item.lilv * getLilv).toFixed(4),
                    name: item.name
                }
            })
            callilv.forEach(function (item, index) {
                lilvbindArray[index] = '<option value="' + item.lilv + '" >' + item.name + '</option>'
            })
            $("#" + id).html(lilvbindArray.join(""));
    
        },
        formatCurrency: function (num) { //将数值四舍五入(保留2位小数)后格式化成金额形式
            num = num.toString().replace(/$|\,/g, '');
            if (isNaN(num))
                num = "0";
            sign = (num == (num = Math.abs(num)));
            num = Math.floor(num * 100 + 0.50000000001);
            cents = num % 100;
            num = Math.floor(num / 100).toString();
            if (cents < 10)
                cents = "0" + cents;
            for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                num = num.substring(0, num.length - (4 * i + 3)) + ',' +
                num.substring(num.length - (4 * i + 3));
            return (((sign) ? '' : '-') + num + '.' + cents);
        },
        getQueryString: function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        domOperates: function (type, data) {
            var _this = this;
            var yuegong = _this.formatCurrency(data.yuegong);
            var totalPrice = _this.formatCurrency(data.totalPrice / 10000); //万元转换
            var totalLixi = _this.formatCurrency(data.totalLixi / 10000); //万元转换
            var totalDknum = _this.formatCurrency(data.totalDknum);
            var mouthdataArray = data.mouthdataArray;
            $(".cal_price_hook").html(yuegong);
            $(".htotalnum").html(totalPrice + "万");
            $(".htotallixinum").html(totalLixi + "万");
            if (type == "1") { //等额本息dom操作
                $(".cal_dijian").html("");
                $(".cal_dijianprice").html("");
                $(".inner_bx").addClass("current");
                $(".inner_bj").removeClass("current");
            } else if (type == "2") {
                $(".cal_dijian").html("每月递减(元)");
                $(".cal_dijianprice").html(_this.formatCurrency(data.yuegongdijian));
                $(".inner_bx").removeClass("current");
                $(".inner_bj").addClass("current");
            }
            if ($("#infoDialog").length > 0) {
                $("#totalPrice").html(totalPrice);
                $("#totalLixi").html(totalLixi);
                $("#totalDknum").html(totalDknum);
                $("#totalyear").html(data.year);
                //详情页面循环
                var yeartitle = '<div class="yeartitle">第一年</div>',
                    yearHtmlArray = [],
                    yeartitleHtml = "",
                    mouthliArray = [],
                    yearflag = 1;
                mouthdataArray.forEach(function (item, index) {
                    var pushnum = parseInt(item.monthName);
    
                    mouthliArray[index] = '<div class="mouthli displayflex border_bottom">' +
                        '<div class="mouthtd flexli"><span>' + item.monthName + '</span></div>' +
                        '<div class="mouthtd flexli"><span>' + _this.formatCurrency(item.yuebenjin) + '</span></div>' +
                        '<div class="mouthtd flexli"> <span>' + _this.formatCurrency(item.yuelixi) + '</span></div>' +
                        '<div class="mouthtd flexli"><span>' + _this.formatCurrency(item.leftFund) + '</span> </div></div>';
                    if (pushnum == 12) {
                        yeartitleHtml = yeartitle.replace("一", yearflag);
                        yearflag++;
                        yearHtmlArray.push('<div class="oneyear">' + yeartitleHtml + '<div class="mounths">' + mouthliArray.join("") + '</div></div>');
                        mouthliArray = [];
                    }
                })
                yeartitleHtml = yeartitle.replace("一", yearflag);
                $("#yearouter").html(yearHtmlArray.join("") + '<div class="oneyear">' + yeartitleHtml + '<div class="mounths">' + mouthliArray.join("") + '</div></div>');
    
            }
    
        },
        navigateUrl: function (type, loantype, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv) {
            var type = type || "1",
                loantype = loantype || "1",
                sdnum = sdnum || "",
                gjjnum = gjjnum || "",
                sdyear = sdyear || "",
                gjjyear = gjjyear || "",
                sdlilv = sdlilv || "",
                gjjlilv = gjjlilv || "";
            if (loantype == "1") {
                var url = 'result.html?type=' + type + '&sdnum=' + sdnum + '&sdyear=' + sdyear + '&sdlilv=' + sdlilv + '&loantype=1';
            } else if (loantype == "2") {
                var url = 'result.html?type=' + type + '&gjjnum=' + gjjnum + '&gjjyear=' + gjjyear + '&gjjlilv=' + gjjlilv + '&loantype=2';
            } else if (loantype == "3") {
                var url = 'result.html?type=' + type + '&sdnum=' + sdnum + '&gjjnum=' + gjjnum + '&sdyear=' + sdyear + '&gjjyear=' + gjjyear + '&sdlilv=' + sdlilv + '&gjjlilv=' + gjjlilv + '&loantype=3';
            }
            $("#typethml").attr("href", url);
        },
        resultBind: function (type) {
            var _this = this;
            var loantype = _this.getQueryString("loantype");
            if (loantype == "1") {
                var type = type || _this.getQueryString("type"),
                    sdnum = _this.getQueryString("sdnum"),
                    sdyear = _this.getQueryString("sdyear"),
                    sdlilv = _this.getQueryString("sdlilv");
    
                var ressdobj = calcute.singleDk(type, sdnum, sdyear, sdlilv);
                //console.log(resobj);
                _this.domOperates(type, ressdobj);
    
            } else if (loantype == "2") {
                var type = type || _this.getQueryString("type"),
                    gjjnum = _this.getQueryString("gjjnum"),
                    gjjyear = _this.getQueryString("gjjyear"),
                    gjjlilv = _this.getQueryString("gjjlilv");
    
                var resgjjobj = calcute.singleDk(type, gjjnum, gjjyear, gjjlilv);
                //console.log(resobj);
                _this.domOperates(type, resgjjobj);
            } else if (loantype == "3") {
                var type = type || _this.getQueryString("type"),
                    gjjnum = _this.getQueryString("gjjnum"),
                    gjjyear = _this.getQueryString("gjjyear"),
                    gjjlilv = _this.getQueryString("gjjlilv"),
                    sdnum = _this.getQueryString("sdnum"),
                    sdyear = _this.getQueryString("sdyear"),
                    sdlilv = _this.getQueryString("sdlilv");
                var reszhobj = calcute.zuhe(type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv);
                //console.log(resobj);
                _this.domOperates(type, reszhobj);
            }
        },
        historyBackinit: function () { //历史返回初始化逻辑计算
            var _this = this;
            if ($("#lanChange").val() != "1") {
                $("#lanChange").trigger("change")
            }
            if ($(".shangyef").val() != "") {
                _this.inputChange($(".shangyef").val());
            }
            if ($(".gjjf").val() != "") {
                _this.inputChange($(".gjjf").val());
            }
        },
        inputChange: function (values) {
            var _this = this,
                enterkey = values,
                stype = $(".current", ".cal_nav").data("name"),
                type = "";
            stype == "benxi" ? type = "1" : type = "2";
            if ($(this).hasClass("gjjf")) {
                // console.log("公积金逻辑")
                _this.checkLanType(type, "", enterkey);
    
            } else {
                // console.log("商贷计算逻辑");
                _this.checkLanType(type, enterkey, "");
            }
            //详情显示
            if ($.trim(enterkey) != "" && !isNaN(enterkey) && enterkey > 0) {
                $(".cal_benxiinfo").show();
            } else {
                $(".cal_benxiinfo").hide();
            }
        }
    
    
    
    }
    domOperate.init();
    View Code

    zepto.min.js

    /*! Zepto 1.2.0 (generated with Zepto Builder) - zepto event ajax form ie selector touch fx fx_methods - zeptojs.com/license */
    var Zepto=function(){function t(t){return null==t?String(t):Y[B.call(t)]||"object"}function e(e){return"function"==t(e)}function n(t){return null!=t&&t==t.window}function i(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function r(e){return"object"==t(e)}function o(t){return r(t)&&!n(t)&&Object.getPrototypeOf(t)==Object.prototype}function a(t){var e=!!t&&"length"in t&&t.length,i=S.type(t);return"function"!=i&&!n(t)&&("array"==i||0===e||"number"==typeof e&&e>0&&e-1 in t)}function s(t){return M.call(t,function(t){return null!=t})}function u(t){return t.length>0?S.fn.concat.apply([],t):t}function c(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-zd])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function l(t){return t in Z?Z[t]:Z[t]=new RegExp("(^|\s)"+t+"(\s|$)")}function f(t,e){return"number"!=typeof e||$[c(t)]?e:e+"px"}function h(t){var e,n;return A[t]||(e=L.createElement(t),L.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),A[t]=n),A[t]}function p(t){return"children"in t?D.call(t.children):S.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function d(t,e){var n,i=t?t.length:0;for(n=0;i>n;n++)this[n]=t[n];this.length=i,this.selector=e||""}function m(t,e,n){for(T in e)n&&(o(e[T])||K(e[T]))?(o(e[T])&&!o(t[T])&&(t[T]={}),K(e[T])&&!K(t[T])&&(t[T]=[]),m(t[T],e[T],n)):e[T]!==E&&(t[T]=e[T])}function g(t,e){return null==e?S(t):S(t).filter(e)}function v(t,n,i,r){return e(n)?n.call(t,i,r):n}function y(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function w(t,e){var n=t.className||"",i=n&&n.baseVal!==E;return e===E?i?n.baseVal:n:void(i?n.baseVal=e:t.className=e)}function x(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[[{]/.test(t)?S.parseJSON(t):t):t}catch(e){return t}}function b(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)b(t.childNodes[n],e)}var E,T,S,j,C,N,P=[],O=P.concat,M=P.filter,D=P.slice,L=window.document,A={},Z={},$={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},k=/^s*<(w+|!)[^>]*>/,F=/^<(w+)s*/?>(?:</1>|)$/,R=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/gi,q=/^(?:body|html)$/i,z=/([A-Z])/g,_=["val","css","html","text","data","width","height","offset"],I=["after","prepend","before","append"],X=L.createElement("table"),H=L.createElement("tr"),U={tr:L.createElement("tbody"),tbody:X,thead:X,tfoot:X,td:H,th:H,"*":L.createElement("div")},V=/^[w-]*$/,Y={},B=Y.toString,J={},W=L.createElement("div"),G={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},K=Array.isArray||function(t){return t instanceof Array};return J.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=W).appendChild(t),i=~J.qsa(r,e).indexOf(t),o&&W.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return M.call(t,function(e,n){return t.indexOf(e)==n})},J.fragment=function(t,e,n){var i,r,a;return F.test(t)&&(i=S(L.createElement(RegExp.$1))),i||(t.replace&&(t=t.replace(R,"<$1></$2>")),e===E&&(e=k.test(t)&&RegExp.$1),e in U||(e="*"),a=U[e],a.innerHTML=""+t,i=S.each(D.call(a.childNodes),function(){a.removeChild(this)})),o(n)&&(r=S(i),S.each(n,function(t,e){_.indexOf(t)>-1?r[t](e):r.attr(t,e)})),i},J.Z=function(t,e){return new d(t,e)},J.isZ=function(t){return t instanceof J.Z},J.init=function(t,n){var i;if(!t)return J.Z();if("string"==typeof t)if(t=t.trim(),"<"==t[0]&&k.test(t))i=J.fragment(t,RegExp.$1,n),t=null;else{if(n!==E)return S(n).find(t);i=J.qsa(L,t)}else{if(e(t))return S(L).ready(t);if(J.isZ(t))return t;if(K(t))i=s(t);else if(r(t))i=[t],t=null;else if(k.test(t))i=J.fragment(t.trim(),RegExp.$1,n),t=null;else{if(n!==E)return S(n).find(t);i=J.qsa(L,t)}}return J.Z(i,t)},S=function(t,e){return J.init(t,e)},S.extend=function(t){var e,n=D.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){m(t,n,e)}),t},J.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],o=i||r?e.slice(1):e,a=V.test(o);return t.getElementById&&a&&i?(n=t.getElementById(o))?[n]:[]:1!==t.nodeType&&9!==t.nodeType&&11!==t.nodeType?[]:D.call(a&&!i&&t.getElementsByClassName?r?t.getElementsByClassName(o):t.getElementsByTagName(e):t.querySelectorAll(e))},S.contains=L.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},S.type=t,S.isFunction=e,S.isWindow=n,S.isArray=K,S.isPlainObject=o,S.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},S.isNumeric=function(t){var e=Number(t),n=typeof t;return null!=t&&"boolean"!=n&&("string"!=n||t.length)&&!isNaN(e)&&isFinite(e)||!1},S.inArray=function(t,e,n){return P.indexOf.call(e,t,n)},S.camelCase=C,S.trim=function(t){return null==t?"":String.prototype.trim.call(t)},S.uuid=0,S.support={},S.expr={},S.noop=function(){},S.map=function(t,e){var n,i,r,o=[];if(a(t))for(i=0;i<t.length;i++)n=e(t[i],i),null!=n&&o.push(n);else for(r in t)n=e(t[r],r),null!=n&&o.push(n);return u(o)},S.each=function(t,e){var n,i;if(a(t)){for(n=0;n<t.length;n++)if(e.call(t[n],n,t[n])===!1)return t}else for(i in t)if(e.call(t[i],i,t[i])===!1)return t;return t},S.grep=function(t,e){return M.call(t,e)},window.JSON&&(S.parseJSON=JSON.parse),S.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(t,e){Y["[object "+e+"]"]=e.toLowerCase()}),S.fn={constructor:J.Z,length:0,forEach:P.forEach,reduce:P.reduce,push:P.push,sort:P.sort,splice:P.splice,indexOf:P.indexOf,concat:function(){var t,e,n=[];for(t=0;t<arguments.length;t++)e=arguments[t],n[t]=J.isZ(e)?e.toArray():e;return O.apply(J.isZ(this)?this.toArray():this,n)},map:function(t){return S(S.map(this,function(e,n){return t.call(e,n,e)}))},slice:function(){return S(D.apply(this,arguments))},ready:function(t){if("complete"===L.readyState||"loading"!==L.readyState&&!L.documentElement.doScroll)setTimeout(function(){t(S)},0);else{var e=function(){L.removeEventListener("DOMContentLoaded",e,!1),window.removeEventListener("load",e,!1),t(S)};L.addEventListener("DOMContentLoaded",e,!1),window.addEventListener("load",e,!1)}return this},get:function(t){return t===E?D.call(this):this[t>=0?t:t+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return P.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return e(t)?this.not(this.not(t)):S(M.call(this,function(e){return J.matches(e,t)}))},add:function(t,e){return S(N(this.concat(S(t,e))))},is:function(t){return this.length>0&&J.matches(this[0],t)},not:function(t){var n=[];if(e(t)&&t.call!==E)this.each(function(e){t.call(this,e)||n.push(this)});else{var i="string"==typeof t?this.filter(t):a(t)&&e(t.item)?D.call(t):S(t);this.forEach(function(t){i.indexOf(t)<0&&n.push(t)})}return S(n)},has:function(t){return this.filter(function(){return r(t)?S.contains(this,t):S(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!r(t)?t:S(t)},last:function(){var t=this[this.length-1];return t&&!r(t)?t:S(t)},find:function(t){var e,n=this;return e=t?"object"==typeof t?S(t).filter(function(){var t=this;return P.some.call(n,function(e){return S.contains(e,t)})}):1==this.length?S(J.qsa(this[0],t)):this.map(function(){return J.qsa(this,t)}):S()},closest:function(t,e){var n=[],r="object"==typeof t&&S(t);return this.each(function(o,a){for(;a&&!(r?r.indexOf(a)>=0:J.matches(a,t));)a=a!==e&&!i(a)&&a.parentNode;a&&n.indexOf(a)<0&&n.push(a)}),S(n)},parents:function(t){for(var e=[],n=this;n.length>0;)n=S.map(n,function(t){return(t=t.parentNode)&&!i(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return g(e,t)},parent:function(t){return g(N(this.pluck("parentNode")),t)},children:function(t){return g(this.map(function(){return p(this)}),t)},contents:function(){return this.map(function(){return this.contentDocument||D.call(this.childNodes)})},siblings:function(t){return g(this.map(function(t,e){return M.call(p(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return S.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=h(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var n=e(t);if(this[0]&&!n)var i=S(t).get(0),r=i.parentNode||this.length>1;return this.each(function(e){S(this).wrapAll(n?t.call(this,e):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){S(this[0]).before(t=S(t));for(var e;(e=t.children()).length;)t=e.first();S(t).append(this)}return this},wrapInner:function(t){var n=e(t);return this.each(function(e){var i=S(this),r=i.contents(),o=n?t.call(this,e):t;r.length?r.wrapAll(o):i.append(o)})},unwrap:function(){return this.parent().each(function(){S(this).replaceWith(S(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(t){return this.each(function(){var e=S(this);(t===E?"none"==e.css("display"):t)?e.show():e.hide()})},prev:function(t){return S(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return S(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var n=this.innerHTML;S(this).empty().append(v(this,t,e,n))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=v(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this.pluck("textContent").join(""):null},attr:function(t,e){var n;return"string"!=typeof t||1 in arguments?this.each(function(n){if(1===this.nodeType)if(r(t))for(T in t)y(this,T,t[T]);else y(this,t,v(this,e,n,this.getAttribute(t)))}):0 in this&&1==this[0].nodeType&&null!=(n=this[0].getAttribute(t))?n:E},removeAttr:function(t){return this.each(function(){1===this.nodeType&&t.split(" ").forEach(function(t){y(this,t)},this)})},prop:function(t,e){return t=G[t]||t,1 in arguments?this.each(function(n){this[t]=v(this,e,n,this[t])}):this[0]&&this[0][t]},removeProp:function(t){return t=G[t]||t,this.each(function(){delete this[t]})},data:function(t,e){var n="data-"+t.replace(z,"-$1").toLowerCase(),i=1 in arguments?this.attr(n,e):this.attr(n);return null!==i?x(i):E},val:function(t){return 0 in arguments?(null==t&&(t=""),this.each(function(e){this.value=v(this,t,e,this.value)})):this[0]&&(this[0].multiple?S(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var n=S(this),i=v(this,t,e,n.offset()),r=n.offsetParent().offset(),o={top:i.top-r.top,left:i.left-r.left};"static"==n.css("position")&&(o.position="relative"),n.css(o)});if(!this.length)return null;if(L.documentElement!==this[0]&&!S.contains(L.documentElement,this[0]))return{top:0,left:0};var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,Math.round(e.width),height:Math.round(e.height)}},css:function(e,n){if(arguments.length<2){var i=this[0];if("string"==typeof e){if(!i)return;return i.style[C(e)]||getComputedStyle(i,"").getPropertyValue(e)}if(K(e)){if(!i)return;var r={},o=getComputedStyle(i,"");return S.each(e,function(t,e){r[e]=i.style[C(e)]||o.getPropertyValue(e)}),r}}var a="";if("string"==t(e))n||0===n?a=c(e)+":"+f(e,n):this.each(function(){this.style.removeProperty(c(e))});else for(T in e)e[T]||0===e[T]?a+=c(T)+":"+f(T,e[T])+";":this.each(function(){this.style.removeProperty(c(T))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(S(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?P.some.call(this,function(t){return this.test(w(t))},l(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){j=[];var n=w(this),i=v(this,t,e,n);i.split(/s+/g).forEach(function(t){S(this).hasClass(t)||j.push(t)},this),j.length&&w(this,n+(n?" ":"")+j.join(" "))}}):this},removeClass:function(t){return this.each(function(e){if("className"in this){if(t===E)return w(this,"");j=w(this),v(this,t,e,j).split(/s+/g).forEach(function(t){j=j.replace(l(t)," ")}),w(this,j.trim())}})},toggleClass:function(t,e){return t?this.each(function(n){var i=S(this),r=v(this,t,n,w(this));r.split(/s+/g).forEach(function(t){(e===E?!i.hasClass(t):e)?i.addClass(t):i.removeClass(t)})}):this},scrollTop:function(t){if(this.length){var e="scrollTop"in this[0];return t===E?e?this[0].scrollTop:this[0].pageYOffset:this.each(e?function(){this.scrollTop=t}:function(){this.scrollTo(this.scrollX,t)})}},scrollLeft:function(t){if(this.length){var e="scrollLeft"in this[0];return t===E?e?this[0].scrollLeft:this[0].pageXOffset:this.each(e?function(){this.scrollLeft=t}:function(){this.scrollTo(t,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),n=this.offset(),i=q.test(e[0].nodeName)?{top:0,left:0}:e.offset();return n.top-=parseFloat(S(t).css("margin-top"))||0,n.left-=parseFloat(S(t).css("margin-left"))||0,i.top+=parseFloat(S(e[0]).css("border-top-width"))||0,i.left+=parseFloat(S(e[0]).css("border-left-width"))||0,{top:n.top-i.top,left:n.left-i.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||L.body;t&&!q.test(t.nodeName)&&"static"==S(t).css("position");)t=t.offsetParent;return t})}},S.fn.detach=S.fn.remove,["width","height"].forEach(function(t){var e=t.replace(/./,function(t){return t[0].toUpperCase()});S.fn[t]=function(r){var o,a=this[0];return r===E?n(a)?a["inner"+e]:i(a)?a.documentElement["scroll"+e]:(o=this.offset())&&o[t]:this.each(function(e){a=S(this),a.css(t,v(this,r,e,a[t]()))})}}),I.forEach(function(e,n){var i=n%2;S.fn[e]=function(){var e,r,o=S.map(arguments,function(n){var i=[];return e=t(n),"array"==e?(n.forEach(function(t){return t.nodeType!==E?i.push(t):S.zepto.isZ(t)?i=i.concat(t.get()):void(i=i.concat(J.fragment(t)))}),i):"object"==e||null==n?n:J.fragment(n)}),a=this.length>1;return o.length<1?this:this.each(function(t,e){r=i?e:e.parentNode,e=0==n?e.nextSibling:1==n?e.firstChild:2==n?e:null;var s=S.contains(L.documentElement,r);o.forEach(function(t){if(a)t=t.cloneNode(!0);else if(!r)return S(t).remove();r.insertBefore(t,e),s&&b(t,function(t){if(!(null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src)){var e=t.ownerDocument?t.ownerDocument.defaultView:window;e.eval.call(e,t.innerHTML)}})})})},S.fn[i?e+"To":"insert"+(n?"Before":"After")]=function(t){return S(t)[e](this),this}}),J.Z.prototype=d.prototype=S.fn,J.uniq=N,J.deserializeValue=x,S.zepto=J,S}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function e(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function n(t,n,i,r){return t.global?e(n||w,i,r):void 0}function i(e){e.global&&0===t.active++&&n(e,null,"ajaxStart")}function r(e){e.global&&!--t.active&&n(e,null,"ajaxStop")}function o(t,e){var i=e.context;return e.beforeSend.call(i,t,e)===!1||n(e,i,"ajaxBeforeSend",[t,e])===!1?!1:void n(e,i,"ajaxSend",[t,e])}function a(t,e,i,r){var o=i.context,a="success";i.success.call(o,t,a,e),r&&r.resolveWith(o,[t,a,e]),n(i,o,"ajaxSuccess",[e,i,t]),u(a,e,i)}function s(t,e,i,r,o){var a=r.context;r.error.call(a,i,e,t),o&&o.rejectWith(a,[i,e,t]),n(r,a,"ajaxError",[i,r,t||e]),u(e,i,r)}function u(t,e,i){var o=i.context;i.complete.call(o,e,t),n(i,o,"ajaxComplete",[e,i]),r(i)}function c(t,e,n){if(n.dataFilter==l)return t;var i=n.context;return n.dataFilter.call(i,t,e)}function l(){}function f(t){return t&&(t=t.split(";",2)[0]),t&&(t==S?"html":t==T?"json":b.test(t)?"script":E.test(t)&&"xml")||"text"}function h(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function p(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()&&"jsonp"!=e.dataType||(e.url=h(e.url,e.data),e.data=void 0)}function d(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function m(e,n,i,r){var o,a=t.isArray(n),s=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(s||"object"==o||"array"==o?n:"")+"]"),!r&&a?e.add(u.name,u.value):"array"==o||!i&&"object"==o?m(e,u,i,n):e.add(n,u)})}var g,v,y=+new Date,w=window.document,x=/<script[^<]*(?:(?!</script>)<[^<]*)*</script>/gi,b=/^(?:text|application)/javascript/i,E=/^(?:text|application)/xml/i,T="application/json",S="text/html",j=/^s*$/,C=w.createElement("a");C.href=window.location.href,t.active=0,t.ajaxJSONP=function(e,n){if(!("type"in e))return t.ajax(e);var i,r,u=e.jsonpCallback,c=(t.isFunction(u)?u():u)||"Zepto"+y++,l=w.createElement("script"),f=window[c],h=function(e){t(l).triggerHandler("error",e||"abort")},p={abort:h};return n&&n.promise(p),t(l).on("load error",function(o,u){clearTimeout(r),t(l).off().remove(),"error"!=o.type&&i?a(i[0],p,e,n):s(null,u||"error",p,e,n),window[c]=f,i&&t.isFunction(f)&&f(i[0]),f=i=void 0}),o(p,e)===!1?(h("abort"),p):(window[c]=function(){i=arguments},l.src=e.url.replace(/?(.+)=?/,"?$1="+c),w.head.appendChild(l),e.timeout>0&&(r=setTimeout(function(){h("timeout")},e.timeout)),p)},t.ajaxSettings={type:"GET",beforeSend:l,success:l,error:l,complete:l,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:T,xml:"application/xml, text/xml",html:S,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0,dataFilter:l},t.ajax=function(e){var n,r,u=t.extend({},e||{}),d=t.Deferred&&t.Deferred();for(g in t.ajaxSettings)void 0===u[g]&&(u[g]=t.ajaxSettings[g]);i(u),u.crossDomain||(n=w.createElement("a"),n.href=u.url,n.href=n.href,u.crossDomain=C.protocol+"//"+C.host!=n.protocol+"//"+n.host),u.url||(u.url=window.location.toString()),(r=u.url.indexOf("#"))>-1&&(u.url=u.url.slice(0,r)),p(u);var m=u.dataType,y=/?.+=?/.test(u.url);if(y&&(m="jsonp"),u.cache!==!1&&(e&&e.cache===!0||"script"!=m&&"jsonp"!=m)||(u.url=h(u.url,"_="+Date.now())),"jsonp"==m)return y||(u.url=h(u.url,u.jsonp?u.jsonp+"=?":u.jsonp===!1?"":"callback=?")),t.ajaxJSONP(u,d);var x,b=u.accepts[m],E={},T=function(t,e){E[t.toLowerCase()]=[t,e]},S=/^([w-]+:)///.test(u.url)?RegExp.$1:window.location.protocol,N=u.xhr(),P=N.setRequestHeader;if(d&&d.promise(N),u.crossDomain||T("X-Requested-With","XMLHttpRequest"),T("Accept",b||"*/*"),(b=u.mimeType||b)&&(b.indexOf(",")>-1&&(b=b.split(",",2)[0]),N.overrideMimeType&&N.overrideMimeType(b)),(u.contentType||u.contentType!==!1&&u.data&&"GET"!=u.type.toUpperCase())&&T("Content-Type",u.contentType||"application/x-www-form-urlencoded"),u.headers)for(v in u.headers)T(v,u.headers[v]);if(N.setRequestHeader=T,N.onreadystatechange=function(){if(4==N.readyState){N.onreadystatechange=l,clearTimeout(x);var e,n=!1;if(N.status>=200&&N.status<300||304==N.status||0==N.status&&"file:"==S){if(m=m||f(u.mimeType||N.getResponseHeader("content-type")),"arraybuffer"==N.responseType||"blob"==N.responseType)e=N.response;else{e=N.responseText;try{e=c(e,m,u),"script"==m?(1,eval)(e):"xml"==m?e=N.responseXML:"json"==m&&(e=j.test(e)?null:t.parseJSON(e))}catch(i){n=i}if(n)return s(n,"parsererror",N,u,d)}a(e,N,u,d)}else s(N.statusText||null,N.status?"error":"abort",N,u,d)}},o(N,u)===!1)return N.abort(),s(null,"abort",N,u,d),N;var O="async"in u?u.async:!0;if(N.open(u.type,u.url,O,u.username,u.password),u.xhrFields)for(v in u.xhrFields)N[v]=u.xhrFields[v];for(v in E)P.apply(N,E[v]);return u.timeout>0&&(x=setTimeout(function(){N.onreadystatechange=l,N.abort(),s(null,"timeout",N,u,d)},u.timeout)),N.send(u.data?u.data:null),N},t.get=function(){return t.ajax(d.apply(null,arguments))},t.post=function(){var e=d.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=d.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var r,o=this,a=e.split(/s/),s=d(e,n,i),u=s.success;return a.length>1&&(s.url=a[0],r=a[1]),s.success=function(e){o.html(r?t("<div>").html(e.replace(x,"")).find(r):e),u&&u.apply(o,arguments)},t.ajax(s),this};var N=encodeURIComponent;t.param=function(e,n){var i=[];return i.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(N(e)+"="+N(n))},m(i,e,n),i.join("&").replace(/%20/g,"+")}}(Zepto),function(t){function e(t){return t._zid||(t._zid=h++)}function n(t,n,o,a){if(n=i(n),n.ns)var s=r(n.ns);return(g[e(t)]||[]).filter(function(t){return t&&(!n.e||t.e==n.e)&&(!n.ns||s.test(t.ns))&&(!o||e(t.fn)===e(o))&&(!a||t.sel==a)})}function i(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function r(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function o(t,e){return t.del&&!y&&t.e in w||!!e}function a(t){return x[t]||y&&w[t]||t}function s(n,r,s,u,l,h,p){var d=e(n),m=g[d]||(g[d]=[]);r.split(/s/).forEach(function(e){if("ready"==e)return t(document).ready(s);var r=i(e);r.fn=s,r.sel=l,r.e in x&&(s=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?r.fn.apply(this,arguments):void 0}),r.del=h;var d=h||s;r.proxy=function(t){if(t=c(t),!t.isImmediatePropagationStopped()){t.data=u;var e=d.apply(n,t._args==f?[t]:[t].concat(t._args));return e===!1&&(t.preventDefault(),t.stopPropagation()),e}},r.i=m.length,m.push(r),"addEventListener"in n&&n.addEventListener(a(r.e),r.proxy,o(r,p))})}function u(t,i,r,s,u){var c=e(t);(i||"").split(/s/).forEach(function(e){n(t,e,r,s).forEach(function(e){delete g[c][e.i],"removeEventListener"in t&&t.removeEventListener(a(e.e),e.proxy,o(e,u))})})}function c(e,n){if(n||!e.isDefaultPrevented){n||(n=e),t.each(S,function(t,i){var r=n[t];e[t]=function(){return this[i]=b,r&&r.apply(n,arguments)},e[i]=E});try{e.timeStamp||(e.timeStamp=Date.now())}catch(i){}(n.defaultPrevented!==f?n.defaultPrevented:"returnValue"in n?n.returnValue===!1:n.getPreventDefault&&n.getPreventDefault())&&(e.isDefaultPrevented=b)}return e}function l(t){var e,n={originalEvent:t};for(e in t)T.test(e)||t[e]===f||(n[e]=t[e]);return c(n,t)}var f,h=1,p=Array.prototype.slice,d=t.isFunction,m=function(t){return"string"==typeof t},g={},v={},y="onfocusin"in window,w={focus:"focusin",blur:"focusout"},x={mouseenter:"mouseover",mouseleave:"mouseout"};v.click=v.mousedown=v.mouseup=v.mousemove="MouseEvents",t.event={add:s,remove:u},t.proxy=function(n,i){var r=2 in arguments&&p.call(arguments,2);if(d(n)){var o=function(){return n.apply(i,r?r.concat(p.call(arguments)):arguments)};return o._zid=e(n),o}if(m(i))return r?(r.unshift(n[i],n),t.proxy.apply(null,r)):t.proxy(n[i],n);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var b=function(){return!0},E=function(){return!1},T=/^([A-Z]|returnValue$|layer[XY]$|webkitMovement[XY]$)/,S={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,n,i,r,o){var a,c,h=this;return e&&!m(e)?(t.each(e,function(t,e){h.on(t,n,i,e,o)}),h):(m(n)||d(r)||r===!1||(r=i,i=n,n=f),(r===f||i===!1)&&(r=i,i=f),r===!1&&(r=E),h.each(function(f,h){o&&(a=function(t){return u(h,t.type,r),r.apply(this,arguments)}),n&&(c=function(e){var i,o=t(e.target).closest(n,h).get(0);return o&&o!==h?(i=t.extend(l(e),{currentTarget:o,liveFired:h}),(a||r).apply(o,[i].concat(p.call(arguments,1)))):void 0}),s(h,e,r,i,n,c||a)}))},t.fn.off=function(e,n,i){var r=this;return e&&!m(e)?(t.each(e,function(t,e){r.off(t,n,e)}),r):(m(n)||d(i)||i===!1||(i=n,n=f),i===!1&&(i=E),r.each(function(){u(this,e,i,n)}))},t.fn.trigger=function(e,n){return e=m(e)||t.isPlainObject(e)?t.Event(e):c(e),e._args=n,this.each(function(){e.type in w&&"function"==typeof this[e.type]?this[e.type]():"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,i){var r,o;return this.each(function(a,s){r=l(m(e)?t.Event(e):e),r._args=i,r.target=s,t.each(n(s,e.type||e),function(t,e){return o=e.proxy(r),r.isImmediatePropagationStopped()?!1:void 0})}),o},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return 0 in arguments?this.bind(e,t):this.trigger(e)}}),t.Event=function(t,e){m(t)||(e=t,t=e.type);var n=document.createEvent(v[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),c(n)}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[],r=function(t){return t.forEach?t.forEach(r):void i.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(i,o){n=o.type,e=o.name,e&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&r(t(o).val())}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t,e){function n(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()}function i(t){return r?r+t:t.toLowerCase()}var r,o,a,s,u,c,l,f,h,p,d="",m={Webkit:"webkit",Moz:"",O:"o"},g=document.createElement("div"),v=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,y={};g.style.transform===e&&t.each(m,function(t,n){return g.style[t+"TransitionProperty"]!==e?(d="-"+t.toLowerCase()+"-",r=n,!1):void 0}),o=d+"transform",y[a=d+"transition-property"]=y[s=d+"transition-duration"]=y[c=d+"transition-delay"]=y[u=d+"transition-timing-function"]=y[l=d+"animation-name"]=y[f=d+"animation-duration"]=y[p=d+"animation-delay"]=y[h=d+"animation-timing-function"]="",t.fx={off:r===e&&g.style.transitionProperty===e,speeds:{_default:400,fast:200,slow:600},cssPrefix:d,transitionEnd:i("TransitionEnd"),animationEnd:i("AnimationEnd")},t.fn.animate=function(n,i,r,o,a){return t.isFunction(i)&&(o=i,r=e,i=e),t.isFunction(r)&&(o=r,r=e),t.isPlainObject(i)&&(r=i.easing,o=i.complete,a=i.delay,i=i.duration),i&&(i=("number"==typeof i?i:t.fx.speeds[i]||t.fx.speeds._default)/1e3),a&&(a=parseFloat(a)/1e3),this.anim(n,i,r,o,a)},t.fn.anim=function(i,r,d,m,g){var w,x,b,E={},T="",S=this,j=t.fx.transitionEnd,C=!1;if(r===e&&(r=t.fx.speeds._default/1e3),g===e&&(g=0),t.fx.off&&(r=0),"string"==typeof i)E[l]=i,E[f]=r+"s",E[p]=g+"s",E[h]=d||"linear",j=t.fx.animationEnd;else{x=[];for(w in i)v.test(w)?T+=w+"("+i[w]+") ":(E[w]=i[w],x.push(n(w)));T&&(E[o]=T,x.push(o)),r>0&&"object"==typeof i&&(E[a]=x.join(", "),E[s]=r+"s",E[c]=g+"s",E[u]=d||"linear")}return b=function(e){if("undefined"!=typeof e){if(e.target!==e.currentTarget)return;t(e.target).unbind(j,b)}else t(this).unbind(j,b);C=!0,t(this).css(y),m&&m.call(this)},r>0&&(this.bind(j,b),setTimeout(function(){C||b.call(S)},1e3*(r+g)+25)),this.size()&&this.get(0).clientLeft,this.css(E),0>=r&&setTimeout(function(){S.each(function(){b.call(this)})},0),this},g=null}(Zepto),function(t,e){function n(n,i,r,o,a){"function"!=typeof i||a||(a=i,i=e);var s={opacity:r};return o&&(s.scale=o,n.css(t.fx.cssPrefix+"transform-origin","0 0")),n.animate(s,i,null,a)}function i(e,i,r,o){return n(e,i,0,r,function(){a.call(t(this)),o&&o.call(this)})}var r=window.document,o=(r.documentElement,t.fn.show),a=t.fn.hide,s=t.fn.toggle;t.fn.show=function(t,i){return o.call(this),t===e?t=0:this.css("opacity",0),n(this,t,1,"1,1",i)},t.fn.hide=function(t,n){return t===e?a.call(this):i(this,t,"0,0",n)},t.fn.toggle=function(n,i){return n===e||"boolean"==typeof n?s.call(this,n):this.each(function(){var e=t(this);e["none"==e.css("display")?"show":"hide"](n,i)})},t.fn.fadeTo=function(t,e,i){return n(this,t,e,null,i)},t.fn.fadeIn=function(t,e){var n=this.css("opacity");return n>0?this.css("opacity",0):n=1,o.call(this).fadeTo(t,n,e)},t.fn.fadeOut=function(t,e){return i(this,t,null,e)},t.fn.fadeToggle=function(e,n){return this.each(function(){var i=t(this);i[0==i.css("opacity")||"none"==i.css("display")?"fadeIn":"fadeOut"](e,n)})}}(Zepto),function(){try{getComputedStyle(void 0)}catch(t){var e=getComputedStyle;window.getComputedStyle=function(t,n){try{return e(t,n)}catch(i){return null}}}}(),function(t){function e(e){return e=t(e),!(!e.width()&&!e.height())&&"none"!==e.css("display")}function n(t,e){t=t.replace(/=#]/g,'="#"]');var n,i,r=s.exec(t);if(r&&r[2]in a&&(n=a[r[2]],i=r[3],t=r[1],i)){var o=Number(i);i=isNaN(o)?i.replace(/^["']|["']$/g,""):o}return e(t,n,i)}var i=t.zepto,r=i.qsa,o=i.matches,a=t.expr[":"]={visible:function(){return e(this)?this:void 0},hidden:function(){return e(this)?void 0:this},selected:function(){return this.selected?this:void 0},checked:function(){return this.checked?this:void 0},parent:function(){return this.parentNode},first:function(t){return 0===t?this:void 0},last:function(t,e){return t===e.length-1?this:void 0},eq:function(t,e,n){return t===n?this:void 0},contains:function(e,n,i){return t(this).text().indexOf(i)>-1?this:void 0},has:function(t,e,n){return i.qsa(this,n).length?this:void 0}},s=new RegExp("(.*):(\w+)(?:\(([^)]+)\))?$\s*"),u=/^s*>/,c="Zepto"+ +new Date;i.qsa=function(e,o){return n(o,function(n,a,s){try{var l;!n&&a?n="*":u.test(n)&&(l=t(e).addClass(c),n="."+c+" "+n);var f=r(e,n)}catch(h){throw console.error("error performing selector: %o",o),h}finally{l&&l.removeClass(c)}return a?i.uniq(t.map(f,function(t,e){return a.call(t,e,f,s)})):f})},i.matches=function(t,e){return n(e,function(e,n,i){return(!e||o(t,e))&&(!n||n.call(t,null,i)===t)})}}(Zepto),function(t){function e(t,e,n,i){return Math.abs(t-e)>=Math.abs(n-i)?t-e>0?"Left":"Right":n-i>0?"Up":"Down"}function n(){l=null,h.last&&(h.el.trigger("longTap"),h={})}function i(){l&&clearTimeout(l),l=null}function r(){s&&clearTimeout(s),u&&clearTimeout(u),c&&clearTimeout(c),l&&clearTimeout(l),s=u=c=l=null,h={}}function o(t){return("touch"==t.pointerType||t.pointerType==t.MSPOINTER_TYPE_TOUCH)&&t.isPrimary}function a(t,e){return t.type=="pointer"+e||t.type.toLowerCase()=="mspointer"+e}var s,u,c,l,f,h={},p=750;t(document).ready(function(){var d,m,g,v,y=0,w=0;"MSGesture"in window&&(f=new MSGesture,f.target=document.body),t(document).bind("MSGestureEnd",function(t){var e=t.velocityX>1?"Right":t.velocityX<-1?"Left":t.velocityY>1?"Down":t.velocityY<-1?"Up":null;e&&(h.el.trigger("swipe"),h.el.trigger("swipe"+e))}).on("touchstart MSPointerDown pointerdown",function(e){(!(v=a(e,"down"))||o(e))&&(g=v?e:e.touches[0],e.touches&&1===e.touches.length&&h.x2&&(h.x2=void 0,h.y2=void 0),d=Date.now(),m=d-(h.last||d),h.el=t("tagName"in g.target?g.target:g.target.parentNode),s&&clearTimeout(s),h.x1=g.pageX,h.y1=g.pageY,m>0&&250>=m&&(h.isDoubleTap=!0),h.last=d,l=setTimeout(n,p),f&&v&&f.addPointer(e.pointerId));
    }).on("touchmove MSPointerMove pointermove",function(t){(!(v=a(t,"move"))||o(t))&&(g=v?t:t.touches[0],i(),h.x2=g.pageX,h.y2=g.pageY,y+=Math.abs(h.x1-h.x2),w+=Math.abs(h.y1-h.y2))}).on("touchend MSPointerUp pointerup",function(n){(!(v=a(n,"up"))||o(n))&&(i(),h.x2&&Math.abs(h.x1-h.x2)>30||h.y2&&Math.abs(h.y1-h.y2)>30?c=setTimeout(function(){h.el&&(h.el.trigger("swipe"),h.el.trigger("swipe"+e(h.x1,h.x2,h.y1,h.y2))),h={}},0):"last"in h&&(30>y&&30>w?u=setTimeout(function(){var e=t.Event("tap");e.cancelTouch=r,h.el&&h.el.trigger(e),h.isDoubleTap?(h.el&&h.el.trigger("doubleTap"),h={}):s=setTimeout(function(){s=null,h.el&&h.el.trigger("singleTap"),h={}},250)},0):h={}),y=w=0)}).on("touchcancel MSPointerCancel pointercancel",r),t(window).on("scroll",r)}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(e){t.fn[e]=function(t){return this.on(e,t)}})}(Zepto);
    View Code

    result.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=device-dpi,width=750,user-scalable=no">
        <meta name="format-detection" content="telephone=no,email=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta content="还款详情" name="keywords" />
        <meta content="还款详情" itemprop="description" name="description" />
        <title>还款详情</title>
        <link rel="stylesheet" href="css/common.css">
    </head>
    
    <body>
        <div class="infoDialog" id="infoDialog">
            <div class="infoinner">
                <div class="infotop topjianbian">
                    <div class="cal_nav displayflex">
                        <div class="cal_changenav inner_bx flexli current" data-name="benxi">等额本息</div>
                        <div class="cal_changenav inner_bj flexli" data-name="benjin">等额本金</div>
                    </div>
                    <div class="infototal displayflex">
                        <div class="infotli flexli">
                            <div class="name">还款总额(万)</div>
                            <div class="price" id="totalPrice">0.00</div>
                        </div>
                        <div class="infotli flexli">
                            <div class="name">总利息(万)</div>
                            <div class="price" id="totalLixi">0.00</div>
                        </div>
                        <div class="infotli flexli">
                            <div class="name">贷款总额(万)</div>
                            <div class="price" id="totalDknum">0.00</div>
                        </div>
                        <div class="infotli flexli">
                            <div class="name">贷款期限</div>
                            <div class="price" id="totalyear">20</div>
                        </div>
                    </div>
                </div>
    
                <div class="tablenav">
                    <div class="tablenavinner displayflex">
                        <div class="fixtitle flexli">期次</div>
                        <div class="fixtitle flexli">每月本金</div>
                        <div class="fixtitle flexli">每月利息</div>
                        <div class="fixtitle flexli">剩余还款</div>
                    </div>
                </div>
                <div class="yearouter" id="yearouter">
                   
                </div>
    
            </div>
        </div>
    
    
        <script src="js/zepto.min.js"></script>
        <script src="js/config.js"></script>
        <script src="js/calculate.js"></script>
        <script src="js/dom.js"></script>
    </body>
    
    </html>
    View Code

    文章来源于http://resource.haorooms.com/softshow-24-282-1.html

  • 相关阅读:
    http请求user_agent字段解析
    搭建docker registry私有镜像仓库
    k8s遇见的问题
    nginx相关知识
    iOS学习笔记(8)——GCD初探
    iOS学习笔记(7)——解析json中的中文
    SAE实践——创建简单留言板
    SAE实践——创建新应用开启MySQL服务
    SAE实践——用SVN命令行同步/提交代码
    PHP错误——Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes)
  • 原文地址:https://www.cnblogs.com/li-sir/p/11037965.html
Copyright © 2020-2023  润新知