Отчет рабочего времени.
Вложений: 1
Найти скрипт который бы отчитывал время не сложно.
Но мне не хватает знаний как сделать так что бы он ежедневно в одно и тоже время показывал сколько осталось до конца рабочего дня и а когда это время закончится он показывал сколько осталось до начало рабочего дня. |
Сергей Ракипов,
https://javascript.ru/forum/css-html...tml#post446717 |
У меня есть скрипт как работает меня устраивает, но не могу сообразить как сделать что бы он постоянно обновлялся.
То есть я загрузил страницу там все данные которые мне нужны, но проходит минута должно бы все изменится но не меняется
<div id="work_schedule">
<p id="current_time" class="line"></p>
<p id="hours" class="line"></p>
<p id="dot" class="line">:</p>
<p id="minutes" class="line"></p>
<p id="statys"></p>
<p id="remains"></p>
</div>
// JavaScript Document
let localTime = new Date;
let hours = localTime.getHours();
let minutes = localTime.getMinutes();
let dot = document.getElementById("dot");
dot.style.color = "black";
let currentTime = document.getElementById("current_time");
let hoursInput = document.getElementById("hours");
let minutesInput = document.getElementById("minutes");
let statys = document.getElementById("statys");
let remains = document.getElementById("remains");
let hoursOpen = 8;
let hoursClose = 20;
let oneMinuts = 60;
let rezult_1 = "";
let rezult_2 = "";
let endingHour = "";
let endingHour_2 = ["с","са","сов"];
let endingMinut = "";
let endingMinut_2 = ["a","ы"];
let open = "До отрытие ";
let close = "До закрытие ";
let openClose = "";
function sec() {
if(dot.style.color == "black") {
dot.style.color = "white";
}
else {
dot.style.color = "black";
}
}
setInterval(sec, 1000);
function openCloseStatys(){
if(hours <= 8){
statys.innerHTML = `Закрыто`;
statys.style.backgroundImage = "url('close.png')";
}
else if(hours >= 20){
statys.innerHTML = `Закрыто`;
statys.style.backgroundImage = "url('close.png')";
}
else if(hours >= 8){
statys.innerHTML = `Открыто`;
statys.style.backgroundImage = "url('open.png')";
}
}
openCloseStatys();
function remainsFun(){
if(hours>=20){
openClose = open;
}
else if(hours>=0&&hours<=8){
openClose = open;
}
else if(hours>=8&&hours<=20){
openClose = close;
}
}
remainsFun();
function timeHours(){
if(hours>=20&&hours<=23){
rezult_1 = hoursOpen - hours + 24;
}
else if(hours>=0&&hours<=8){
rezult_1 = hoursOpen - hours;
}
else if(hours>=8&&hours<=20){
rezult_1 = hoursClose - hours;
}
}
timeHours();
function timeMinuts(){
rezult_2 = oneMinuts - minutes;
if(rezult_2>=0&&rezult_2<=9){
rezult_2 = "0" + rezult_2;
}
}
timeMinuts();
function timeZero(){
if(minutes<=9){
minutes = "0" + minutes;
}
if(hours<=9){
hours = "0" + hours;
}
}
timeZero();
function endingHourFun(){
if(rezult_1==1){
endingHour = endingHour_2[0];
}
else if(rezult_1>=2&&rezult_1<=4){
endingHour = endingHour_2[1];
}
else if(rezult_1>=5&&rezult_1<=23){
endingHour = endingHour_2[2];
}
}
endingHourFun();
function endingMinutFun(){
if(rezult_2==1){
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=2&&rezult_2<=4){
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=5&&rezult_2<=20){
endingMinut = endingMinut;
}
else if(rezult_2==21){
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=22&&rezult_2<=24){
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=25&&rezult_2<=30){
endingMinut = endingMinut;
}
else if(rezult_2==31){
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=32&&rezult_2<=34){
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=35&&rezult_2<=40){
endingMinut = endingMinut;
}
else if(rezult_2==41){
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=42&&rezult_2<=44){
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=45&&rezult_2<=50){
endingMinut = endingMinut;
}
else if(rezult_2==51){
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=52&&rezult_2<=54){
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=55&&rezult_2<=60){
endingMinut = endingMinut;
}
}
endingMinutFun();
currentTime.innerHTML = `Текущие время`;
hoursInput.innerHTML = `${hours}`;
minutesInput.innerHTML = `${minutes}`;
remains.innerHTML = `${openClose}${rezult_1} ча${endingHour} ${rezult_2} минут${endingMinut}`;
|
И еще в этом скрипте работает так
остаток время показывает так к примеру осталось 9 часов и 60 минут как это исправить? |
Все функции надо вызывать циклически.
Т.е вставить все вызовы туда, где отсчитываются секунды И то, что должно меняться туда же
function sec() {
if(dot.style.color == "black") {
dot.style.color = "white";
}
else {
dot.style.color = "black";
}
// тут вызовы функций в необходимой последовательности
openCloseStatys();
remainsFun();
......
hoursInput.innerHTML = `${hours}`;
minutesInput.innerHTML = `${minutes}`;
remains.innerHTML = `${openClose}${rezult_1} ча${endingHour} ${rezult_2} минут${endingMinut}`;
}
Вот этого function remainsFun(){ if(hours>=20){ openClose = open; } else if(hours>=0&&hours<=8){ openClose = open; } else if(hours>=8&&hours<=20){ openClose = close; } } remainsFun(); function timeHours(){ if(hours>=20&&hours<=23){ rezult_1 = hoursOpen - hours + 24; } else if(hours>=0&&hours<=8){ rezult_1 = hoursOpen - hours; } else if(hours>=8&&hours<=20){ rezult_1 = hoursClose - hours; } } timeHours(); быть не должно. Зачем вызывать функцию сразу после ее определения? |
Не чего не понял, я только учусь
|
Трудно сказать, что не так, когда почти все не так.
Ну попробуйте разобраться в этом примере, что бы учиться
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
const hoursOpen = 8;
const hoursClose = 20;
const open = "До открытия ";
const close = "До закрытия ";
let openClose = "";
function openCloseStatys(ch){
let statys = document.getElementById("statys");
if(ch < hoursOpen || ch >= hoursClose){
statys.innerHTML = `Закрыто`;
statys.style.backgroundImage = "url('close.png')";
openClose = open;
} else{
statys.innerHTML = `Открыто`;
statys.style.backgroundImage = "url('open.png')";
openClose = close;
}
}
function remTime(ch, cm){
let remmin
if(hoursOpen<= ch && ch < hoursClose){
remmin = hoursClose*60 - (ch*60 + cm);
} else {
remmin = hoursOpen*60 - (ch*60 + cm);
if (remmin<0) remmin += 24*60;
}
return [remmin/60 | 0, remmin % 60];
}
const ends =[['ов','','а'],['','а','ы']]
function endingWord(word, n, type){
let te = 1
n = (n | 0) % 100
const dec = n / 10
const ed = n % 10
if (ed == 0 || ed >= 5 || dec == 1) te = 0;
else if (2 <= ed && ed <= 4) te = 2;
return word + ends[type][te]
}
let mig = false;
function sec() {
let localTime = new Date;
let hours = localTime.getHours();
let minutes = localTime.getMinutes();
let dot = document.getElementById("dot");
if(mig) {
dot.style.visibility = "visible";
} else {
dot.style.visibility = "hidden";
}
mig = !mig
document.getElementById("hours").innerHTML = ('0'+hours).slice(-2);
document.getElementById("minutes").innerHTML = ('0'+minutes).slice(-2);
openCloseStatys(hours);
const [remh, remm] = remTime(hours, minutes)
document.getElementById("remains").innerHTML = `${openClose} ${remh} ${endingWord('час', remh, 0)} ${remm} ${endingWord('минут', remm, 1)}`;
setTimeout(sec, 1000)
}
document.addEventListener('DOMContentLoaded', () => {
sec()
})
</script>
</head>
<body>
<div id="work_schedule">
<div id='curtime'>
<span id="current_time" class="line">Текущее время </span>
<span id="hours" class="line"></span>
<span id="dot" class="line">:</span>
<span id="minutes" class="line"></span>
</div>
<div id='remtime'>
<span id="statys"></span>
<span id="remains"></span>
</div>
</div>
</body>
</html>
|
Спасибо, но я из того что там написано много что не знаю.
Я понимаю что эту задачу можно решить и по другому и наверняка и даже ваш код можно улучшить. Что вы в принципе и сделали. Но мне на моем уровне пока. Как сделать что бы код всегда был "работал а не только во время загрузки" и как убрать 60 минут исходя из моего кода |
Мне в моем варианте все понятно до последнего символа, и когда нибудь я буду писать по другому, но на пока мне нужно сделать из исходя и моего уровня знаний
|
Сергей Ракипов,
время надо учитывать в комплексе (часы + минуты), так будет проще. всё перевести в минуты, а перед выводом разбить на часы и минуты. |
Что бы ваш код работа, его нужно переделывать. Почти весь.
У Javascript есть некоторые вещи, которые всегда надо учитывать в коде. Например, обращение к элементам html на странице, возможно только тогда, когда она загрузится и создастся дерево DOM. В моем коде строки 72-74 это ожидание загрузки с создания DOM, и только после этого вызывается основная функция sec при работе которой и идут всякие обращения к элементам. В вашем коде вы один раз получили время, и все. Его же каждый раз новое получать надо. Это делается в функции sec (строки 53-55). Так же каждый раз как (каждую секунду) надо изменять всякие надписи (строки 64-69). А вы задали вызов sec каждую секунду и все. Ну по идее она будет (быть может) показывать и гасить двоеточие. И все. Она ни время не обновляет, ни содержимое html не меняет. То, что вы описали какую то функцию (скажем openCloseStatys), а потом сразу ее вызвали, это значит, что она один раз отработает и все. Если конечно не возникнет ошибок, что элементы DOM к этому времени уже определены |
таймер время работы магазина
Сергей Ракипов,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div id="work_schedule">
<p id="current_time" class="line"></p>
<p id="hours" class="line"></p>
<p id="dot" class="line">:</p>
<p id="minutes" class="line"></p>
<p id="statys"></p>
<p id="remains"></p>
</div>
<script>
// JavaScript Document
let hours;
let minutes;
let time;
let dot = document.getElementById("dot");
dot.style.color = "black";
let currentTime = document.getElementById("current_time");
let hoursInput = document.getElementById("hours");
let minutesInput = document.getElementById("minutes");
let statys = document.getElementById("statys");
let remains = document.getElementById("remains");
let hoursOpen = 8;
let hoursClose = 20;
let oneMinuts = 0;
let rezult_1 = "";
let rezult_2 = "";
let endingHour = "";
let endingHour_2 =["с", "са", "сов"];
let endingMinut = "";
let endingMinut_2 =["a", "ы"];
let open = "До отрытия ";
let close = "До закрытия ";
let openClose = "";
function sec() {
if(dot.style.color == "black") {
dot.style.color = "white";
}
else {
dot.style.color = "black";
}
}
setInterval(sec, 1000);
function openCloseStatys() {
if(time < hoursOpen * 60) {
statys.innerHTML = `Закрыто`;
statys.style.backgroundImage = "url('close.png')";
openClose = open;
time = hoursOpen * 60 - time;
}
else if(time >= hoursClose * 60) {
statys.innerHTML = `Закрыто`;
statys.style.backgroundImage = "url('close.png')";
openClose = open;
time = hoursOpen * 60 + 24 * 60 - time;
}
else {
statys.innerHTML = `Открыто`;
statys.style.backgroundImage = "url('open.png')";
openClose = close;
time = hoursClose * 60 - time
}
}
function timeHours() {
rezult_1 = Math.floor(time / 60);
}
function timeMinuts() {
rezult_2 = time % 60;
}
function timeZero(num) {
if(num < 10) {
num = "0" + num;
}
return num
}
function endingHourFun() {
if(rezult_1==1) {
endingHour = endingHour_2[0];
}
else if(rezult_1>=2&&rezult_1<=4) {
endingHour = endingHour_2[1];
}
else if(rezult_1 == 0 ||rezult_1>=5&&rezult_1<=23) {
endingHour = endingHour_2[2];
}
}
function endingMinutFun() {
if(rezult_2==1) {
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=2&&rezult_2<=4) {
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=5&&rezult_2<=20) {
endingMinut = endingMinut;
}
else if(rezult_2==21) {
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=22&&rezult_2<=24) {
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=25&&rezult_2<=30) {
endingMinut = endingMinut;
}
else if(rezult_2==31) {
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=32&&rezult_2<=34) {
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=35&&rezult_2<=40) {
endingMinut = endingMinut;
}
else if(rezult_2==41) {
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=42&&rezult_2<=44) {
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=45&&rezult_2<=50) {
endingMinut = endingMinut;
}
else if(rezult_2==51) {
endingMinut = endingMinut_2[0];
}
else if(rezult_2>=52&&rezult_2<=54) {
endingMinut = endingMinut_2[1];
}
else if(rezult_2>=55&&rezult_2<=60) {
endingMinut = endingMinut;
}
}
function loop()
{
let localTime = new Date;
hours = localTime.getHours();
minutes = localTime.getMinutes();
time = hours * 60 + minutes;
openCloseStatys();
timeHours();
timeMinuts();
endingHourFun();
endingMinutFun();
currentTime.innerHTML = `Текущие время`;
hoursInput.innerHTML = `${timeZero(hours)}`;
minutesInput.innerHTML = `${timeZero(minutes)}`;
remains.innerHTML = `${openClose}${timeZero(rezult_1)} ча${endingHour} ${timeZero(rezult_2)} минут${endingMinut}`;
window.setTimeout(loop, 1000);
}
loop()
</script>
</body>
</html>
|
рони,
Как я понял что бы время постоянно обновлялось было добавлено window.setTimeout(loop, 1000); которое говорит, окну запускать функцию loop раз в секунду. И вот это мне не до конца понятно
function timeHours() {
rezult_1 = Math.floor(time / 60);
}
function timeMinuts() {
rezult_2 = time % 60;
}
function timeZero(num) {
if(num < 10) {
num = "0" + num;
}
return num
}
Я не понимаю вот этого условия (time < hoursOpen * 60) (time >= hoursClose * 60) И не понимаю вот этого действия time = hoursOpen * 60 - time; time = hoursOpen * 60 + 24 * 60 - time; time = hoursClose * 60 - time |
Цитата:
условно сейчас 5 : 0 утра значит 5 * 60 + 0= 300 минут. открытие в 8, 8 * 60 = 480 минут. разница 480 - 300 = 180 минут. time = hoursOpen * 60 - time; 180 сколько это часов Math.floor(time / 60) = 3 часа остаток минут от 180, time % 60 = 0 минут. текущее время 5(часов) надо добавить до 05, делаем это с помощью timeZero 0(минут) надо добавить до 00, делаем это с помощью timeZero итого: текущее время 05 : 00 до открытия осталось 3 часа 0 минут. Цитата:
время сейчас больше времени закрытия или равно? (time >= hoursClose * 60) да/нет(true/false) |
рони,
Все понял! спасибо! |
| Часовой пояс GMT +3, время: 07:17. |