Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2022, 18:58
Новичок на форуме
Отправить личное сообщение для shkarol Посмотреть профиль Найти все сообщения от shkarol
 
Регистрация: 16.08.2022
Сообщений: 6

Как автоматизировать код для калькулятора сна?
Смотрите, есть идея сделать калькулятор, который вычисляет фазы сна человека (когда ему лучше всего проснуться) (ниже приведен пример его логики и работы) Но есть проблема! Я попробовал написать код и понял, что если каждый раз по одной минуте рассчитывать время на засыпания, то получится оочень длинный и не практичный код! Можете пожалуйста помочь в автоматизации кода (можно ли через циклы или что-то подобное) упростить его?

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

Каждая фаза сна длится в среднем 90 минут, а чтобы взрослый человек полноценно выспался необходимо 5-6 таких фаз, что соответствует 7-9 часам сна.

Пример 1. Если Вам нужно проснуться в максимально хорошем самочувствии в 7:30 утра, то укажите в калькуляторе Время пробуждения "07:30". В результате получится 6 фаз (22:30, 00:00, 01:30, 03:00, 04:30 и 06:00), к которым Вы должны уснуть.

Как было указано выше, чтобы поспать рекомендуемые для большинства 7-9 часов, необходимо уснуть в 1-ом или во 2-ом цикле в 22:30 и 00:00 соответственно. Более того, даже если Вы уснете, например, в 4-ой фазе к 04:30 или 5-ой, то легче проснетесь к 7:30.

Пример 2. Вам нужно узнать, во сколько часов лучше проснуться, если Вы засыпаете в 23:40, для чего в онлайн калькуляторе указываете Время засыпания "23:40". По результату расчета получим следующие фазы 08:40, 07:10, 05:40, 04:10, 02:40, 01:10.

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


<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <style>
    .timepicker{
        background: none;
        border: none;
        font-size: 16px;
    }
 </style>
 
 <div class="container">
     <div class="row">
         <div class="col s12 m3"></div>
         <div class="col s12 m6">
             <form>
                 <div class="input-field">
                     <input type="button" class="timepicker" value="06:00">
                     <!-- <label for="time">Set Time</label> -->
                     <p id="indicator"></p>
                     <p id="time"></p>
                     <p id="time2"></p>
                     <p id="time3"></p>
                     <p id="time4"></p>
                 </div>
             </form>
         </div>
         <div class="col s12 m3"></div>
     </div>
 </div>
 
 <button onclick="func()">Кнопка</button>
 
 <script>
   document.addEventListener('DOMContentLoaded', function() {
     var elems = document.querySelector('.timepicker');
     var instances = M.Timepicker.init(elems,{
        //  showClearBtn:true
            twelveHour:false
     });
   });
 
   function time(){
    document.querySelector('#indicator').innerHTML = document.querySelector('.timepicker').value
   }
   setInterval(time, 100)
   function func(){ //вот этот кусок кода нужно как-то автоматизировать, а не делать это по каждой минуте
   var indicator = document.querySelector('#indicator')
   if (indicator.innerHTML == '00:00'){
    document.querySelector('#time').innerHTML = '23:30'
    document.querySelector('#time2').innerHTML = '01:00'
    document.querySelector('#time3').innerHTML = '02:30'
    document.querySelector('#time4').innerHTML = '04:00'
   }
   if (indicator.innerHTML == '00:01'){
    document.querySelector('#time').innerHTML = '23:31'
    document.querySelector('#time2').innerHTML = '01:01'
    document.querySelector('#time3').innerHTML = '02:31'
    document.querySelector('#time4').innerHTML = '04:01'
   }
   if (indicator.innerHTML == '00:02'){
    document.querySelector('#time').innerHTML = '23:32'
    document.querySelector('#time2').innerHTML = '01:02'
    document.querySelector('#time3').innerHTML = '02:32'
    document.querySelector('#time4').innerHTML = '04:02'
   }
}
 
 </script>
 
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2022, 20:16
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,583

