<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>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |