Как показать текущее время в JavaScript в формате ЧЧ: ММ: СС?


101

Не могли бы вы рассказать мне, как установить время в этом формате ЧЧ: ММ: СС. Я хочу установить это в div?


Вот мой код .. jsfiddle.net/naveennsit/yd99X
user2648752

1
Но проблема в том, что у него есть PM и AP, мне это не нужно. Во-вторых, формат 24
user2648752

@ user2648752 проверьте мою демонстрацию ответов jsfiddle.net/cse_tushar/fKKSb
Тушар Гупта - curioustushar

1
Гм ... Почему в вопросе помечена дата , даже если пользователь спрашивает время?
Ллойд Доминик

Ответы:


110

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();
<div id="time"></div>

ДЕМО с использованием только javaScript

Обновить

Updated Demo

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

    function startTime() {
        var today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds());
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
    }
    startTime();
})();

117

Вы можете использовать встроенную функцию Date.toLocaleTimeString():

var d = new Date();
var n = d.toLocaleTimeString();

Это отобразит, например:

"11:33:01"

Я нашел его на http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp


5
Я думаю, это должен быть принятый ответ, потому что он отвечает именно на вопрос, использует встроенную функцию и является самым коротким рабочим кодом для получения того, что требуется.
vchrizz

11
3:59:45 PM - вот что это дало мне. Это не запрашиваемый формат.
Иван

toLocaleTimeString не является функцией
Пользователь

в одну строкуnew Date().toLocaleTimeString()
aljgom

61

Вы можете сделать это в Javascript.

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

В настоящее время возвращается 15:5:18. Обратите внимание, что если какое-либо из значений меньше 10, они будут отображаться с использованием только одной цифры, а не двух.

Проверьте это в JSFiddle

Обновления:
для попытки с префиксом 0

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));

Пожалуйста, ответьте на этот вопрос. stackoverflow.com/questions/18227667/…
user2648752

Пожалуйста, ответьте на этот вопрос. Мне нужно указать время в первом столбце.
user2648752

да, но мне нужно добавить три столбца, как написано в вопросе. Пожалуйста, прочтите вопрос сэра. Мне нужно добавить время в первом столбце и данные в реальном времени во втором столбце
user2648752

Вы должны учитывать минуты и секунды <10, как это сделал Тушар в своем ответе, иначе он не покажет ведущий «0».
keepitreal

@CleverGirl Я пытался дать простой ответ, поэтому написал это. Поскольку вы упомянули о префиксе 0, я хотел бы сделать это с помощью ответа @ user113716, который был изображен очень четко.
Praveen

40

Для этого вы можете использовать moment.js .

var now = new moment();
console.log(now.format("HH:mm:ss"));

Выходы:

16:30:03

4
Спасибо, Ремус. Я больше никогда не упаду в бесславную кроличью нору js-манипуляций с датой и временем.
matlembo

Спасибо чувак! Все усложняют все! Это самый лаконичный ответ для тех, кому нужно быстро выхватить строку кода для простой вещи!
ChairmanMeow

5
Спрячьте 120 с лишним байтов, необходимых для этого, включив 20k + скрипт! genius
frumbert 02

1
Эй, я не говорю, что ты всегда должен его использовать, но если ты уже пользуешься им, почему бы не сделать это простым способом 😉
brandonscript

30
new Date().toTimeString().slice(0,8)

Обратите внимание, что toLocaleTimeString () может возвращать что-то вроде 9:00:00 AM.


1
Это первый раз, когда я видел, как кто-то создает пример кода, инстанцирующий дату без new Date () ... это нормально для использования (new Date)?
OG Sean

6

Используйте этот способ:

var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });

Результат: 18:56:31


2

function realtime() {
  
  let time = moment().format('h:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('h:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

Очень простой способ с использованием moment.js и setInterval .

setInterval(() => {
  moment().format('h:mm:ss a');
}, 1000)

Пример вывода

Если setInterval()установлено значение 1000 мс или 1 секунда, вывод будет обновляться каждую секунду.

15:25:50

Вот как я использую этот метод в одном из своих побочных проектов.

setInterval(() => {
  this.time = this.shared.time;
}, 1000)

Может быть, вам интересно, setInterval()не вызовет ли использование некоторых проблем с производительностью.

SetInterval интенсивно использует процессор?

Я не думаю, что setInterval по своей сути вызовет у вас серьезные проблемы с производительностью. Я подозреваю, что репутация может появиться из более ранней эпохи, когда процессоры были менее мощными. ... - одинокий день

Нет, setInterval сам по себе не требует большой загрузки ЦП. Если у вас много интервалов, выполняемых с очень короткими циклами (или очень сложная операция, выполняющаяся с умеренно длинным интервалом), тогда это может легко вызвать интенсивную нагрузку на ЦП, в зависимости от того, что именно ваши интервалы делают и как часто они это делают. ... - арот

Но в целом использование setInterval, как и многие другие на вашем сайте, может замедлить работу. 20 одновременно выполняемых интервалов с более или менее тяжелой работой повлияют на шоу. И опять же ... вы действительно можете испортить любую часть, я думаю, это не проблема setInterval. ... - Дженди


2
new Date().toLocaleTimeString('it-IT')

it-ITЛокаль происходит раздуть час при необходимости и опускает PM или AM01:33:01


Что этот код предлагает только в ответ на существующие решения, которые показывают, как использовать .toLocaleTimeString()?
Джейсон Аллер,

часть «it-IT» означает, что он выводит в точности так, как задано console.log (event.toLocaleTimeString ('it-IT')); // ожидаемый результат: 01:15:30, если вы не включите 'it-IT', вы получите что-то вроде того, 1:15:30 PMчто пропускает начальный 0 и добавляет `PM`, который в противном случае вам пришлось бы удалить. Я отредактировал свой ответ, чтобы прояснить это.
iamnotsam

1

Этот код выведет в консоль текущее время в формате ЧЧ: ММ: СС с учетом часовых поясов GMT.

var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55

0

Это пример того, как установить время в div (only_time) с помощью javascript.

function date_time() {
    var date = new Date();
    var am_pm = "AM";
    var hour = date.getHours();
    if(hour>=12){
        am_pm = "PM";
    }
    if (hour == 0) {
        hour = 12;
    }
    if(hour>12){
        hour = hour - 12;
    }
    if(hour<10){
        hour = "0"+hour;
    }

    var minute = date.getMinutes();
    if (minute<10){
        minute = "0"+minute;
    }
    var sec = date.getSeconds();
    if(sec<10){
        sec = "0"+sec;
    }

    document.getElementById("time").innerHTML =  hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>

Хотя этот блок кода может ответить на вопрос, было бы лучше, если бы вы могли дать небольшое объяснение, почему он это делает.
Питер

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.