Найти процент от числа

@wovancool · Регистрация: 13.01.2015

Студворк — интернет-сервис помощи студентам

Всем снова привет. В js соображаю туго и поэтому не могу обойтись без помощи. По форуму искал, такого не нашел.
Дано, форма куда вписывается число, вписываем число и получаем число в процентах, далее еще одно значение в процентах.
Чтобы было понятно опишу как это вижу я.
Вписываем сумму 1000
Тут отображаем процент, например 3 - получаем 30
Тут еще один процент к примеру 5 - получаем 50
И тут всю введенную сумму с процентами. Получаем 1080
В общем как-то так. Спасибо заранее

Qwerty_Wasd · 06.05.2018, 18:29

Я все чаще, находясь на этом форуме, понимаю, что где-то в своей жизни я потерял письмо от Хогвардса.

Песочница

HTML5
1
2
3
4
5
6
7
8
<p>Число</p>
<input class="number" type="number"/>
<p>Процент 1</p>
<input class="perc-one" type="number"/>
<p>Процент 2</p>
<input class="perc-two" type="number"/><br/><br/>
<button class="bt-result">Посчитать</button><br/><br/>
<p class="result">Итого</p>

CSS
1
2
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
p{font-weight:bolder}

JavaScript
1
2
3
document.querySelector('.bt-result').addEventListener('click',function(){
  document.querySelector('.result').innerText+=" "+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*(parseFloat(document.querySelector('.perc-one').value)/100))+(parseFloat(document.querySelector('.number').value)*(parseFloat(document.querySelector('.perc-two').value)/100))).toFixed(2)
})

@wovancool · 06.05.2018, 18:51 **[ТС]**

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

HTML5
1
2
3
4
5
6
7
8
<p>Число</p>
<p class="number"> Сюда пишем к примеру 10000
 к примеру я поставил в исходниках 3%
<p class="perc-one">Процент 1</p> тут отображается результат 10300
тут я поставил к примеру 2%
<p class="perc-two">Процент 2</p>результат уже 10500
<button class="bt-result">Посчитать</button><br/><br/>
<p class="result">Итого</p>

Если могу я попросить еще раз о правке, буду благодарен за Ваши знания)

Qwerty_Wasd · 06.05.2018, 19:07

wovancool,

Сообщение от wovancool

но немного не так

и не мудрено. Посмотрите на свое предыдущее описание.

Сообщение от wovancool

Если могу я попросить еще раз о правке

можете, только вот я до сих пор не понял, что

Сообщение от wovancool

Проценты вставляются мной в исходник

что за исходник? Где он?

Добавлено через 1 минуту
Покажите куда и как Вы вставляете.

@wovancool · 06.05.2018, 19:15 **[ТС]**

Ошибся, немного не так написал. Но я вообще думал, что эти проценты прописываются все в тот же js. Не так?

Qwerty_Wasd · 06.05.2018, 19:20

Сообщение от wovancool

что эти проценты прописываются все в тот же js. Не так?

ну можно и так. Итак 2% = 0,02; 3%=0.03
Смотрим в => песочница

HTML5
1
2
3
4
5
<p>Число</p>
<input class="number" type="number"/><br/><br/>
<p class="perc-one">Процент 1</p><br/>
<p class="perc-two">Процент 2</p><br/>
<button class="bt-result">Посчитать</button>

CSS
1
2
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
p{font-weight:bolder}

JavaScript
1
2
3
4
document.querySelector('.bt-result').addEventListener('click',function(){
  document.querySelector('.perc-one').innerText="Процент 1 "+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03)).toFixed(2);
  document.querySelector('.perc-two').innerText="Процент 2 "+((parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03))+(parseFloat(document.querySelector('.number').value)*0.02)).toFixed(2);
})

@wovancool · 06.05.2018, 19:23 **[ТС]**

Да, вот именно так, спасибо. А никак не сделать подсчет без кнопки? То есть вводишь и обновляется в прямом эфире так сказать
И еще нет общей суммы теперь)

Qwerty_Wasd · 06.05.2018, 19:25

wovancool, ахахахах, можно

HTML5
1
2
3
4
<p>Число</p>
<input class="number" type="number"/><br/><br/>
<p class="perc-one">Процент 1</p><br/>
<p class="perc-two">Процент 2</p>

JavaScript
1
2
3
4
document.querySelector('.number').addEventListener('input',function(){
  document.querySelector('.perc-one').innerText="Процент 1 "+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03)).toFixed(2);
  document.querySelector('.perc-two').innerText="Процент 2 "+((parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03))+(parseFloat(document.querySelector('.number').value)*0.02)).toFixed(2);
})

@wovancool · 06.05.2018, 19:29 **[ТС]**

