贷款计算器 - 踏得网

通过下方的滑动器调整价格、利率，自动计算月付款。

calculator

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1765
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
	$('input[type="text"]').live('focus', function() {
	    var inp = this;
	    alert("HI");
	    setTimeout(function() {
	        inp.select();
	    }, 1);
	});

});

编译

CSS

body {
  background: transparent;
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; }

h2 {
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
  margin-top: 10px;
  margin-bottom: 15px;
  letter-spacing: 1px; }

#container {
  margin-left: 15%;
  padding: 0;
  width: 1090;
  text-align: center; }

#left {
  /* background-color: #313c4c; */
  min-width: 262px;
  height: 110px;
  background-color: rgba(49, 60, 76, .85);
  padding: 10px 15px 25px 15px;
  margin: 0px 13px 13px 0;
  display: inline;
  float: left;
  position: relative;
  text-align: center; }

#bot {
  min-width: 280px;
  background: #cd252e;
  padding: 10px 15px 0 10px;
  margin: 0px;
  display: inline;
  float: left;
  position: relative;
  text-align: left;
  height: 35px;
  font-size: 22px; }

#calc {
  min-width: 282px;
  background: #a8000d;
  padding: 10px 0 0 10px;
  margin: 0px;
  display: inline;
  float: left;
  position: relative;
  text-align: left;
  height: 35px;
  font-size: 18px; }

span {
  color: #e0e0e0;
  font: bold 20px/40px;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
  letter-spacing: 1px;
  padding: 2px; }

#wrapper {
  clear: both;
  min-width: 680px;
  width: 40%;
  margin: auto;
  text-align: center; }

input[type="radio"] {
  display: none; }

input[type="radio"] + label {
  /*padding-top: 5px;*/
  background: url(img/circle.png) no-repeat;
  background-position: left bottom;
  height: 31px;
  width: 33px;
  display: inline-block;
  padding: 0 0 0 0px; }

input[type="radio"]:checked + label {
  background: url(img/circlefill.png) no-repeat;
  background-position: left bottom;
  height: 31px;
  width: 33px;
  display: inline-block;
  padding: 0 0 0 0px; }

#range {
  text-align: center;
  color: #282828;
  width: 240px;
  border: 0;
  font-size: 18px;
  height: 30px;
  letter-spacing: 1px;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; }

#range2 {
  text-align: center;
  height: 30px;
  color: #282828;
  width: 50px;
  border: 0;
  font-size: 18px;
  letter-spacing: 1px;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; }

#range3 {
  text-align: center;
  height: 30px;
  color: #282828;
  width: 150px;
  border: 0;
  font-size: 18px;
  letter-spacing: 1px;
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; }

#range4 {
  letter-spacing: 3px;
  height: 30px; }

#interest {
  height: 30px;
  color: #282828;
  text-align: center;
  width: 70px;
  border: 0;
  font-size: 18px;
  letter-spacing: 1px;
  /*slider*/
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; }

.slider {
  width: 150px;
  margin: 100px auto; }

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 10px;
  margin: 15px 0 0 0;
  border: none;
  padding: 0px;
  border-radius: 0px;
  background: #768393;
  box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
  /* no focus outline */
  -webkit-box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
  outline: none; }

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent; }

input[type="range"]::-ms-track {
  /* don't drawn vertical reference line */
  border: inherit;
  color: transparent;
  background: transparent; }

input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper {
  background: transparent; }

input[type="range"]::-ms-tooltip {
  /* thumb */
  display: none; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: none;
  /* android <= 2.2 */
  border-radius: 12px;
  /* older mobile safari and android > 2.2 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b6c7ca), color-stop(100%, #245e8f));
  /* W3C */
  background-image: -webkit-linear-gradient(top, #fff 100%, #fff 100%);
  background-image: linear-gradient(to bottom, #fff 100%, #fff 100%); }

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  /* W3C */
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #fff 100%, #fff 100%); }

input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 12px;
  /* W3C */
  border: 0;
  background-image: linear-gradient(to bottom, #fff 100%, #fff 100%); }

input[type='number'] {
  /*for firefox*/
  -moz-appearance: textfield; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  /* <-- Apparently some margin are still there even though it's hidden */
  -webkit-appearance: none;
  margin: 0; }

HTML

<body>

<div id="left">
		<h2>PURCHASE PRICE</h2>
		<div style="background: white; height: 39px;">
			<input width="60px" id="range" type="text" value="$100,000" onfocus="this.select(); this.selAll=1;" onkeyup="changedPP(this.value)">
		</div>
		<input type="range" min="30000" max="1000000" step="5000" value="100000" onchange="showPurchase(this.value)" />
	</div>

<div id="left">
		<h2>DOWN PAYMENT</h2>
		<div>
			<div style="background: white; height: 39px;width: 30%;float:left;">
				<input id="range2" type="text" value="15 %" onkeyup="changedDP(this.value)" onchange="focusoutDP(this.value)">
			</div>
			<div style="background: white; height: 39px;width: 65%;float:right;">
				<input id="range3" type="text" value="$4,500" onfocus="this.select(); this.selAll=1;" onkeyup="changedDPV(this.value)">
			</div>
		</div>
		<input type="range" min="1" max="100" value="15" onchange="showDownPay(this.value)" />
	</div>
	<br clear="left"/>

<div id="left">
		<h2>MORTGAGE TERM</h2>

<div id="left">
		<h2>INTEREST RATE</h2>
		<div style="background: white; height: 39px;">
			<input id="interest" type="text" value="4 %" onkeypress="enterCheck()" onchange="focusoutIR(this.value)">
		</div>
		<input type="range" min="1.0" max="10.0" value="4" step=".5" onchange="changedIR(this.value)" />
		<br/><br/><br/>
	</div>
	<br clear="left"/>

<div id="calc">
		<span style="color:white;">Estimated Monthly Payment:</span>
	</div>

</body>

通过下方的滑动器调整价格、利率，自动计算月付款。

calculator

编辑器支持Emmet

快捷键

通过下方的滑动器调整价格、利率，自动计算月付款。

calculator

HTML5一款暗蓝色的计算器界面设计

Vue.js实现的基础计算器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：