Какой бы код вы выбрали?

Question

[Alexander3928]

Какой код вы бы выбрали, если бы вам дали посмотреть?
1) меньше строчек кода, но читаемость ...
2) больше строчек кода, но легко читается

https://codepen.io/Alexxxsander/pen/WNdZbOZ

Comments

[Anonymous Penguin]

https://qna.habr.com/help/rules
Как раз таки опросы запрещены тут. Пункт 5.11

Answer 1

[Rsa97]

function clockTick() {
  const date = new Date();

  electricDate.innerHTML = `${date.toLocaleDateString('en-CA')} ${date.toLocaleString('ru-RU', {weekday: 'short'}).toUpperCase()}`;
  electricTime.innerHTML = date.toLocaleTimeString();
}

Answer 2

[Александр Макаров]

я бы написал как то так

const electricDate = document.querySelector(".electronic__date");
const electricTime = document.querySelector(".electronic__clock");

setInterval(checkDateAndTime, 1000);

function checkAddZero(num) {
    return num < 10 ? "0" + num : num
}

function checkDateAndTime() {
    const DATE = new Date();
    const week = ["ВС", "ПОН", "ВТ", "СР", "ЧТ", "ПТ", "СУБ"];

    let year = DATE.getFullYear();
    let month = checkAddZero(DATE.getMonth() + 1);
    let day = checkAddZero(DATE.getDate());
    let hour = checkAddZero(DATE.getHours());
    let minute = checkAddZero(DATE.getMinutes());
    let second = checkAddZero(DATE.getSeconds());
    
    electricDate.innerHTML = year + "-" + month + "-" + day + " " + week[DATE.getDay()];
    electricTime.innerHTML = hour + ":" + minute + ":" + second;
}

Comments

[Александр Макаров]

ну или еще короче и все равно более читаемо чем твой первый вариант

const electricDate = document.querySelector(".electronic__date");
const electricTime = document.querySelector(".electronic__clock");


setInterval(checkDateAndTime, 1000);

function checkAddZero(num) {
    return num < 10 ? "0" + num : num
}

function checkDateAndTime() {
    const DATE = new Date();
    const week = ["ВС", "ПОН", "ВТ", "СР", "ЧТ", "ПТ", "СУБ"];


    let date = [DATE.getFullYear(), checkAddZero(DATE.getMonth() + 1), checkAddZero(DATE.getDate())]

    let time = [checkAddZero(DATE.getHours()), checkAddZero(DATE.getMinutes()), checkAddZero(DATE.getSeconds())]


    electricDate.innerHTML = date.join("-") + " " + week[DATE.getDay()];
    electricTime.innerHTML = time.join(":");
}

Answer 3

[Антон Антон]

Дарю:

let d = new Date;
let offset = d.getTimezoneOffset() * 60*1000
d.setTime(d.getTime() - offset)
let matches = d.toISOString().match(/^(.*?)T(.*?)\./)
console.log(matches[1], matches[2]);

с неделей нормально в принципе, но можно как-то так:

console.log(d.toLocaleDateString(undefined, {weekday: 'short'}));

(язык можно прибить гвоздями, а так будет на языке пользователя)

Comments

[Rsa97]

toISOString выдаёт время в UTC, а не текущей зоне.

[Антон Антон]

Rsa97, дельное замечание. Тогда так:

let d = new Date;
console.log(d.toLocaleDateString('sv'));
console.log(d.toLocaleTimeString('ru'));
console.log(d.toLocaleDateString(undefined, {weekday: 'short'}));

[Антон Антон]

Rsa97, или так:

let d = new Date();
let offset = d.getTimezoneOffset() * 60*1000;
d.setTime(d.getTime() - offset);
let matches = d.toISOString().match(/^(.*?)T(.*?)\./)
console.log(matches[1], matches[2]);

(обновил ответ)

[Alexander3928]

Rsa97, Антон Антон хотел бы спросить на счёт toLocaleDateString, toLocaleTimeString. Их можно использовать когда общий стить ? А если нужно к примеру second изменить на другой цвет(на красный), тогда нужно пользоваться getSecond() или в чем их смысл, если можно сразу использовать toLocaleTimeString()?

[Антон Антон]

Alexander3928, основная проблема xxxLocaleString в производительности. toISOString работает не в пример быстрее. Если надо поменять цвет секунд - то да, можно сделать и getSecond(), можно порезать регуляркой/разделителем, можно придумать ещё кучу всего. очень советую почитать https://developer.mozilla.org/en-US/docs/Web/JavaS... (и прочее), потому что этот инструмент создан для решения задачи вывода данных в нужном виде. Например добить "число" до строки нужной длины (в данном случае 2) можно так:

const nf = new Intl.NumberFormat(undefined, {
  minimumIntegerDigits: 2,
  useGrouping: false
}); // отдельной переменной для повторного использования, например в цикле

console.log(nf.format(1));

[Alexander3928]

Антон Антон, Спасибо вам. Удачи и хорошего дня