JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<title>Рассчёт напряжения и мощности для LG HG2</title>
</head>
<body>
<h1>Как не взорваться на аккумуляторах <a target="_blank" href="https://cdn.shopify.com/s/files/1/0674/3651/files/lg-hg2-spec-sheet.pdf">LG HG2</a></h1>
<p>Калькулятор для Joytech ULTEX T80. Если вы забрели сюда случайно - не используйте этот калькулятор для мех-модов! Он не для этого (<a target="_blank" href="http://www.ecigtalk.ru/forum/f47/t189867-p4.html#post12860610">предыстория</a>).</p>
<form action="#">
<label for="oHm">Сопротивление спирали (рекомендовано 0.3Ω - 0.4Ω):</label>
<br>
<input id="oHm" type="text">
</form>
<br>
<div id="result"></div>
</body>
</html>
CSS
body {
font-family: 'Ubuntu', sans-serif;
}
td {
padding: 5px;
margin: 0;
outline: 0;
border: 0;
border-bottom: 1px solid #ddd;
}
table {
border-collapse: collapse;
}
.first-td {
padding-right: 30px;
}
input {
border: 1px solid #ddd;
padding: 10px 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
margin: 5px 1px 3px 0px;
}
input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 0.8);
border: 1px solid rgba(81, 203, 238, 0.8);
}
h4 {
margin: 0;
}
h1 {
font-size: 24px;
}
#result-label {
display: inline-block;
margin-bottom: 15px;
text-decoration: underline dotted;
}
hr {
border: 0;
border-top: 1px solid #444;
border-bottom: 1px solid #ddd;
outline: 0;
}
JavaScript
jQuery.fn.ForceNumericOnly =
function(var_type) {
return this.each(function() {
$(this).keydown(function(e) {
var key = e.charCode || e.keyCode || 0;
//alert(key);
// Разрешаем backspace, tab, delete, стрелки, обычные цифры и цифры на дополнительной клавиатуре
return (
key == 8 ||
key == 9 ||
key == 46 ||
(key == 188 && (var_type == 'double')) ||
(key == 190 && (var_type == 'double')) ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105) ||
(e.ctrlKey==true && (e.which == 90 || e.which == 88 || e.which == 67 || e.which == 86 || e.which == 65)) // Ctrl+Z, Ctrl+X, Ctrl+C, Ctrl+V, Ctrl+A
);
});
$(this).keyup(function(e) {
if (var_type == 'int') {
var m = $(this).val().replace(/[^\d]/ig, '');
} else {
var m = $(this).val().replace(/[^\d.,]/ig, '');
}
$(this).val(m);
});
$(this).on('paste', function(e) {
var n = $(this);
setTimeout(function () {
if (var_type == 'int') {
var m = n.val().replace(/[^\d]/ig, '');
} else {
var m = n.val().replace(/[^\d.,]/ig, '');
}
n.val(m);
}, 100);
});
});
};
function math_this_shit() {
var Ohm = parseFloat($('input').val());
if (Ohm) {
var V, W = 0;
// начинаем с 10 ампер и идём до 20
var A = 10;
var result = '';
var first,last = 0;
while (A < 21) {
// получаем вольты
V = Math.round(A * Ohm * 100) / 100;
// получаем ватты
W = Math.round(A * V);
if (A == 10) {
first = W;
}
if (A == 20) {
last = W;
}
result = result+ '<tr><td class="first-td">'+A+'A * '+Ohm+'Ω = '+V+'V</td><td>'+V+'V * '+A+'A = '+W+'W</td></tr>';
A++;
}
$('#result').html('<hr><h3>Допустимые значения: '+first+'W - '+last+'W</h3><br><span...