Может как-то так?

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <style>
    .timepicker{
        background: none;
        border: none;
        font-size: 16px;
    }
 </style>
 
 <div class="container">
     <div class="row">
         <div class="col s12 m3"></div>
         <div class="col s12 m6">
             <form>
                 <div class="input-field">
                     <input type="button" class="timepicker" value="06:00">
                     <!-- <label for="time">Set Time</label> -->
                     <p id="indicator"></p>
                     <p id="time"></p>
                     <p id="time2"></p>
                     <p id="time3"></p>
                     <p id="time4"></p>
                 </div>
             </form>
         </div>
         <div class="col s12 m3"></div>
     </div>
 </div>
 
 <button onclick="func()">Кнопка</button>
 
 <script>
  document.addEventListener('DOMContentLoaded', function() {
      var elem = document.querySelector('.timepicker');
      var instances = M.Timepicker.init(elem, {
          //  showClearBtn:true
          twelveHour: false,
          onSelect: (hours, minutes) => {
              document.querySelector('#indicator').innerHTML = elem.value = `${hours}:${minutes}`;
          }
      });

      document.querySelector('#indicator').innerHTML = elem.value;
  });

  function func() {
      const indicator = document.querySelector('#indicator');
      const hoursMinutesPair = indicator?.innerHTML.split(':');
      if (hoursMinutesPair.length !== 2) {
          throw new Error('Invalid time format');
      }

      const getFormattedTime = (([hours, minutes]) => {
          const baseDate = new Date();
          baseDate.setHours(hours);
          baseDate.setMinutes(minutes);

          return (addSeconds = 0) => {
              let date = baseDate;
              if (addSeconds) {
                  date = new Date(baseDate);
                  date.setTime(+date + addSeconds * 1000);
              }

              return [
                  date.getHours(),
                  date.getMinutes(),
              ].map(n => n <= 9 ? '0' + n : n).join(':');
          };
      })(hoursMinutesPair);

      const selectorToTimeShiftInSecondsMap = {
          '#time': -30 * 60,
          '#time2': 1 * 60 * 60,
          '#time3': 2.5 * 60 * 60,
          '#time4': 4 * 60 * 60,
      };
      for (const [selector, timeShift] of Object.entries(selectorToTimeShiftInSecondsMap)) {
          document.querySelector(selector).innerHTML = getFormattedTime(timeShift);
      }
  }
 </script>
 
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2022, 20:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,601

калькулятор сна
shkarol,
const formatter = new Intl.DateTimeFormat("ru", {
            hour: "numeric",
            minute: "2-digit"
        });

        const sleepTime = (str, back) => {
            let [h, m] = str.split(":");
            let time = new Date();
            let arr = [];
            let duration = back ? -90 : 90;
            for (let i = 1; i < 7; i++) {
                time.setHours(h, (+m + duration * i), 0, 0);
                arr.push(formatter.format(time))
            }
            return back ? arr.reverse() : arr;
        }
        console.log(sleepTime('7:30', true));
        console.log(sleepTime('23:40'));

Последний раз редактировалось рони, 31.10.2022 в 20:32.
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2022, 20:39
Новичок на форуме
Отправить личное сообщение для shkarol Посмотреть профиль Найти все сообщения от shkarol
 
Регистрация: 16.08.2022
Сообщений: 6

Именно :) Очень сильно помогли! Большое спасибо!!!
Сообщение от Nexus Посмотреть сообщение
Может как-то так?

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <style>
    .timepicker{
        background: none;
        border: none;
        font-size: 16px;
    }
 </style>
 
 <div class="container">
     <div class="row">
         <div class="col s12 m3"></div>
         <div class="col s12 m6">
             <form>
                 <div class="input-field">
                     <input type="button" class="timepicker" value="06:00">
                     <!-- <label for="time">Set Time</label> -->
                     <p id="indicator"></p>
                     <p id="time"></p>
                     <p id="time2"></p>
                     <p id="time3"></p>
                     <p id="time4"></p>
                 </div>
             </form>
         </div>
         <div class="col s12 m3"></div>
     </div>
 </div>
 
 <button onclick="func()">Кнопка</button>
 
 <script>
  document.addEventListener('DOMContentLoaded', function() {
      var elem = document.querySelector('.timepicker');
      var instances = M.Timepicker.init(elem, {
          //  showClearBtn:true
          twelveHour: false,
          onSelect: (hours, minutes) => {
              document.querySelector('#indicator').innerHTML = elem.value = `${hours}:${minutes}`;
          }
      });

      document.querySelector('#indicator').innerHTML = elem.value;
  });

  function func() {
      const indicator = document.querySelector('#indicator');
      const hoursMinutesPair = indicator?.innerHTML.split(':');
      if (hoursMinutesPair.length !== 2) {
          throw new Error('Invalid time format');
      }

      const getFormattedTime = (([hours, minutes]) => {
          const baseDate = new Date();
          baseDate.setHours(hours);
          baseDate.setMinutes(minutes);

          return (addSeconds = 0) => {
              let date = baseDate;
              if (addSeconds) {
                  date = new Date(baseDate);
                  date.setTime(+date + addSeconds * 1000);
              }

              return [
                  date.getHours(),
                  date.getMinutes(),
              ].map(n => n <= 9 ? '0' + n : n).join(':');
          };
      })(hoursMinutesPair);

      const selectorToTimeShiftInSecondsMap = {
          '#time': -30 * 60,
          '#time2': 1 * 60 * 60,
          '#time3': 2.5 * 60 * 60,
          '#time4': 4 * 60 * 60,
      };
      for (const [selector, timeShift] of Object.entries(selectorToTimeShiftInSecondsMap)) {
          document.querySelector(selector).innerHTML = getFormattedTime(timeShift);
      }
  }
 </script>
 
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
....
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сократить код? js123 Общие вопросы Javascript 4 05.07.2019 09:26
Как подключить class к window.location для открытия ссылки в popup окне? Sergey771 Общие вопросы Javascript 0 19.11.2016 12:34
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ] Geo Ваши сайты и скрипты 0 11.01.2014 23:41
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30