Поиск Поддержать!
  2. Процентные калькуляторы

Процентные калькуляторы

На этой странице вы можете быстро выполнить различные расчеты с процентами: найти процент от числа, число по проценту, процентное соотношение, увеличить или уменьшить число на процент, а также сравнить два числа в процентах.

В конце страницы представлен исходный код всех калькуляторов. Вы можете:

  • Использовать его в своих проектах — полностью или частично.
  • Изучить принципы работы — код написан на чистом JavaScript и хорошо прокомментирован.
  • Взять за основу для создания собственных инструментов.

1. Процент от числа

Вычисляет X% от заданного числа. Пример: 20% от 50 = 10

2. Число от процента

Находит число, если известен его процент. Пример: 10 — это 20% от 50

3. Процентное соотношение

Определяет, сколько процентов составляет X от Y. Пример: 5 от 20 = 25%

4. Изменение числа на процент

Увеличивает или уменьшает число на X%. Пример: 100 + 10% = 110; 100 – 10% = 90

5. Разница в процентах

Считает, на сколько процентов X больше/меньше Y. Пример: 150 vs 100 = на 50% больше

Исходный код процентных калькуляторов:

HTML:

  1. <div class="vifed-calculators-container">
  2. 	<h1 class="vifed-title">Процентные калькуляторы</h1>
  3. 	<div class="vifed-intro">
  4. 		На этой странице вы можете быстро выполнить различные расчеты с процентами: найти процент от числа, число по проценту, процентное соотношение, увеличить или уменьшить число на процент, а также сравнить два числа в процентах.
  5. 	</div>
  6.  
  7. 	<!-- 1. Процент от числа -->
  8. 	<div class="vifed-calculator">
  9. 		<h2>1. Процент от числа</h2>
  10. 		<p>Вычисляет X% от заданного числа. <i>Пример: 20% от 50 = 10</i></p>
  11. 		<div class="vifed-input-group">
  12. 			<label>Число:</label>
  13. 			<input type="number" class="vifed-input" id="vifed_num1" placeholder="50" oninput="vifed_checkInputs(1)">
  14. 		</div>
  15. 		<div class="vifed-input-group">
  16. 			<label>Процент (X%):</label>
  17. 			<input type="number" class="vifed-input" id="vifed_percent1" placeholder="20" oninput="vifed_checkInputs(1)">
  18. 		</div>
  19. 		<button id="vifed_calcBtn1" class="vifed-btn" onclick="vifed_calculatePercentageOfNumber()" disabled>Рассчитать</button>
  20. 		<div class="vifed-result-container" id="vifed_resultContainer1" style="display: none;">
  21. 			<div class="vifed-result" id="vifed_result1"></div>
  22. 			<button class="vifed-btn vifed-copy-btn" onclick="vifed_copyResult(1)">Скопировать</button>
  23. 		</div>
  24. 	</div>
  25.  
  26. 	<!-- 2. Число от процента -->
  27. 	<div class="vifed-calculator">
  28. 		<h2>2. Число от процента</h2>
  29. 		<p>Находит число, если известен его процент. <i>Пример: 10 &mdash; это 20% от 50</i></p>
  30. 		<div class="vifed-input-group">
  31. 			<label>Известная часть (Z):</label>
  32. 			<input type="number" class="vifed-input" id="vifed_part2" placeholder="10" oninput="vifed_checkInputs(2)">
  33. 		</div>
  34. 		<div class="vifed-input-group">
  35. 			<label>Процент (X%):</label>
  36. 			<input type="number" class="vifed-input" id="vifed_percent2" placeholder="20" oninput="vifed_checkInputs(2)">
  37. 		</div>
  38. 		<button id="vifed_calcBtn2" class="vifed-btn" onclick="vifed_calculateNumberFromPercentage()" disabled>Рассчитать</button>
  39. 		<div class="vifed-result-container" id="vifed_resultContainer2" style="display: none;">
  40. 			<div class="vifed-result" id="vifed_result2"></div>
  41. 			<button class="vifed-btn vifed-copy-btn" onclick="vifed_copyResult(2)">Скопировать</button>
  42. 		</div>
  43. 	</div>
  44.  
  45. 	<!-- 3. Процентное соотношение -->
  46. 	<div class="vifed-calculator">
  47. 		<h2>3. Процентное соотношение</h2>
  48. 		<p>Определяет, сколько процентов составляет X от Y. <i>Пример: 5 от 20 = 25%</i></p>
  49. 		<div class="vifed-input-group">
  50. 			<label>Часть (X):</label>
  51. 			<input type="number" class="vifed-input" id="vifed_part3" placeholder="5" oninput="vifed_checkInputs(3)">
  52. 		</div>
  53. 		<div class="vifed-input-group">
  54. 			<label>Целое (Y):</label>
  55. 			<input type="number" class="vifed-input" id="vifed_whole3" placeholder="20" oninput="vifed_checkInputs(3)">
  56. 		</div>
  57. 		<button id="vifed_calcBtn3" class="vifed-btn" onclick="vifed_calculatePercentageRatio()" disabled>Рассчитать</button>
  58. 		<div class="vifed-result-container" id="vifed_resultContainer3" style="display: none;">
  59. 			<div class="vifed-result" id="vifed_result3"></div>
  60. 			<button class="vifed-btn vifed-copy-btn" onclick="vifed_copyResult(3)">Скопировать</button>
  61. 		</div>
  62. 	</div>
  63.  
  64. 	<!-- 4. Увеличение/уменьшение на процент -->
  65. 	<div class="vifed-calculator">
  66. 		<h2>4. Изменение числа на процент</h2>
  67. 		<p>Увеличивает или уменьшает число на X%. <i>Пример: 100 + 10% = 110; 100 &ndash; 10% = 90</i></p>
  68. 		<div class="vifed-input-group">
  69. 			<label>Число:</label>
  70. 			<input type="number" class="vifed-input" id="vifed_num4" placeholder="100" oninput="vifed_checkInputs(4)">
  71. 		</div>
  72. 		<div class="vifed-input-group">
  73. 			<label>Процент (X%):</label>
  74. 			<input type="number" class="vifed-input" id="vifed_percent4" placeholder="10" oninput="vifed_checkInputs(4)">
  75. 		</div>
  76. 		<button id="vifed_increaseBtn4" class="vifed-btn" onclick="vifed_increaseNumber()" disabled>Увеличить</button>
  77. 		<button id="vifed_decreaseBtn4" class="vifed-btn" onclick="vifed_decreaseNumber()" disabled>Уменьшить</button>
  78. 		<div class="vifed-result-container" id="vifed_resultContainer4" style="display: none;">
  79. 			<div class="vifed-result" id="vifed_result4"></div>
  80. 			<button class="vifed-btn vifed-copy-btn" onclick="vifed_copyResult(4)">Скопировать</button>
  81. 		</div>
  82. 	</div>
  83.  
  84. 	<!-- 5. Разница в процентах -->
  85. 	<div class="vifed-calculator">
  86. 		<h2>5. Разница в процентах</h2>
  87. 		<p>Считает, на сколько процентов X больше/меньше Y. <i>Пример: 150 vs 100 = на 50% больше</i></p>
  88. 		<div class="vifed-input-group">
  89. 			<label>Первое число (X):</label>
  90. 			<input type="number" class="vifed-input" id="vifed_num5a" placeholder="150" oninput="vifed_checkInputs(5)">
  91. 		</div>
  92. 		<div class="vifed-input-group">
  93. 			<label>Второе число (Y):</label>
  94. 			<input type="number" class="vifed-input" id="vifed_num5b" placeholder="100" oninput="vifed_checkInputs(5)">
  95. 		</div>
  96. 		<button id="vifed_calcBtn5" class="vifed-btn" onclick="vifed_calculatePercentageDifference()" disabled>Рассчитать</button>
  97. 		<div class="vifed-result-container" id="vifed_resultContainer5" style="display: none;">
  98. 			<div class="vifed-result" id="vifed_result5"></div>
  99. 			<button class="vifed-btn vifed-copy-btn" onclick="vifed_copyResult(5)">Скопировать</button>
  100. 		</div>
  101. 	</div>
  102. </div>

