Показать сообщение отдельно
  #2 (permalink)  
Старый 22.08.2017, 20:37
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 203

Классно сделано...

Но по-моему, это обычный калькулятор, просто хорошо стилизованный. Ничего особенного в нем нет.
По событию на элементах формы запускается функция, которая делает расчеты и выводит результат. Грубо говоря, просто подставляет выбранные пользователем множители в свои формулы.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>

	<style>
		#result{
			width: 100px;
			height: 20px;
			border:1px solid #999;
		}
	</style>
</head>
<body>
	
Толщина доски(см):
<input id='thickness' type="text" value='5' oninput = 'myFunc()'><br>
Ширина доски(см):
<input id='length' type="text" value='20' oninput = 'myFunc()'><br>
Длина доски(см):
<input id='height' type="text" value='300' oninput = 'myFunc()'><br>
Количество досок(шт):
<input id='quantity' type="text" value='2' oninput = 'myFunc()'><br>
Итоговый результат в кубометрах:
<div id="result" >0.06</div>


<script>
function myFunc(){

var thickness = document.getElementById('thickness').value;
var length = document.getElementById('length').value;
var height = document.getElementById('height').value;
var quantity = document.getElementById('quantity').value;

var div = document.getElementById('result');
var res = ((thickness/100)*(length/100)*(height/100)*quantity).toFixed(2);

div.innerHTML = res;
}

</script>
</body>
</html>

Последний раз редактировалось void(), 22.08.2017 в 20:39.
Ответить с цитированием