Jquery UI不使用计算器

时间：2014-07-21 15:05:35

标签： jquery calculator

我有这个继承的脚本，我无法理解它。写它的人是不可联系的，我有点卡住了。希望你们能帮助我开展工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.process-box {
    border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
    width: 940px;
    padding: 15px 0;
    margin: 20px auto 0;
 }
 .process-box ul {
    height: 100px;
    margin: 0;
 }
 .process-box li {
    list-style: none;
    float: left;
    background: url('http://www.genata-motor.co.uk/images/red-sep-arrow.png') no-repeat right center;
    width: 170px;
    height: 100px;
    padding-left: 30px;
    padding-right: 56px;
    margin: 0;
 }
 .process-box li.first {
    padding-left: 0;
 }
 .process-box li.last {
    background: none;
    padding-right: 0;
 }
 .process-box li h3 {
    background: #575757;
    background: -moz-linear-gradient(top, #575757 0%, #2c2c2c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #575757), color-stop(100%, #2c2c2c));
    background: -webkit-linear-gradient(top, #575757 0%, #2c2c2c 100%);
    background: -o-linear-gradient(top, #575757 0%, #2c2c2c 100%);
    background: -ms-linear-gradient(top, #575757 0%, #2c2c2c 100%);
    background: linear-gradient(to bottom, #575757 0%, #2c2c2c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575757', endColorstr='#2c2c2c', GradientType=0 );
    font-size: 16px;
    line-height: 28px;
    color: #eee;
    text-align: center;
    margin-bottom: 10px;
 }
 .process-box li h3 span {
    font-weight: 700;
    margin-right: 4px;
 }
 .calculator {
    background: #f3f3f3 url('http://www.genata-motor.co.uk/images/bg-dotted.png') repeat 0 0;
    border-radius: 30px;
    width: 800px;
    height: 214px;
    padding: 15px;
    margin: 30px auto 20px;
 }
 .calculator h3 {
    background: #b3b3b3;
    background: -moz-linear-gradient(top, #b3b3b3 0%, #777777 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3b3b3), color-stop(100%, #777777));
    background: -webkit-linear-gradient(top, #b3b3b3 0%, #777777 100%);
    background: -o-linear-gradient(top, #b3b3b3 0%, #777777 100%);
    background: -ms-linear-gradient(top, #b3b3b3 0%, #777777 100%);
    background: linear-gradient(to bottom, #b3b3b3 0%, #777777 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b3b3', endColorstr='#777777', GradientType=0 );
    border-radius: 25px;
    font-size: 21px;
    line-height: 34px;
    color: #eee;
    text-align: center;
    text-shadow: 0 -1px 0 #666;
    margin-bottom: 15px;
 }
 .ie9 .calculator h3 {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Nzc3NzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    filter: none;
 }
 #borrowing-total, #period-total {
    float: left;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    width: 602px;
    text-align: center;
    margin-bottom: 10px;
 }
 #period-total {
    float: right;
    width: 172px;
 }
 #borrowing-slider-wrap {
    float: left;
    background: url('http://www.genata-motor.co.uk/images/slider-range-sprite.png') no-repeat left top;
    width: 602px;
    height: 28px;
 }
 #period-slider-wrap {
    float: right;
    background: url('http://www.genata-motor.co.uk/images/slider-range-sprite.png') no-repeat -604px top;
    width: 172px;
    height: 28px;
 }
 #borrowing-slider, #period-slider {
    margin: 0 14px 0 13px;
 }
 .ie #borrowing-slider, .ie #period-slider {
    margin: 0 14px 0 12px;
 }
 .ui-slider {
    position: relative;
    height: 28px;
 }
 .ui-slider .ui-slider-handle {
    z-index: 2;
    position: absolute;
    top: -4px;
    background: url('http://www.genata-motor.co.uk/images/slider-range-sprite.png') no-repeat right top;
    border: 0;
    width: 17px;
    height: 22px;
    cursor: pointer;
    margin-left: -8px;
 }
 .ui-slider .ui-slider-range {
    top: 0;
    height: 100%;
 }
 .stat-container {
    width: 750px;
    margin: 25px auto 0;
 }
 .stat-container div {
    float: left;
    background: #6a1d1d url('http://www.genata-motor.co.uk/images/price-gradient.png') repeat-x left top;
    border-radius: 4px;
    font-size: 13px;
    color: #eee;
    width: 210px;
    height: 78px;
    line-height: 24px;
    text-align: center;
    overflow: hidden;
 }
 .stat-container strong {
    display: block;
    font: 38px/54px Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
 }
 .stat-container .center {
    margin: 0 60px;
 }
</style>
</head>

<body>

    <div class="row">
        <div class="col-xs-12">
            <div class="newcalculator">
                <h3>Personal Loan Calculator</h3>
                <div>
                    <div class="calculator-elements">
                        <div id="borrowing-total"> Amount Borrowing: <strong></strong> </div>
                        <div id="period-total"> Years: <strong></strong> </div>
                        <div id="borrowing-slider-wrap">
                            <div id="borrowing-slider"></div>
                        </div>
                        <div id="period-slider-wrap">
                            <div id="period-slider"></div>
                        </div>
                    </div>
                    <!-- calculator-elements --> 

                </div>
                <div class="clear"></div>
                <div class="stat-container">
                    <div id="interest"> Interest <strong>&pound;0</strong> </div>
                    <div id="monthly-payment" class="center"> Monthly Payments <strong>&pound;0</strong> </div>
                    <div id="total-repayable"> Total Repayable <strong>&pound;0</strong> </div>
                </div>
            </div>            
        </div>
    </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"><\/script>')</script>

<script type="text/javascript" src="http://speedwaymotorcycles.co.uk/js/jquery.ui.min.js"></script>
<script type="text/javascript" src="http://speedwaymotorcycles.co.uk/js/jquery.plugins.min.js"></script>

<script>
(function(window, document, $){
    function financePage(){

        var borrowSlider = $('#borrowing-slider'),
            periodSlider = $('#period-slider'),
            borrowNum = $('#borrowing-total strong'),
            periodNum = $('#period-total strong')
            borrowVal = 0,
            periodVal = 0;

        var interestNum = $('#interest strong'),
            paymentNum = $('#monthly-payment strong'),
            repayableNum = $('#total-repayable strong');

        borrowSlider.slider({
            value: 750,
            min: 500,
            max: 4000,
            step: 25,
            slide: function(e, ui){

                var val = ui.value;
                borrowNum.html('&pound;' + val);

                // prevent function mass execution, true = override self
                $.doTimeout('slider', 20, function(){
                    calculateLoan(val, null);
                }, true);
            }
        });
        borrowNum.html('&pound;' + borrowSlider.slider('value'));

        periodSlider.slider({
            value: 2,
            min: 1,
            max: 4,
            step: 1,
            slide: function(e, ui){

                var val = ui.value;
                periodNum.html(val);
                calculateLoan(null, val);
            }
        });
        periodNum.html(periodSlider.slider('value'));

        calculateLoan();

        function calculateLoan(borrow, period) {

            // uses parent variables to stop multiple calls
            var borrow  = (borrow)
                        ? borrowVal = borrow
                        :   (borrowVal)
                            ? borrowVal
                            : borrowVal = borrowSlider.slider('value'),
                period  = (period)
                        ? periodVal = period
                        :   (periodVal)
                            ? periodVal
                            : periodVal = periodSlider.slider('value');

            var totalRepayable = Math.round(((((borrow + 195) / 100) * 10) * period) + borrow),
                monthlyPayment = Math.round(totalRepayable / (period * 12)),
                interest = Math.round(totalRepayable - borrow);

            interestNum.html('&pound;' + interest);
            paymentNum.html('&pound;' + monthlyPayment);
            repayableNum.html('&pound;' + (totalRepayable + 195));
        }
    }    
});
</script>

</body>
</html>

http://jsfiddle.net/LWd26/

（链接外部文件的两个站点都是我们的客户 - 未经许可未使用这些文件）

1 个答案:

答案 0 :(得分：0)

尽管OP的问题中缺乏有用的信息（并且忽略了可怜的OP继承代码似乎无法理解基础知识的事实），这就是解决方案。

您只需在加载页面后致电financePage()（我已将javascript放入jQuery＆＃39; ready功能）

$(document).ready(function () { // <-- Added this bit to make sure your document has fully loaded before running any contained javascript
    function financePage() {

        var borrowSlider = $('#borrowing-slider'),
            periodSlider = $('#period-slider'),
            borrowNum = $('#borrowing-total strong'),
            periodNum = $('#period-total strong')
            borrowVal = 0,
            periodVal = 0;

        var interestNum = $('#interest strong'),
            paymentNum = $('#monthly-payment strong'),
            repayableNum = $('#total-repayable strong');

        borrowSlider.slider({
            value: 750,
            min: 500,
            max: 4000,
            step: 25,
            slide: function (e, ui) {

                var val = ui.value;
                borrowNum.html('&pound;' + val);

                // prevent function mass execution, true = override self
                $.doTimeout('slider', 20, function () {
                    calculateLoan(val, null);
                }, true);
            }
        });
        borrowNum.html('&pound;' + borrowSlider.slider('value'));

        periodSlider.slider({
            value: 2,
            min: 1,
            max: 4,
            step: 1,
            slide: function (e, ui) {

                var val = ui.value;
                periodNum.html(val);
                calculateLoan(null, val);
            }
        });
        periodNum.html(periodSlider.slider('value'));

        calculateLoan();

        function calculateLoan(borrow, period) {

            // uses parent variables to stop multiple calls
            var borrow = (borrow) ? borrowVal = borrow : (borrowVal) ? borrowVal : borrowVal = borrowSlider.slider('value'),
                period = (period) ? periodVal = period : (periodVal) ? periodVal : periodVal = periodSlider.slider('value');

            var totalRepayable = Math.round(((((borrow + 195) / 100) * 10) * period) + borrow),
                monthlyPayment = Math.round(totalRepayable / (period * 12)),
                interest = Math.round(totalRepayable - borrow);

            interestNum.html('&pound;' + interest);
            paymentNum.html('&pound;' + monthlyPayment);
            repayableNum.html('&pound;' + (totalRepayable + 195));
        }
    }

    financePage(); //<-- Added this bit which is called a `function call`
});

演示：http://jsfiddle.net/robschmuecker/LWd26/2/

相关问题
最新问题