CSS:

  1. .vifed - calculators - container {
  2. 	font - family: 'Arial', sans - serif;
  3. 	line - height: 1.6;
  4. 	color: #333;
  5.         max-width: 1000px;
  6.         margin: 0 auto;
  7.         padding: 20px;
  8.         background: # fff;
  9. }
  10. .vifed-title {
  11.         text-align: center;
  12.         color: #444;
  13. }
  14. .vifed-intro {
  15.          text-align: center;
  16.          margin-bottom: 30px;
  17.          color: #666;
  18. }
  19. .vifed - calculator {
  20. 	background: #f9f9f9;
  21. 	border - radius: 8 px;
  22. 	padding: 20 px;
  23. 	margin - bottom: 30 px;
  24. 	box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.05);
  25. }
  26. .vifed - calculator h2 {
  27. 	margin - top: 0;
  28. 	color: #2c3e50;
  29.         border-bottom: 1px solid # eee;
  30. 	padding - bottom: 10 px;
  31. }
  32. .vifed - calculator p {
  33. 	color: #666;
  34.         font-size: 0.95em;
  35. }
  36. .vifed-input, .vifed-btn {
  37.         padding: 10px;
  38.         margin: 5px 0;
  39.         border: 1px solid # ddd;
  40. 	border - radius: 4 px;
  41. 	font - size: 16 px;
  42. }
  43. .vifed - input {
  44. 	width: calc(100 % -22 px);
  45. }
  46. .vifed - btn {
  47. 	background: #3498db;
  48.         color: white;
  49.         border: none;
  50.         cursor: pointer;
  51.         transition: background 0.3s;
  52. }
  53. .vifed-btn:hover {
  54.         background: # 2980 b9;
  55. }
  56. .vifed - btn: disabled {
  57. 	background: #cccccc;
  58. 	cursor: not - allowed;
  59. }
  60. .vifed - result - container {
  61. 	display: flex;
  62. 	align - items: center;
  63. 	gap: 10 px;
  64. 	margin - top: 10 px;
  65. }
  66. .vifed - result {
  67. 	font - weight: bold;
  68. 	padding: 10 px;
  69. 	background: #e8f4fc;
  70. 	border - radius: 4 px;
  71. 	flex - grow: 1;
  72. }
  73. .vifed - copy - btn {
  74. 	background: #2ecc71;
  75.         padding: 10px 15px;
  76. }
  77. .vifed-copy-btn:hover {
  78.         background: # 27 ae60;
  79. }
  80. .vifed - input - group {
  81. 	margin - bottom: 10 px;
  82. }
  83. .vifed - input - group label {
  84. 	display: block;
  85. 	margin - bottom: 5 px;
  86. 	font - weight: bold;
  87. }

