Как автоматизировать код для калькулятора сна?
Смотрите, есть идея сделать калькулятор, который вычисляет фазы сна человека (когда ему лучше всего проснуться) (ниже приведен пример его логики и работы) Но есть проблема! Я попробовал написать код и понял, что если каждый раз по одной минуте рассчитывать время на засыпания, то получится оочень длинный и не практичный код! Можете пожалуйста помочь в автоматизации кода (можно ли через циклы или что-то подобное) упростить его?
Логика работы калькулятора сна. Во сне человек проходит несколько циклов из поочередно чередующихся медленной и быстрой фаз сна. Если проснуться в период медленной фазы, то будет ощущение недосыпания и разбитости, чего можно избежать, проснувшись в конце быстрой фазы сна. Каждая фаза сна длится в среднем 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>
|
Может как-то так?
<!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>
|
калькулятор сна
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'));
|
Именно :) Очень сильно помогли! Большое спасибо!!!
Цитата:
|
| Часовой пояс GMT +3, время: 08:58. |