Как написать счётчик зарплаты, зная ставку в час?

Question

[notioenr]

Здравствуйте. Хочу войти в веб посредством практики создания реальных проектов, которые могут пригодиться мне в жизни. Подскажите, пожалуйста, в какую сторону нужно копать и на каком языке это лучше/легче реализовать? JS или PHP? Знаю только основы HTML и CSS, (JS основы основ).

Задача: Рабочая ставка - 200 р/час. Нужно отображать в реальном времени количество заработанных денег с точностью до сотых. Чтобы цифры постоянно обновлялись с момента нажатия на кнопку "Начать считать". Например, прошла 1 минута и мы видим результат "Заработано: 3 рубля 3 копейки".

Надеюсь, смог нормально сформулировать задачу. Буду благодарен любому совету по теме.

Comments

[Дмитрий Беляев]

отображать в реальном времени

такое только на клиенте, если выбор из php/js - то js в браузере

[notioenr]

Дмитрий Беляев, можете что-нибудь порекомендовать к прочтению/просмотру? Чтобы хотя бы представлять вообще как это делается

[Дмитрий Беляев]

notioenr, Date.now() - получает текущее время в миллисекундах, если вычесть 2 времени, то получим разницу
setTimeout и setInterval чтоб планировать запуск кода по времени
В остальном обычная арифметика

[Ankhena]

javascript таймер в реальном времени

[notioenr]

Ankhena, я вижу там в основном примеры таймеров обратного отчёта и совершенно не понимаю как это поможет мне в решении моей задачи

[notioenr]

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

[notioenr]

Пашенька, Благодарю за развернутый ответ

[Вадим]

Вот всё(вроде бы) что Вам пригодится, для решения этой задачи:
Функции в javascript
DOM дерево
Поиск элементов в DOM
События в браузере
Работа с датами
Таймеры

Читать долго. Делать быстро.

Базовая логика очень простая:
Вписал в переменную часовую ставку.
По нажатию на кнопку:
1) Запомнил время нажатия
2) Запустил таймер, который каждый указанный промежуток времени выполняет функцию - смотрит сколько прошло времени, смотрит какая часовая ставка, ну и считает сколько за этот промежуток времени накапало.
3) Записывает результат в определённый html-элемент

Профит.

[notioenr]

Вадим, буду пробовать. Спасибо большое!

Answer 1

[Илья]

Самый простой вариант с которого можете начать это добавить кнопку в HTML и на нее повесить функцию.
<button onclick="reply()">Start Count</button>

Затем в подключенном к HTML js файле создаем эту функцию.
Допустим через setInterval

let i=0 // переменная для счетчика
function reply(){ // Наша функция
  setInterval(function () {
        let counted = (200/60/60) *i  // считаем сколько заработали за каждую секунду и записываем значение в переменную counted
        i++ //Прибавляем секунду к счетчику
        document.getElementById("demo").innerHTML = "Заработано:" +  JSON.stringify(counted.toFixed(2)) + " рублей"; // вывод значения на станицу в элемент с id (demo)  ( в HTML в нужном месте, где хотим выводить данные вставляем  <p id="demo"></p>
    } ,1000) // Интервал в 1 секунду

}

Comments

[notioenr]

Это именно то, что мне нужно было для начала. Спасибо Вам огромное. Теперь очень интересно разобраться с тем как это работает и усовершенствовать под свои нужды.

[notioenr]

Извиняюсь за глупый вопрос, но как убрать кавычки у цифр?

[Илья]

notioenr, уберите JSON.stringify

[notioenr]

Илья, спасибо) помогло. Зачем тогда нужен был JSON.stringify? И как остановить setInterval через кнопку с событием onclick?

Answer 2

[Дмитрий]

Дело было вечером, делать было...
вот набросал на скорую руку на Vue2

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

Comments

[notioenr]

Очень круто! Спасибо большое. Как познакомлюсь с Vue, обязательно вернусь к Вашему коду, чтобы разобраться.

[Дмитрий]

notioenr, если английским владеете - coderstape канал на тубе. Плейлист про vue2.
Или Владилен Минин про vue на русском.

Answer 3

[webdisigner]

function tickRate(rate, tick=60000){
  var time = 0;
  var money = 0;
  var xtick = rate / 60
 
  var interval = setInterval(()=>console.log(`заработано: ${(money+=xtick).toFixed(2)} к ${(++time)} минуте`), tick)
  
}


tickRate(200)

//"заработано: 3.33 к 1 минуте"
//"заработано: 6.67 к 2 минуте"
//"заработано: 10.00 к 3 минуте"
//"заработано: 13.33 к 4 минуте"
//"заработано: 16.67 к 5 минуте"
//"заработано: 20.00 к 6 минуте"
//"заработано: 23.33 к 7 минуте"
//"заработано: 26.67 к 8 минуте"

Почему бы не так, просто копипастишь в консоль браузера