Как добавить к секундам меньше 10 ведущий 0?

98
24 июня 2021, 13:30

let hourse = document.querySelector('.hours'); 
let minutes = document.querySelector('.minutes'); 
let secondes = document.querySelector('.secondes'); 
 
function time(hourse, minutes, secondes) { 
 
  let data = new Date; 
  let hous = data.getHours(); 
  let minuti = data.getMinutes(); 
  let second = data.getSeconds(); 
 
  if (second < 10) { 
    let d = '0' + second; 
 
    second.innerHTML = d 
  } 
 
 
  return hous + '.' + minuti + '.' + second; 
} 
let i = 0; 
 
console.log(time()); 
 
setInterval(() => { 
  console.log(time()) 
}, 1000)
<div class="hours"></div> 
<div class="minutes"></div> 
<div class="seconds"></div>

  1. Как добавить к секундам меньше 10 число 0 ?
Answer 1

Главное определиться, у вас там Дом, Часы или Лошадь!) Если часто делаете такие опечатки, код можно писать в JsFiddle, обернув всё в общую функцию (function(){...})() которая будет красить все объявленные переменные в синий цвет.

let bubu = document.querySelector('.time-elem');  
// Вместо трех элементов - один. Он будет указываться в качестве аргумента функции, 
// чтобы в теории можно было в разных элементах показывать время. 
 
function time(elem){ 
  let date = new Date; 
  let hrs = date.getHours(); 
  let min = date.getMinutes(); 
  let sec = date.getSeconds(); 
   
  // Можно и без return... такая функция не обязательно должна что-то возвращать 
  return elem.innerText = addZero(hrs) + ':' + addZero(min) + ':' + addZero(sec); 
} 
 
function addZero(num){ return (num < 10) ? "0" + num : num; } // см. "Тернарный оператор" 
 
console.log( time(bubu) ); 
 
setInterval( () => { 
  console.log( time(bubu) ); 
}, 1000);
<div class="time-elem"></div>

А ваш вариант будет выглядеть так, если подправить:

let hours = document.querySelector('.hours'); 
let minutes = document.querySelector('.minutes'); 
let seconds = document.querySelector('.seconds'); 
 
// При вызове функции - передаем все нужные значения в качестве аргументов: 
console.log( time(hours, minutes, seconds) ); 
 
setInterval(() => { 
  console.log(time(hours, minutes, seconds)) 
}, 1000) 
 
function time(hours, minutes, seconds) { 
/* Для удобства, названия этих параметров функции совпадают с объявленными выше  
  переменными, но они здесь не имеют к ним отношения.  
  Это внутренние переменные функции, которые будут принимать значение  
  в зависимости от аргументов функции в момент вызова */ 
 
  let data = new Date; 
  let h = data.getHours(); 
  let m = data.getMinutes(); 
  let s = data.getSeconds(); 
  // innerHTML - писалось внутри условия. А надо было после. 
  if (s < 10) { s = "0" + s; } 
  if (m < 10) { m = "0" + m; } 
  if (h < 10) { h = "0" + h; } 
 
  hours.innerText = h;  
  minutes.innerText = m;  
  seconds.innerText = s;  
 
  return h + ':' + m + ':' + s; 
} 
 
/* Все эти телодвижения с аргументами функции имеют смысл, только если хочется  
в будущем ставить такие таймеры в разные элементы. Иначе можно вообще убрать все 
аргументы, и функция начнет работать просто при вызове time() но только 
конкретно для этих элементов */
div { display: inline-block; } 
 
.hours::after, .minutes::after { 
  content: ":"; 
}
<div class="hours"></div 
><div class="minutes"></div 
><div class="seconds"></div>

Answer 2

Можно сделать так :

const addLeadingZero = v => `00${v}`.substr(-2) 
 
function time() { 
  let date = new Date, 
    hours = date.getHours(), 
    minutes = date.getMinutes(), 
    seconds = date.getSeconds(); 
 
  return [addLeadingZero(hours), 
    addLeadingZero(minutes), 
    addLeadingZero(seconds) 
  ].join(':') 
} 
 
console.log(time()); 
setInterval(() => { 
  console.log(time()) 
}, 1000)

Answer 3

я так понимаю, что Вы добиваетесь результата, при котором секунды, имеющие значения от 0 до 9, добавляли к себе 0 и имели вид "00", "01", "02" и т.д. если да, то в строке:

if( second < 50 ){

замените 50 на 10. только учтите, что в консоли ожидаемого результат Вы всё равно не увидите, так как second.innerHTML = d работает только на элементах DOM.

READ ALSO
пропадает элемент, когда jquery объект конвертирую в массив

пропадает элемент, когда jquery объект конвертирую в массив

Снимок из лога сначала в объекте 4 элемента, потом получаю массив из DOM элементов, $itemslength так же 4, но консоль показывает, что длина массива...

90
Как удалить div при скролле страницы?

Как удалить div при скролле страницы?

Как удалить блок, например, с классомclass1? При скролле страницы вниз или вверх

95
Не работает подменю

Не работает подменю

Доброй ночиЕсть выпадающее меню и по плану когда наводишь на Produst - Desctop cправа должно появится скрытое подменю drop-menu2

183