JSDM

HTML

60
 
1
<body>
2
  <div id="left">
3
    <h2>PURCHASE PRICE</h2>
4
    <div style="background: white; height: 39px;">
5
      <input width="60px" id="range" type="text" value="$100,000" onfocus="this.select(); this.selAll=1;" onkeyup="changedPP(this.value)">
6
    </div>
7
    <input type="range" min="30000" max="1000000" step="5000" value="100000" onchange="showPurchase(this.value)" />
8
  </div>
9
​
10
  <div id="left">
11
    <h2>DOWN PAYMENT</h2>
12
    <div>
13
      <div style="background: white; height: 39px;width: 30%;float:left;">
14
        <input id="range2" type="text" value="15 %" onkeyup="changedDP(this.value)" onchange="focusoutDP(this.value)">
15
      </div>
16
      <div style="background: white; height: 39px;width: 65%;float:right;">
17
        <input id="range3" type="text" value="$4,500" onfocus="this.select(); this.selAll=1;" onkeyup="changedDPV(this.value)">
18
      </div>
19
    </div>
20
    <input type="range" min="1" max="100" value="15" onchange="showDownPay(this.value)" />
21
  </div>
22
  <br clear="left"/>
23
​
24
  <div id="left">
25
    <h2>MORTGAGE TERM</h2>
26
​
27
    <div style="margin-top:25px;">
28
      <div style="text-align:left;width:120px;max-width:120px;display:inline;">
29
        <div style="margin-top:-5px;float:left;margin-right:10px;">
30
          <input type="radio" onchange="verify()" class="styled" checked="checked" id="m1" name="mortgage" value="30"><label id="label30" for="m1"></label>
31
        </div><span style="color:white;float:left;">30 year</span>
32
      </div>
33
​
34
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
35
      <div style="text-align:left;max-width:120px;display:inline;">
36
        <div style="margin-top:-5px;float:left;margin-left:25px;margin-right:10px;">
37
          <input type="radio" onchange="verify()" class="styled" id="m2" name="mortgage" value="15"><label id="label15" for="m2"></label>
38
        </div><span style="color:white;float:left;">15 year</span>
39
      </div>
40
      </div>
41
  </div>
42
​
43
  <div id="left">
44
    <h2>INTEREST RATE</h2>
45
    <div style="background: white; height: 39px;">
46
      <input id="interest" type="text" value="4 %" onkeypress="enterCheck()" onchange="focusoutIR(this.value)">
47
    </div>
48
    <input type="range" min="1.0" max="10.0" value="4" step=".5" onchange="changedIR(this.value)" />
49
    <br/><br/><br/>
50
  </div>
51
  <br clear="left"/>
52
​
53
  <div id="calc">
54
    <span style="color:white;">Estimated Monthly Payment:</span>
55
  </div>
56
​
57
  <div id="bot">
58
    <span id="range4" style="color:white;">$121.74</span>
59
  </div>
60
</body>

CSS

xxxxxxxxxx
221
 
1
body {
2
3
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAK0lEQVQYV2NkIBIwEqmOgXSF5x+/+I/NdENZCbBhcBMHUCEh35Pua0ImAgBUjBALQ39LPQAAAABJRU5ErkJggg==) repeat;
4
  height:100%;
5
  margin: 0;
6
  padding: 0;
7
  height: 600px;
8
​
9
  text-align: left;
10
  margin:50px 50px;
11
  padding: 0;
12
  font-size: 16px;
13
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
14
}
15
h2 {
16
  color: white;
17
  font-size:16px;
18
  font-weight: bold;
19
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
20
  margin-top: 10px;
21
  margin-bottom: 15px;
22
  letter-spacing: 1px;
23
}
24
#container {
25
  margin-left: 15%;
26
  padding: 0;
27
  width: 1090;
28
  text-align: center;
29
}
30
#left {
31
  min-width: 262px;
32
  height: 110px;
33
  /* background-color: #313c4c; */
34
  background-color: rgba(49,60,76,.85);
35
  padding: 10px 15px 25px 15px;
36
  margin: 0px 13px 13px 0;
37
  display: inline;
38
  float: left;
39
  position: relative;
40
  text-align: center;
41
}
42
#bot {
43
  min-width: 267px;
44
  background: #768393;
45
  padding: 10px 15px 0 10px;
46
  margin-left: 13px;
47
  display: inline;
48
  float: left;
