Часы, которые меняет цвет фона документа


Это таймер на основе часов (используя setInterval()) изменение цвета фона организма, основанный на времени шестнадцатеричные значения. Я подозреваю, что этот код грязный. Есть ли способ следующий JS код будет более эффективным?

var clock = document.getElementById('clock');
var color = document.getElementById('hex-color');

function hexclock(){
  
  var time = new Date();
  var hours = (time.getHours() % 12).toString();
  var minutes = time.getMinutes().toString();
  var seconds = time.getSeconds().toString();
  
  if(hours.length < 2) {
    
    hours = '0' + hours;
  }
  
  if(minutes.length < 2) {
    
    minutes = '0' + minutes;
  }
  
    if(seconds.length < 2) {
    
    seconds = '0' + seconds;
  }
  
  var clockString = hours + ' : ' + minutes + ' : ' + seconds; 
  var hexColorString = "#" + hours + minutes + seconds;
  
  clock.textContent = clockString;
  color.textContent = hexColorString;
  
  document.body.style.backgroundColor = hexColorString;
}

setInterval(hexclock, 1000);
body{
  marin-top:20px;
  text-align:center;
  color:white;
}

#clock{
  font-weight:300;
  font-size:60px;
}
<h1 id="clock">00 : 00 : 00</h1>
<p id="hex-color">#000000</p>



193
6
задан 28 февраля 2018 в 03:02 Источник Поделиться
Комментарии
1 ответ

Вопросы


Я подозреваю, что этот код грязный.

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


Есть ли способ следующий JS код быть эффективным?

Я не уверен, что он должен быть гораздо более эффективным. Код выглядит много примеров можно найти поиск в интернете для часы на JavaScript. Если память не является проблемой, и вы действительно хотели, вы могли бы создать только один объект Date и просто обновить, что объект Date с обновленной часовой, минутной и секундной значения, но вы должны вести бухгалтерский учет вручную, что может оказаться менее эффективным.

Предложения

глобальные переменные

Переменные, созданные с помощью var технически глобальные переменные, так как они не содержатся в функции. Для небольшой скрипт, как это, вероятно, не будет делать разницы, но в более крупных приложений, что может привести к конфликтов в пространстве имен. Было бы разумно, чтобы обернуть код в функцию (возможно, в жизни) и использовать const/let вместо var чтобы сохранить сферу общества.

Дата использовать метод, чтобы получить отформатированный время

Его можно упростить, используя современный метод toLocaleTimeString() (или, альтернативно , Международный.Datetimeformat с()). Смотрите пример ниже для демонстрации этого.

Редактировать: я понимаю, что после размещения объявления, что 24-часовой формат по умолчанию для часов, поэтому пришлось добавить hour12 варианты и дополнительный вызов .replace() для удаления am/pm. Также это не очевидно поддерживает 2-значный формат ну так оно и приходится дополнительно добавлять в ведущих 0 при необходимости. Видимо, этот код страдает от этой проблемы.



(function() { //IIFE
const clock = document.getElementById('clockElement');
const color = document.getElementById('hex-color');
const options = {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true
};

function hexclock() {
const time = new Date();
//use preferred locale accordingly
let clockString = time.toLocaleTimeString('en-GB', options).replace(/[a-z\s]/g, '');
//add missing 0 - hour12 doesn't work ideally for this scenario
clockString.length < 8 && (clockString = '0' + clockString);
const hexColorString = '#' + clockString.replace(/:/g, "");

clock.textContent = clockString;
color.textContent = hexColorString;

document.body.style.backgroundColor = hexColorString;
}

setInterval(hexclock, 1000);
setTimeout(function() {
console.log('window.clock (global variable)? :', window.clock !== undefined);
}, 1100);
})(); //end IIFE


body {
marin-top: 20px;
text-align: center;
color: white;
}

#clock {
font-weight: 300;
font-size: 60px;
}


<h1 id="clockElement">00 : 00 : 00</h1>
<p id="hex-color">#000000</p>



3
ответ дан 28 февраля 2018 в 08:02 Источник Поделиться