JavaScript:

  1. /**
  2.  * Проверяет заполненность полей и активирует/деактивирует кнопки
  3.  * @param {number} calculatorNum - Номер калькулятора (1-5)
  4.  */
  5. function vifed_checkInputs(calculatorNum) {
  6. 	let inputs, button, buttons;
  7. 	switch (calculatorNum) {
  8. 		case 1:
  9. 			inputs = [document.getElementById('vifed_num1'), document.getElementById('vifed_percent1')];
  10. 			button = document.getElementById('vifed_calcBtn1');
  11. 			break;
  12. 		case 2:
  13. 			inputs = [document.getElementById('vifed_part2'), document.getElementById('vifed_percent2')];
  14. 			button = document.getElementById('vifed_calcBtn2');
  15. 			break;
  16. 		case 3:
  17. 			inputs = [document.getElementById('vifed_part3'), document.getElementById('vifed_whole3')];
  18. 			button = document.getElementById('vifed_calcBtn3');
  19. 			break;
  20. 		case 4:
  21. 			inputs = [document.getElementById('vifed_num4'), document.getElementById('vifed_percent4')];
  22. 			buttons = [
  23. 				document.getElementById('vifed_increaseBtn4'),
  24. 				document.getElementById('vifed_decreaseBtn4')
  25. 			];
  26. 			break;
  27. 		case 5:
  28. 			inputs = [document.getElementById('vifed_num5a'), document.getElementById('vifed_num5b')];
  29. 			button = document.getElementById('vifed_calcBtn5');
  30. 			break;
  31. 	}
  32. 	// Для калькулятора 4 (у которого две кнопки)
  33. 	if (calculatorNum === 4) {
  34. 		const allFilled = inputs.every(input => input.value.trim() !== '');
  35. 		buttons.forEach(btn => {
  36. 			btn.disabled = !allFilled;
  37. 		});
  38. 		return;
  39. 	}
  40. 	// Для остальных калькуляторов
  41. 	const allFilled = inputs.every(input => input.value.trim() !== '');
  42. 	button.disabled = !allFilled;
  43. }
  44. /**
  45.  * 1. Вычисляет процент от числа
  46.  */
  47. function vifed_calculatePercentageOfNumber() {
  48. 	const num = parseFloat(document.getElementById('vifed_num1').value);
  49. 	const percent = parseFloat(document.getElementById('vifed_percent1').value);
  50. 	const result = (num * percent) / 100;
  51. 	document.getElementById('vifed_result1').textContent = `${percent}% от ${num} = ${result}`;
  52. 	document.getElementById('vifed_resultContainer1').style.display = 'flex';
  53. }
  54. /**
  55.  * 2. Находит число по известному проценту
  56.  */
  57. function vifed_calculateNumberFromPercentage() {
  58. 	const part = parseFloat(document.getElementById('vifed_part2').value);
  59. 	const percent = parseFloat(document.getElementById('vifed_percent2').value);
  60. 	const result = (part * 100) / percent;
  61. 	document.getElementById('vifed_result2').textContent = `${part} &mdash; это ${percent}% от ${result}`;
  62. 	document.getElementById('vifed_resultContainer2').style.display = 'flex';
  63. }
  64. /**
  65.  * 3. Вычисляет процентное соотношение
  66.  */
  67. function vifed_calculatePercentageRatio() {
  68. 	const part = parseFloat(document.getElementById('vifed_part3').value);
  69. 	const whole = parseFloat(document.getElementById('vifed_whole3').value);
  70. 	const result = (part / whole) * 100;
  71. 	document.getElementById('vifed_result3').textContent = `${part} от ${whole} = ${result.toFixed(2)}%`;
  72. 	document.getElementById('vifed_resultContainer3').style.display = 'flex';
  73. }
  74. /**
  75.  * 4. Увеличивает число на процент
  76.  */
  77. function vifed_increaseNumber() {
  78. 	const num = parseFloat(document.getElementById('vifed_num4').value);
  79. 	const percent = parseFloat(document.getElementById('vifed_percent4').value);
  80. 	const result = num * (1 + percent / 100);
  81. 	document.getElementById('vifed_result4').textContent = `${num} + ${percent}% = ${result}`;
  82. 	document.getElementById('vifed_resultContainer4').style.display = 'flex';
  83. }
  84. /**
  85.  * 4. Уменьшает число на процент
  86.  */
  87. function vifed_decreaseNumber() {
  88. 	const num = parseFloat(document.getElementById('vifed_num4').value);
  89. 	const percent = parseFloat(document.getElementById('vifed_percent4').value);
  90. 	const result = num * (1 - percent / 100);
  91. 	document.getElementById('vifed_result4').textContent = `${num} &ndash; ${percent}% = ${result}`;
  92. 	document.getElementById('vifed_resultContainer4').style.display = 'flex';
  93. }
  94. /**
  95.  * 5. Считает разницу между числами в процентах
  96.  */
  97. function vifed_calculatePercentageDifference() {
  98. 	const numA = parseFloat(document.getElementById('vifed_num5a').value);
  99. 	const numB = parseFloat(document.getElementById('vifed_num5b').value);
  100. 	const difference = ((numA - numB) / numB) * 100;
  101. 	const text = difference >= 0 ? `на ${difference.toFixed(2)}% больше` : `на ${Math.abs(difference).toFixed(2)}% меньше`;
  102. 	document.getElementById('vifed_result5').textContent = `${numA} vs ${numB} = ${text}`;
  103. 	document.getElementById('vifed_resultContainer5').style.display = 'flex';
  104. }
  105. /**
  106.  * Копирует результат в буфер обмена
  107.  * @param {number} calculatorNum - Номер калькулятора (1-5)
  108.  */
  109. function vifed_copyResult(calculatorNum) {
  110. 	const resultText = document.getElementById(`vifed_result${calculatorNum}`).textContent;
  111. 	navigator.clipboard.writeText(resultText).then(() => {
  112. 		alert('Результат скопирован!');
  113. 	}).catch(err => {
  114. 		console.error('Ошибка копирования: ', err);
  115. 	});
  116. }
калькуляторыматематикапроцентыонлайн-инструментыисходный код
Нет комментариев. Ваш будет первым!

© При копировании материалов ссылка на источник желательна!

Материалы, размещённые на сайте, носят рекомендательный характер.
Посещая этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.