Да, выглядит смешно, но я очень чуть-чуть понимаю в js) Чуть лучше php получается, намного лучше ориентируюсь в css, html. В первом примере есть введенная с процентами сумма в итоге, здесь только проценты, в последний раз можно правку?)

upd туплю, тут могу и сам справиться)

Qwerty_Wasd · 06.05.2018, 19:31

wovancool,

Сообщение от wovancool

в последний раз можно правку

чтобы сумма итого была?

@wovancool · 06.05.2018, 19:33 **[ТС]**

Все все, итого и так уже есть, она в проценте 2. А за что отвечает

CSS
1
*,*:after,*:before

Я так понимаю на все тело? У меня в меню есть after и before, и оно отображается не корректно.

Qwerty_Wasd · 06.05.2018, 19:38

wovancool, вот эта строчка у меня

CSS
1
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}

минимизированная замена normalize\reset. Использую ее только для примеров. В реале ее лучше не применять. Потому как перебор всех элементов(селектор *), сильно грузит страницу. Если мешает можно убрать.

@wovancool · 06.05.2018, 19:40 **[ТС]**

Хорошо. Спасибо, все супер прямо как хотел и даже не думал, что напишут с нуля да так быстро) А можно узнать где Вы учились веб программированию?

Qwerty_Wasd · 06.05.2018, 19:44

Вдруг кому понадобиться - песочница

HTML5
1
2
3
4
5
<p>Число</p>
<input class="number" type="number"/><br/><br/>
<p class="perc-one">Процент 1</p><br/>
<p class="perc-two">Процент 2</p><br/>
<p class="result">Итого(Число+Процент 1+Процент 2)</p>

CSS
1
p{font-weight:bolder}

JavaScript
1
2
3
4
5
document.querySelector('.number').addEventListener('input',function(){
  document.querySelector('.perc-one').innerText="Процент 1 "+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03)).toFixed(2);
  document.querySelector('.perc-two').innerText="Процент 2 "+((parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03))+(parseFloat(document.querySelector('.number').value)*0.02)).toFixed(2);
  document.querySelector('.result').innerText="Итого(Число+Процент 1+Процент 2) "+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03))+((parseFloat(document.querySelector('.number').value)+(parseFloat(document.querySelector('.number').value)*0.03))+(parseFloat(document.querySelector('.number').value)*0.02))).toFixed(2)
})

Добавлено через 1 минуту
wovancool,

Сообщение от wovancool

где Вы учились веб программированию

обыкновенное чтение

@wovancool · 06.05.2018, 19:47 **[ТС]**

Сколько читаю, толком не пойму некоторые моменты, всякие там укороченные понятия хочется услышать детально, на пальцах, а в книгах этому особого внимания не уделяют. Еще раз благодарю.

Qwerty_Wasd · 06.05.2018, 19:49

wovancool, удачи

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41

	Найти процент от числа 06.05.2018, 17:10. Показов 7542. Ответов 15 Метки нет (Все метки) Всем снова привет. В js соображаю туго и поэтому не могу обойтись без помощи. По форуму искал, такого не нашел. Дано, форма куда вписывается число, вписываем число и получаем число в процентах, далее еще одно значение в процентах. Чтобы было понятно опишу как это вижу я. Вписываем сумму 1000 Тут отображаем процент, например 3 - получаем 30 Тут еще один процент к примеру 5 - получаем 50 И тут всю введенную сумму с процентами. Получаем 1080 В общем как-то так. Спасибо заранее 0

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41
	06.05.2018, 19:15 [ТС]
	Ошибся, немного не так написал. Но я вообще думал, что эти проценты прописываются все в тот же js. Не так? 0

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41
	06.05.2018, 19:23 [ТС]
	Да, вот именно так, спасибо. А никак не сделать подсчет без кнопки? То есть вводишь и обновляется в прямом эфире так сказать И еще нет общей суммы теперь) 0

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41
	06.05.2018, 19:29 [ТС]
	Да, выглядит смешно, но я очень чуть-чуть понимаю в js) Чуть лучше php получается, намного лучше ориентируюсь в css, html. В первом примере есть введенная с процентами сумма в итоге, здесь только проценты, в последний раз можно правку?) upd туплю, тут могу и сам справиться) 0

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41
	06.05.2018, 19:40 [ТС]
	Хорошо. Спасибо, все супер прямо как хотел и даже не думал, что напишут с нуля да так быстро) А можно узнать где Вы учились веб программированию? 0

@wovancool 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 41
	06.05.2018, 19:47 [ТС]
	Сколько читаю, толком не пойму некоторые моменты, всякие там укороченные понятия хочется услышать детально, на пальцах, а в книгах этому особого внимания не уделяют. Еще раз благодарю. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	06.05.2018, 19:49
	wovancool, удачи 0