Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
td select, td input {
  width: 150px;
}
​
#diagram td {
  vertical-align: bottom;
  text-align: center;
  padding: 10px;
}
#diagram div {
  margin: auto;
}
</style>
</head>
<body>
​
​
Калькулятор процентов, из расчёта 12% годовых.
<form name="calculator">
<table>
  <tr>
  <td>Сумма</td>
  <td><input name="money" type="text" value="10000"></td>
  </tr>
  <tr>
  <td>Срок в месяцах</td>
  <td>
    <select name="months">
      <option value="3">3 (минимум)</option>
      <option value="6">6 (полгода)</option>
      <option value="12" selected>12 (год)</option>
      <option value="18">18 (1.5 года)</option>
      <option value="24">24 (2 года)</option>
      <option value="30">30 (2.5 года)</option>
      <option value="36">36 (3 года)</option>
    </select>
  </td>
  </tr>
  <tr>
  <td>С капитализацией</td>
  <td><input name="capitalization" type="checkbox"></td>
  </tr>
</table>
​
​
</form>
​
​
<table id="diagram">
<tr>
<th>Было:</th>
<th>Станет:</th>
</tr>
<tr>
<th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td>
<div style="background: red;width:40px;height:100px"></div>
</td>
<td>
<div style="background: green;width:40px;height:0" id="height-after"></div>
</td>
</table>
​
<script>
// вспомогательная функция для получения символа из события keypress
// (вдруг понадобится))
function getChar(event) {
  if (event.which == null) {
    if (event.keyCode < 32) return null;
    return String.fromCharCode(event.keyCode) // IE
  }
​
  if (event.which!=0 && event.charCode!=0) {
    if (event.which < 32) return null;
    return String.fromCharCode(event.which)   // остальные
  }
​
  return null; // специальная клавиша
}
​
// ваш код...
​
</script>
​
​
</body>
</html>
​
​
 
var form = document.forms.calculator;
var money = form.elements.money;
var cash = money.value;
var months = form.elements.months;
var cap = form.elements.capitalization;
​
var before = document.getElementById('money-before');
var after = document.getElementById('money-after');
var afterDiag = document.getElementById('height-after');
​
function calculate() {
  if (cash.charCodeAt(0) == 48) cash = cash.slice(1, cash.length);
  before.innerHTML = cash;
  
  if (cap.checked) {
    after.innerHTML = Math.round(cash * Math.pow(1.01, months.value));
  }
  else { 
    after.innerHTML = Math.round(+cash + cash * 0.01 * months.value);
  }
  afterDiag.style.height = Math.round(after.innerHTML*100/cash) + 'px'; 
}
​
​
money.onkeypress = function(e) {
  var isAllowed = (e.which>=48 && e.which<=57) || e.which == 8 || e.which == 17 || e.which == 18 || e.keyCode >= 37 && e.keyCode <= 40;
  if(!isAllowed && !e.ctrlKey && !e.altKey) return false;
}; 
​
money.onpaste = function(e) {
  e.preventDefault();
};
​
calculate();
​
form.addEventListener('change', calculate);
form.elements.money.addEventListener('input', calculate);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Asasaypro
0viewers