JS金融网站利息计算器代码

<li><a href="javascript:void(0);" id="iCalculator">利息计算器</a></li>

<div class="jsqbox">
    <div class="jsqtitle">
        <h3>利息计算器</h3>
        <a id="jsqclosebtn">×</a>
    </div>
    <div class="jsqrow" style="padding-top:40px;">
        <label>投资金额：</label><input type="text" class="jsqtext" id="amount"><i class="rebox">元</i>
    </div>
    <div class="jsqrow">
        <label>年华利率：</label><input type="text" class="jsqtext" id="apr"><i class="rebox">%</i>
    </div>
    <div class="jsqrow">
        <label>还款方式：</label>
        <select id="repay_type">
            <option value="1">到期一次性还本付息</option>
            <option value="2">按月付息到期还本</option>
            <option value="3">等额本息</option>
        </select>
        <a class="btngray">重置</a>
    </div>
    <div class="jsqrow">
        <label>项目期限：</label><input type="text" class="jsqtext" id="datenum"><i id="dtype" val="0" class="rebox">天</i>
        <a class="optbtn">计算</a>
    </div>
    <hr style="margin: 15px 2px 5px 2px; background:#e4e4dc; height:2px; border:none;">
    <div class="jsqrow" id="resultdiv">
        <p class="resultp">计算结果：</p>
    </div>
</div>

.jsqbox{width: 460px;height: 460px;border-radius: 4px; background:#fffcf5;-moz-box-shadow:4px 3px 5px 0px #333;z-index: 1000;display: none;
    -webkit-box-shadow:4px 3px 5px 0px #333; box-shadow:4px 3px 5px 0px #333;position: fixed;left: 50%;margin-left: -230px;top: 150px;}
.jsqbox .jsqtitle{height: 48px;line-height: 48px;margin-bottom: 10px; background:#f38001; border-bottom:2px solid #c46d06;
    color:#fff; border-radius:4px 4px 0px 0px;}
.jsqtitle h3{margin: 0 0 0 20px;float: left; font-size:18px;}
.jsqtitle a{display: inline-block;float: right;margin-right: 10px;width: 24px;height: 24px;line-height: 24px;
    margin-top: 8px;color: #999; text-align: center; cursor: pointer; color:#fff;}
.jsqrow{padding: 8px; color:#656361;}
.jsqrow label{float: left;margin-top: 5px;margin-left: 25px;}
.jsqrow select{height: 30px;line-height: 30px;width: 242px;font-size: 14px;border: 1px solid #a0978f;outline: none;padding: 0 2px; border-radius:2px; background:#fffcf5;}
.jsqrow .jsqtext{height: 30px;line-height: 30px;padding: 0 5px;font-size: 12px;border: solid 1px #a0978f;
    outline: none;float: left;width: 200px;  border-radius:2px 0 0 2px; background:#fffcf5;}
.rebox{height: 30px;width: 20px;padding: 0 5px;font-style: normal;line-height: 30px;background: #a0978f;border: 1px solid #a0978f; color:#fff;
    border-left:0;display: inline-block;text-align: center;}
.jsqrow .optbtn{display: inline-block;height:32px;line-height:32px;text-align: center;background-color: #f17d00;
    color: #FFFFFF;cursor: pointer;padding: 0 20px;margin-left:5px; border-radius:2px; }
.jsqrow .btngray{display: inline-block;height:32px;line-height:32px;text-align: center;
    color: #FFFFFF;cursor: pointer;padding: 0 20px;margin-left:5px; background-color: #a0978f; border-radius:2px;}
.btngray:hover{background-color:#cbcbcb; }
.optbtn:hover{background-color: #e77817;}
.jsqrow .resultp{padding: 5px 20px 5px 28px;}

$(function(){
    $("#iCalculator").click(function(){
        $("body").append('<div class="overlay"></div>');
        $(".jsqbox").show();
    });
    $("#jsqclosebtn").click(function(){
        $(".overlay").remove();
        $(".jsqbox").hide();
    });
    $("#repay_type").change(function(){
        if ($(this).val()=='1'){
            $("#dtype").text('天');
        }else{
            $("#dtype").text('月');
        }
    });
    $(".btngray").click(function(){
        $("#amount").val('');
        $("#apr").val('');
        $("#repay_type").val(1);
        $("#datenum").val('');
        $("#dtype").text('天');
        $("#resultdiv").html('<p class="resultp">计算结果：</p>');
    });
    $(".optbtn").click(function(){
        var amount = $("#amount").val();
        var apr = $("#apr").val();
        var repay_type = $("#repay_type").val();
        var datenum = $("#datenum").val();
        if ($.trim(amount)==''){
            $(".errlbl").text('请输入投资金额').show();
            return;
        }
        if ($.trim(apr)==''){
            $(".errlbl").text('请输入年化利率').show();
            return;
        }
        if ($.trim(datenum)==''){
            $(".errlbl").text('请输入投资期限').show();
            return;
        }
        $(".errlbl").hide();
        if (repay_type=='1'){
            lump_sum(amount,apr,datenum);
        }else if (repay_type=='2'){
            regular_interest(amount,apr,datenum);
        }else if (repay_type=='3'){
            principal_interest(amount,apr,datenum);
        }
    });
    var lump_sum = function(amount,apr,datenum){//一次性还本付息
        var fee = (Number(apr)/100/360*Number(datenum)*Number(amount));
        var total = parseFloat(Number(amount)+fee).toFixed(2);
        fee = parseFloat(fee).toFixed(2);
        var reshtml = '<p class="resultp">本息合计：'+total+'元</p>'+
            '<p class="resultp">投资收益：'+fee+'元</p>';
        $("#resultdiv").html(reshtml);
    }
    var regular_interest = function(amount,apr,datenum){//按月付息到期还本
        var fee = (Number(apr)/100/12)*Number(amount)*Number(datenum);
        var total = parseFloat(Number(amount)+fee).toFixed(2);
        fee = parseFloat(fee).toFixed(2);
        var afee = parseFloat(fee/datenum).toFixed(2);
        var lasttotal = parseFloat(Number(amount)+fee/datenum).toFixed(2);
        var reshtml = '<p class="resultp">本息合计：'+total+'元</p>'+
            '<p class="resultp">投资收益：'+fee+'元</p>'+
            '<p class="resultp">每月应收利息：'+afee+'元</p>'+
            '<p class="resultp">最后一月获得：'+lasttotal+'元</p>';
        $("#resultdiv").html(reshtml);
    }
    var principal_interest = function(amount,apr,datenum){//等额本息
        var fee = (amount * apr / 1200 * Math.pow((1 + apr / 1200), datenum) /(Math.pow((1 + apr / 1200),datenum)- 1) * datenum - amount);
        var total = parseFloat(Number(amount)+fee).toFixed(2);
        fee = parseFloat(fee).toFixed(2);
        var afee = amount*(apr/1200)*Math.pow((1 + apr / 1200), datenum)/(Math.pow((1 + apr / 1200), datenum)-1);
        afee = parseFloat(afee).toFixed(2);
        var reshtml = '<p class="resultp">本息合计：'+total+'元</p>'+
            '<p class="resultp">投资收益：'+fee+'元</p>'+
            '<p class="resultp">每月应收本息：'+afee+'元</p>';
        $("#resultdiv").html(reshtml);
    }
});