49
  position: relative;
50
  text-align: left;
51
  height: 35px;
52
  font-size: 22px;
53
}
54
#calc {
55
  min-width: 282px;
56
  background-color: rgba(49,60,76,.85);
57
  padding: 10px 0 0 10px;
58
  margin: 0px;
59
  display: inline;
60
  float: left;
61
  position: relative;
62
  text-align: left;
63
  height: 35px;
64
  font-size: 18px;
65
}
66
span {
67
   color: #e0e0e0;
68
   font: bold 20px/40px;
69
   font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
70
   letter-spacing: 1px;
71
   padding: 2px;
72
}
73
#wrapper {
74
  clear: both;
75
  min-width: 680px;
76
  width: 40%;
77
  margin: auto;
78
  text-align: center;
79
}
80
input[type="radio"] {
81
    display: none;
82
}
83
input[type="radio"] + label
84
{
85
  background-color: #768393 !important;
86
  border-radius: 10px;
87
  -moz-border-radius:10px;
88
  -webkit-border-radius:10px;
89
    /*padding-top: 5px;*/
90
    height: 31px;
91
    width: 31px;
92
    display: inline-block;
93
    padding: 0 0 0 0px;
94
}
95
input[type="radio"]:checked + label
96
{
97
  background-color: #fff !important;
98
  border-radius: 30px;
99
  -moz-border-radius:30px;
100
  -webkit-border-radius:30px;
101
    height: 31px;
102
    width: 31px;
103
    display: inline-block;
104
    padding: 0 0 0 0px;
105
  
106
}
107
#range {
108
  text-align:center;
109
  color: #282828;
110
  width:240px;
111
  border:0;
112
  font-size: 18px;
113
  height:30px;
114
  letter-spacing: 1px;
115
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
116
}
117
#range2 {
118
  text-align:center;
119
  height:30px;
120
  color: #282828;
121
  width:50px;
122
  border:0;
123
  font-size: 18px;
124
  letter-spacing: 1px;
125
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
126
}
127
#range3 {
128
  text-align:center;
129
  height:30px;
130
  color: #282828;
131
  width:150px;
132
  border:0;
133
  font-size: 18px;
134
  letter-spacing: 1px;
135
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
136
}
137
​
138
#range4 { letter-spacing: 3px;
139
  height:30px;
140
​
141
}
142
​
143
#interest {
144
  height:30px;
145
  color: #282828;
146
  text-align:center;
147
  width:70px;
148
  border:0;
149
  font-size: 18px;
150
  letter-spacing: 1px;
151
  font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
152
}
153
    /*slider*/
154
.slider {
155
  width: 150px;
156
  margin: 100px auto;
157
}
158
input[type="range"] {
159
  -webkit-appearance: none;
160
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
161
  width: 100%;
162
  height: 10px;
163
  margin: 15px 0 0 0;
164
  border: none;
165
  padding: 0px;
166
  border-radius: 0px;
167
  background: #768393;
168
  box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
169
  -webkit-box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
170
  outline: none; /* no focus outline */
171
}
172
input[type="range"]::-moz-range-track {
173
  border: inherit;
174
  background: transparent;
175
}
176
input[type="range"]::-ms-track {
177
  border: inherit;
178
  color: transparent; /* don't drawn vertical reference line */
179
  background: transparent;
180
}
181
input[type="range"]::-ms-fill-lower,
182
input[type="range"]::-ms-fill-upper {
183
  background: transparent;
184
}
185
input[type="range"]::-ms-tooltip {
186
  display: none;
187
}
188
    /* thumb */
