私はこの計算機を完成させたと思った。IEで表示するまでは、すばらしかったです。皆さん、見てみて、なぜそれがあらゆる種類のめちゃくちゃになっているのか教えてもらえますか? IE と別のブラウザで比較してみてください。下にスクロールして「支払い計算機」をクリックしてください。
jQuery UI Radio Buttons を利用しています。そのため、以下のスタイリングの多くは、jQuery ライブラリーに由来するものと戦うためのものです。
事前に助けてくれてありがとう。
<script>
$(document).ready(function() {
$( "#interest_rate, #amount, #payments" ).buttonset();
$('#amount > input, #interest_rate > input, #payments > input').on("click", function() {
if ($("#interest_rate > input:checked").attr("id") == "weekly") {
var numOfPayments = 32;
$('#pmt_freq').html('WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "two_weeks") {
var numOfPayments = 15;
$('#pmt_freq').html('BI-WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "semi_monthly") {
var numOfPayments = 16;
$('#pmt_freq').html('SEMI-MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "monthly") {
var numOfPayments = 8;
$('#pmt_freq').html('MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
}
if ($('#payments > input:checked').val() == "bronze") {
$('#weekly').val(.0569);
$('#two_weeks').val(.1138);
$('#semi_monthly').val(.1233);
$('#monthly').val(.2467);
} else if ($('#payments > input:checked').val() == "silver") {
$('#weekly').val(.0531);
$('#two_weeks').val(.1062);
$('#semi_monthly').val(.1150);
$('#monthly').val(.23);
} else if ($('#payments > input:checked').val() == "gold") {
$('#weekly').val(.0492);
$('#two_weeks').val(.0985);
$('#semi_monthly').val(.1067);
$('#monthly').val(.2133);
} else if ($('#payments > input:checked').val() == "platinum") {
$('#weekly').val(.0454);
$('#two_weeks').val(.0908);
$('#semi_monthly').val(.0983);
$('#monthly').val(.1967);
} else {
$('#weekly').val(.0404);
$('#two_weeks').val(.0808);
$('#semi_monthly').val(.0875);
$('#monthly').val(.175);
}
var amount = ($('#amount > input:checked').val() );
var interest_rate = ($('#interest_rate > input:checked').val() );
var interest_rate_plus = +1 + +interest_rate;
var interRate_numOfPay = Math.pow(interest_rate_plus, numOfPayments);
var averagePayments = ( interest_rate * amount * interRate_numOfPay) / (interRate_numOfPay - 1 );
var totalPaid = averagePayments * numOfPayments;
var fees = totalPaid - amount;
$('#cash_advance').html("$" + amount);
$('#total_fees').html("$" + fees.toFixed(2));
$('#average_payments').html("$" + averagePayments.toFixed(2));
});
});
</script>
html は次のとおりです。
<div class="calculator-container">
<h2>PAYMENT CALCULATOR</h2>
<form>
<div id="payments">
<label class="calc-descs first"><span>1</span>MEMBERSHIP LEVEL</label>
<input type="radio" id="bronze" name="radio" value="bronze" checked="checked"><label for="bronze">bronze</label>
<input type="radio" id="silver" name="radio" value="silver"><label for="silver">silver</label>
<input type="radio" id="gold" name="radio" value="gold"><label for="gold">gold</label>
<input type="radio" id="platinum" name="radio" value="platinum"><label for="platinum">platinum</label>
<input type="radio" id="premier" name="radio" value="premier"><label for="premier">premier</label>
</div>
</form>
<form>
<div id="interest_rate">
<label class="calc-descs second"><span>2</span>PAY FREQUENCY</label>
<input type="radio" id="weekly" name="radio"><label for="weekly">weekly</label>
<input type="radio" id="two_weeks" name="radio" checked="checked"><label for="two_weeks">every two weeks</label>
<input type="radio" id="semi_monthly" name="radio"><label for="semi_monthly">twice a month</label>
<input type="radio" id="monthly" name="radio"><label for="monthly">monthly</label>
</div>
</form>
<form>
<div id="amount">
<label class="calc-descs third"><span>3</span>LOAN AMOUNT</label>
<input type="radio" id="300" name="radio" value="300.00"><label for="300">$300</label>
<input type="radio" id="500" name="radio" value="500.00"><label for="500">$500</label>
<input type="radio" id="750" name="radio" value="750.00" checked="checked"><label for="750">$750</label>
<input type="radio" id="1000" name="radio" value="1000.00"><label for="1000">$1000</label>
<input type="radio" id="1200" name="radio" value="1200.00"><label for="1200">$1200</label>
</div>
</form>
<div id="calc-filler"></div><div class="total-box">LOAN AMOUNT<div class="triangle-dwn"></div></div><div class="total-box">INTEREST + FEES <sup>1</sup><div class="triangle-dwn"></div></div><div id="pmt_freq" class="total-box">BI-WEEKLY PAYMENT <sup>2</sup><div class="triangle-dwn"></div></div><br />
<div id="loan_totals"><label>ESTIMATED LOAN COST</label></div><div id="cash_advance">$750.00</div><div id="total_fees">$847.44</div><div id="average_payments">$106.50</div>
<div class="calc-disclaimer">Calculator defaults loan life base on payment cycle chosen. <sup>1</sup> Calculation is an estimate, your loan cost may vary. <sup>2</sup> Payment may vary.</div>
</div>
そしてCSS：
.calculator-container { color: #949599; width: 825px; margin: 0 auto; }
.calculator-container h2 { color: #949599; margin-bottom: 30px; }
.ui-buttonset .ui-button { margin: initial }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: initial; border: 2px solid #949599; border-radius: 6px; color: #949599; padding: 11px 22px; line-height: 44px; text-align: center; }
#payments label { padding: 11px 28px;}
#payments label:first-child { padding: 0; }
#amount label { padding: 11px 30px; }
#amount label:first-child { padding: 0; }
.ui-state-active, .ui-state-focus { background: #F15A2B; border: 2px solid #f15A2B; outline: none; color: #fff; }
#interest_rate, #amount, #payments { padding: 1px; margin-bottom: 25px; width: auto; }
#loan_totals { height: 46px; width: 220px; line-height: 46px; float: left; text-align: center; padding-right: 10px; clear: both; }
#cash_advance, #total_fees, #average_payments { background: #F15A2B; width: 150px; height: 46px; line-height: 46px; margin-right: 48px; margin-bottom: 25px; border-radius: 6px; color: #fff; text-align: center; font-size: 1.3em; display: block; float: left; border: 2px solid #fff; -moz-box-shadow: 0 0 0 6px #F15A2B; -webkit-box-shadow: 0 0 0 6px #F15A2B; box-shadow: 0 0 0 2px #F15A2B; }
#average_payments { margin-right: 0; }
#cash_advance { margin-left: 5px; }
#calc-filler { width: 220px; height: 30px; float: left; display: block; margin-right: 5px; }
.total-box { position: relative; width: 150px; height: 30px; line-height: 12px; margin-right: 48px; text-align: center; font-size: 12px; display: block; float: left; }
.calc-disclaimer { line-height: 11px; font-size: 11px; width: 100%; display: block; clear: both; padding-left: 100px; }
.ui-button-text-only .ui-button-text { padding: initial; }
.calculator-container form br { display: none; }
.calc-descs { display: inline-block; width: 220px; padding: 0; }
.calc-descs span { -webkit-border-radius: 50%; -moz-border-radius; border-radius: 50%; padding: 6px 11px; margin-right: 10px; border: 1px solid #949599; }
.triangle-dwn { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #949599; position: absolute; left: 50%; bottom: 6px; margin-left: -3.5px; }