JS30. Задание 2 JS and CSS Clock
Демо https://js3002.github.io/
Код https://github.com/js3002/js3002.github.io
Результатом должны стать механические часы на js
Авторское задание дополнила электронными часами, благо, я их уже делала раньше. Вот только код почему-то забыла, так что пришлось копировать из своего же репозитория. И это несмотря на то, что весь код писала сама и понимала что пишу.
function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var options = {
month: 'long',
day: 'numeric',
weekday: 'long'
};
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.querySelector(".date").innerHTML = hours + ":" + minutes + ":" + seconds + " " + date.toLocaleString("ru", options);
setTimeout("clock()", 1000);
}
clock();
Хотела немного улучшить: вынести объявление переменных из функции - ан-нет. Если переменные не внутри функции время автоматически не обновляется. Кто бы сказал почему так.
Ещё изменила авторское оформление. Добавила новый фон, который актуальный и совсем свежий, ещё бы - фото позавчерашнего затмения и ещё кое-что по мелочам. В итоге стрелки стали вращаться не вокруг центра часов, а вокруг своего собственного центра, пришлось делать для них градиентную заливку, чтобы второй конец стрелки был невидимым (transparent). Это я к тому, что знания html + css необходимы, и без них никак.
Теперь бы научить эти стрелки вращаться и показывать время.
Здесь хорошо было бы вспомнить как выглядит школьный транспортир
Градусы он отсчитывает справа-налево, то есть против часовой стрелки, а 0° у него сбоку, а не вверху.
То есть, позиция по умолчанию наших стрелок будет+90 °, а изменение угла считаем со знаком минус, иначе часы уйдут в прошлое (тоже неплохо, но не то, что ожидается).
За сутки - 24 часа
- часовая стрелка делает два оборота в 360° (неожиданно? ну, у нас же 12-часовый циферблат...),
- минутная 24 * 60 = 1440 оборотов
- секундная 24 * 60 * 60 = 86400 оборотов.
Соответственно, за 1 секунду
- секундная стрелка сдвигается на 6°
- минутная на 0,1°
- часовая на 0,00833333°
Занятно, что здесь автор утверждает будто часовая стрелка за секунду повернётся на 0,0017°
Это было бы справедливо, если бы в сутках было 60 часов, и часовая стрелка совершала только один оборот по циферблату, а не два. И никто из 13.8 тысяч пользователей просмотревших статью не сообщил автору об ошибке в его вычислениях и не написал о ней в комментариях. Очередное доказательство того, что мнение большинства никак не является подтверждением истины, даже если речь идёт о такой точной и не допускающей разногласий науке как математика.
Это я отвлеклась, конечно. Углы углами, но нужно думать как заставить стрелки поворачиваться на эти углы.
Попытка номер раз.
function setDate() {
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
secondHand.style.transform = "rotate(6deg)";
setTimeout("setDate()", 1000);
}
setDate()
В итоге секундная стрелка сдвинулась на 6°. Но сдвинулась только раз, а мне бы хотелось, чтобы она каждую секунду сдвигалась на 6°. И при этом ещё показывала время.
То есть мне нужно узнать время
var date = new Date();
Узнать секунды
var seconds = date.getSeconds();
И умножить количество секунд на 6°
Да. Что-то мои рассчёты пошли прахом. Сейчас результат выглядит так:
function setDate() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
var secondDeg = seconds * 6 + 90;
var minDeg = minutes * 6 + 90;
var hourDeg = hours * 30 + 90;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minHand.style.transform = `rotate(${minDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
setTimeout("setDate()", 1000);
}
setDate()
В общем, всё бы ничего, но два часа 57 минут это всё-таки два часа, соответственно, часовая стрелка стоит на двойке, а не приближается к тройке. То есть ещё нужно как-то учесть не только количество часов, но и количество минут в них.
Примерно так
var hourDeg = (hours + minutes / 60) * 30 + 90;
Работает. Что радует. Но код печальный. Два раза объявлять одни и те же переменные в двух разных функциях как-то не выглядит.
Да, совсем забыла. В коде есть такая забавная строчка
secondHand.style.transform = `rotate(${secondDeg}deg)`;
Цитата:
И почему всё-таки я не могу объявить переменные вне функции, а только внутри неё?
Да, и вот оказывается в чём дело было с глобальными переменными, которые не работали.
Цитата:
Код https://github.com/js3002/js3002.github.io
Результатом должны стать механические часы на js
Авторское задание дополнила электронными часами, благо, я их уже делала раньше. Вот только код почему-то забыла, так что пришлось копировать из своего же репозитория. И это несмотря на то, что весь код писала сама и понимала что пишу.
function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var options = {
month: 'long',
day: 'numeric',
weekday: 'long'
};
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.querySelector(".date").innerHTML = hours + ":" + minutes + ":" + seconds + " " + date.toLocaleString("ru", options);
setTimeout("clock()", 1000);
}
clock();
Хотела немного улучшить: вынести объявление переменных из функции - ан-нет. Если переменные не внутри функции время автоматически не обновляется. Кто бы сказал почему так.
Ещё изменила авторское оформление. Добавила новый фон, который актуальный и совсем свежий, ещё бы - фото позавчерашнего затмения и ещё кое-что по мелочам. В итоге стрелки стали вращаться не вокруг центра часов, а вокруг своего собственного центра, пришлось делать для них градиентную заливку, чтобы второй конец стрелки был невидимым (transparent). Это я к тому, что знания html + css необходимы, и без них никак.
Теперь бы научить эти стрелки вращаться и показывать время.
Здесь хорошо было бы вспомнить как выглядит школьный транспортир
Градусы он отсчитывает справа-налево, то есть против часовой стрелки, а 0° у него сбоку, а не вверху.
То есть, позиция по умолчанию наших стрелок будет
За сутки - 24 часа
- часовая стрелка делает два оборота в 360° (неожиданно? ну, у нас же 12-часовый циферблат...),
- минутная 24 * 60 = 1440 оборотов
- секундная 24 * 60 * 60 = 86400 оборотов.
Соответственно, за 1 секунду
- секундная стрелка сдвигается на 6°
- минутная на 0,1°
- часовая на 0,00833333°
Занятно, что здесь автор утверждает будто часовая стрелка за секунду повернётся на 0,0017°
Это было бы справедливо, если бы в сутках было 60 часов, и часовая стрелка совершала только один оборот по циферблату, а не два. И никто из 13.8 тысяч пользователей просмотревших статью не сообщил автору об ошибке в его вычислениях и не написал о ней в комментариях. Очередное доказательство того, что мнение большинства никак не является подтверждением истины, даже если речь идёт о такой точной и не допускающей разногласий науке как математика.
Это я отвлеклась, конечно. Углы углами, но нужно думать как заставить стрелки поворачиваться на эти углы.
Попытка номер раз.
function setDate() {
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
secondHand.style.transform = "rotate(6deg)";
setTimeout("setDate()", 1000);
}
setDate()
В итоге секундная стрелка сдвинулась на 6°. Но сдвинулась только раз, а мне бы хотелось, чтобы она каждую секунду сдвигалась на 6°. И при этом ещё показывала время.
То есть мне нужно узнать время
var date = new Date();
Узнать секунды
var seconds = date.getSeconds();
И умножить количество секунд на 6°
Да. Что-то мои рассчёты пошли прахом. Сейчас результат выглядит так:
function setDate() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
var secondDeg = seconds * 6 + 90;
var minDeg = minutes * 6 + 90;
var hourDeg = hours * 30 + 90;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minHand.style.transform = `rotate(${minDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
setTimeout("setDate()", 1000);
}
setDate()
В общем, всё бы ничего, но два часа 57 минут это всё-таки два часа, соответственно, часовая стрелка стоит на двойке, а не приближается к тройке. То есть ещё нужно как-то учесть не только количество часов, но и количество минут в них.
Примерно так
var hourDeg = (hours + minutes / 60) * 30 + 90;
Работает. Что радует. Но код печальный. Два раза объявлять одни и те же переменные в двух разных функциях как-то не выглядит.
Да, совсем забыла. В коде есть такая забавная строчка
secondHand.style.transform = `rotate(${secondDeg}deg)`;
Цитата:
${var} - это похоже на вставки переменных в string
вместо
"You are " + year + " y.o."
можно писать
"You are ${year} y.o."
"You are " + year + " y.o."
можно писать
"You are ${year} y.o."
Но вот в чём фокус - этот код отказывается работать как в двойных так и в одинарных кавычках. Только в косых. Что бы это значило?
И почему всё-таки я не могу объявить переменные вне функции, а только внутри неё?
Да, и вот оказывается в чём дело было с глобальными переменными, которые не работали.
Цитата:
- потому что date не обновляется
а надо чтобы обновлялся
Это так просто. Так просто, что просто непонятно как можно было до этого не додуматься самой.
Код, конечно, хорошо бы переписать
Сделать три функции. Первая определяет текущее время и возвращает минуты секунды и часы, а две другие это время выводят
Но как-то оно не переписывается. да и не знаю я как заставить функцию вернуть несколько значений, разве что в виде объекта или массива. Пусть будет как есть
function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var options = {
month: "long",
day: "numeric",
weekday: "long"
};
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.querySelector(".date").innerHTML = hours + ":" + minutes + ":" + seconds + " " + date.toLocaleString("ru", options);
setTimeout("clock()", 1000);
}
clock();
function setDate() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
var secondDeg = seconds * 6 + 90;
var minDeg = minutes * 6 + 90;
var hourDeg = (hours + minutes / 60) * 30 + 90;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minHand.style.transform = `rotate(${minDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
setTimeout("setDate()", 1000);
}
setDate()
Но как-то оно не переписывается. да и не знаю я как заставить функцию вернуть несколько значений, разве что в виде объекта или массива. Пусть будет как есть
function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var options = {
month: "long",
day: "numeric",
weekday: "long"
};
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.querySelector(".date").innerHTML = hours + ":" + minutes + ":" + seconds + " " + date.toLocaleString("ru", options);
setTimeout("clock()", 1000);
}
clock();
function setDate() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var secondHand = document.querySelector(".second-hand");
var minHand = document.querySelector(".min-hand");
var hourHand = document.querySelector(".hour-hand");
var secondDeg = seconds * 6 + 90;
var minDeg = minutes * 6 + 90;
var hourDeg = (hours + minutes / 60) * 30 + 90;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minHand.style.transform = `rotate(${minDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
setTimeout("setDate()", 1000);
}
setDate()