189
input[type="range"]::-webkit-slider-thumb {
190
  -webkit-appearance: none;
191
  width: 18px;
192
  height: 18px;
193
  border: none;
194
  border-radius: 12px;
195
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b6c7ca), color-stop(100%, #245e8f)); /* android <= 2.2 */
196
  background-image: -webkit-linear-gradient(top , #ffffff 100%, #ffffff 100%); /* older mobile safari and android > 2.2 */;
197
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
198
}
199
input[type="range"]::-moz-range-thumb {
200
  width: 18px;
201
  height: 18px;
202
  border: none;
203
  border-radius: 12px;
204
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
205
}
206
input[type="range"]::-ms-thumb {
207
  width: 18px;
208
  height: 18px;
209
  border-radius: 12px;
210
  border: 0;
211
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
212
}
213
input[type='number'] {
214
    -moz-appearance:textfield;  /*for firefox*/
215
}
216
input::-webkit-outer-spin-button,
217
input::-webkit-inner-spin-button {
218
    /* display: none; <- Crashes Chrome on hover */
219
    -webkit-appearance: none;
220
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
221
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

118
 
1
$(document).ready(function() {
2
  $('input[type="text"]').live('focus', function() {
3
      var inp = this;
4
      //alert("HI");
5
      setTimeout(function() {
6
          inp.select();
7
      }, 1);
8
  });
9
​
10
});
11
​
12
function numberWithCommas(x) {
13
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
14
}
15
function showPurchase(newValue) {
16
  var pp = newValue
17
  document.getElementById("range").value = "$"+numberWithCommas(pp);
18
  var dp = document.getElementById("range2").value;
19
  document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));  //no decimals
20
  verify();
21
}
22
function showDownPay(newValue) {
23
  var pp;
24
  var dp = newValue;
25
  pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);  //remove all special chars
26
  document.getElementById("range2").value = dp+" %";
27
  document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));
28
  document.getElementById("range").value = "$"+numberWithCommas(pp);
29
  verify();
30
}
31
function changedPP(newValue) {
32
    var pp = parseInt(newValue.toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
33
    if (isNaN(pp)) {
34
        pp = "0";
35
    }
36
    document.getElementById("range").value = "$"+numberWithCommas(pp);
37
    var dp = document.getElementById("range2").value;
38
    document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));    //no decimals
39
    verify();
40
}
41
function changedDP(newValue) {
42
  //alert("changedDP");
43
  var dp = newValue;
44
  var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
45
​
46
  document.getElementById("range2").value = dp;
47
  document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));
48
  verify();
49
}
50
function focusoutDP(newValue) {
51
  //alert("focusoutDP");
52
  var dp = newValue.replace(/%/gi,'');
53
    if (isNaN(dp)) {
54
        dp = "0";
55
        document.getElementById("range3").value = "$0";
56
    }
57
  document.getElementById("range2").value = dp+" %";
58
  verify();
59
}
60
function changedDPV(newValue) {
61
    var dpv = parseInt(newValue.toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
62
    var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
63
    if (isNaN(dpv)) {
64
        dpv = "0";
65
    }
66
    document.getElementById("range2").value = numberWithCommas(((dpv/pp)*100).toFixed(0))+" %";
67
    document.getElementById("range3").value = "$"+numberWithCommas(dpv);
68
    verify();
69
}
70
function changedIR(newValue) {
71
  var ir = newValue;
72
  document.getElementById("interest").value = ir+" %";
73
  verify();
74
}
75
function focusoutIR(newValue) {
76
  var ir = newValue.replace(/%/gi,'');
77
  document.getElementById("interest").value = ir+" %";
78
  verify();
79
}
80
function calculate() {
81
  var mt;
82
  if (document.getElementById('m1').checked) {
83
    mt = parseInt(document.getElementById('m1').value,10);
84
  } else if(document.getElementById('m2').checked) {
85
    mt = parseInt(document.getElementById('m2').value,10);
86
  }
87
  var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
88
  var dpv = parseInt((document.getElementById("range3").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
89
  var ir = parseFloat(document.getElementById("interest").value,10);
90
}
91
function show() {
92
  var mt;
93
  if (document.getElementById('m1').checked) {
94
    mt = parseInt(document.getElementById('m1').value,10);
95
  } else if(document.getElementById('m2').checked) {
96
    mt = parseInt(document.getElementById('m2').value,10);
97
  }
98
  var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
99
  var dpv = parseInt((document.getElementById("range3").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
100
  var ir = parseFloat(document.getElementById("interest").value,10);
101
  var princ = pp - dpv;
102
  var intRate = (ir/100)/12;
103
    var months = mt * 12;
104
  document.getElementById("range4").innerHTML = "$"+numberWithCommas((((princ*intRate)/(1-Math.pow(1+intRate,(-1*months)))*100)/100).toFixed(2));
105
}
106
function verify() {
107
  if(document.getElementById("interest").value.trim() != "") {
108
    document.getElementById("calc").disabled = false;
109
    show();
110
  } else {
111
    document.getElementById("calc").disabled = true;
112
  }
113
}
114
function enterCheck() {
115
  if(characterCode == 13) {
116
    show();
117
  }
118
}
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................