Изменение 1-24 часа на 1-12 часов для метода getHours()

Когда я использую метод «getHour()» в javascript, он отображает формат военного времени. Мне нужно, чтобы вместо этого отображался час в цифрах от 1 до 12. Кто-нибудь может сказать мне, как это сделать? Вот код, который я использую:

function updateclock()
{

    var time = new Date();
    var todisplay = '';

    if (time.getHours() < 10) todisplay += time.getHours();
    else todisplay += time.getHours();

    if (time.getMinutes() < 10) todisplay += ':0' + time.getMinutes();
    else todisplay += ':' + time.getMinutes();

    document.getElementById("clock").innerHTML = todisplay;
}

person Tony Wilkerson    schedule 11.05.2012    source источник
comment
поэтому вычтите 12, если больше 13 :)   -  person epascarello    schedule 11.05.2012


Ответы (9)


Почему бы не сделать это коротким путем? Математика, люди! :)

// returns the hours number for a date, between 1 and 12
function hours12(date) { return (date.getHours() + 24) % 12 || 12; }
person mcw    schedule 17.07.2014
comment
Где математика! (X + n*12) % 12 ==> X % 12 сократите свой ответ до. функция hours12(date) { return date.getHours() %12 || 12; } - person Waleed A.K.; 18.05.2016
comment
Вы знаете, я чувствую, что когда я впервые написал ответ, у меня была веская причина иметь +24. Но повторная проверка кода в Chrome и проверка документации по API (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/), вы правы - вы должны быть в безопасности, опустив его. - person mcw; 27.05.2016
comment
Нет, но только из-за завершающего || 12. Однако мне не ясно, что вы ожидаете от полудня, как будто 0 - это именно полночь. Я никогда не слышал о 12-часовой системе, в которой 0 часов дня используется как полдень. - person mcw; 09.10.2016
comment
Я полагаю, что предоставленный ответ является наиболее возможным и правильным. @WaleedA.K. пытаясь сказать, что x%12 будет работать? разве это не дало бы 0 в полночь, используя только x%12. - person Anant; 08.11.2016
comment
@Анант - нет, @Валид А.К. указывал, что математически (x + 24) % 12 эквивалентно x % 12. Таким образом, первую часть моего ответа, которую я оставил без редактирования, можно упростить, удалив + 24. || 12 по-прежнему необходим именно по той причине, которую вы предлагаете - без нее вы получите 0 за полночь/полдень. - person mcw; 29.11.2016

Это вернет 13–24 обратно в диапазон 1–12, а 0 — обратно в 12:

var hours = time.getHours();
if (hours > 12) {
    hours -= 12;
} else if (hours === 0) {
   hours = 12;
}

Кроме того, вам нужно перестать повторяться в своем коде. Вызовите time.getHours() и time.getMinutes() и сохраните их значения только один раз каждое, а затем позаботьтесь о добавлении начальных нулей, например:

function updateclock() {

    function pad(n) {
         return (n < 10) ? '0' + n : n;
    }

    var time = new Date();
    var hours = time.getHours();
    var minutes = time.getMinutes();

    if (hours > 12) {
        hours -= 12;
    } else if (hours === 0) {
        hours = 12;
    }

    var todisplay = pad(hours) + ':' + pad(minutes);
    document.getElementById("clock").innerHTML = todisplay;
}
person Alnitak    schedule 11.05.2012
comment
@jbabey нет, это всего лишь принцип DRY. Мемоизация — это практика кэширования ранее возвращенных результатов и их возврата вместо выполнения работы по их вычислению. снова в следующий раз, когда будут предоставлены те же параметры. - person Alnitak; 11.05.2012
comment
правильно, вы не вычисляете .getHours() или .getMinutes() снова. - person jbabey; 11.05.2012
comment
@jbabey нет, это не мемоизация, если вы просто сохраняете временные значения внутри функции. Посмотрите ссылку, которую я разместил в предыдущем комментарии. - person Alnitak; 11.05.2012
comment
я бы рассмотрел эту мемоизацию, когда частные переменные будут вашей таблицей поиска, но это просто семантика: P - person jbabey; 11.05.2012
comment
@jbabey нет, это не семантика. Мемоизация — это конкретно автоматическое кэширование результата детерминированной функции с заданным вводом, так что последующие вызовы той же функции с тем же вводом извлекают значение из кэша. вместо перерасчета. - person Alnitak; 11.05.2012

function getClockTime(){
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var second = now.getSeconds();
   var ap = "AM";
   if (hour   > 11) { ap = "PM";             }
   if (hour   > 12) { hour = hour - 12;      }
   if (hour   == 0) { hour = 12;             }
   if (hour   < 10) { hour   = "0" + hour;   }
   if (minute < 10) { minute = "0" + minute; }
   if (second < 10) { second = "0" + second; }
   var timeString = hour + ':' + minute + ':' + second + " " + ap;
   return timeString;
}

Эта функция даст идеальный формат времени в 1-12 часов

person Baraskar Sandeep    schedule 26.02.2014
comment
Почему вы форматируете минуты и секунды? думаю не надо. - person mejiamanuel57; 29.04.2014
comment
Просто продолжение - форматирование минут и секунд необходимо, потому что JS getMinutes и getSeconds вернут одно целое число для времени. В отличие от 05, он вернет 5. - person Chris Timberlake; 03.02.2018

Другие ответы действительно очень хороши. Но я думаю, что следующее также может быть включено.

var d = new Date();
var hour = d.getHours(); 
var minute = d.getMinutes();
var fulltime = "";

// create a 24 elements(0-23) array containing following values
const arrayHrs = [12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11];

    // since getMinutes() returns 0 to 9 for upto 9 minutes, not 00 to 09, we can do this
    if(minute < 10) {
        minute = "0" + minute;
    }

    if( hour < 12) {
        // Just for an example, if hour = 11 and minute = 29
        fulltime = arrayHrs[hour] + ":" + minute + " AM"; // fulltime = 11:29 AM
    }
    else {
        // similarly, if hour = 22 and minute = 8
        fulltime = arrayHrs[hour] + ":" + minute + " PM"; // fulltime = 10:08 PM
    }

Посмотрите, что я сделал там в arrayHrs;)

person falero80s    schedule 26.06.2017

Самое короткое:

const hours12 = date => (date.getHours() % 12  || 12);

Если вам нужно заполнить 0:

const hours12 = date => ("0"+(date.getHours() % 12  || 12)).slice(-2);

Еще один вариант, также с AM & PM:

const hours12 = date => date.toLocaleString('en-US', { hour: 'numeric', hour12: true })
person chickens    schedule 06.04.2020

простой способ использовать это.

setInterval(function() {

var d = new Date();

document.getElementById("demo").innerHTML = 
d.getHours() % 12+" : "+d.getMinutes()+" : "+d.getSeconds();

}, 1000);
<p id="demo" ></p>

person mahde amar    schedule 09.02.2018

Ответ, аналогичный принятому, но без оператора ||.

Чисто арифметически:

// returns the hours number for a date, between 1 and 12
function hours12(date) { return (date.getHours() + 11) % 12 + 1; }

Проверьте это здесь. Моделирование часов 0–23:

var demoTable = document.getElementById("demo");

// simulate getHours() values 0-23
for (i = 0; i < 24; i++) {
  var row = demoTable.insertRow(-1);
  var format24Cell = row.insertCell(0);
  var conversionCell = row.insertCell(1);
  var format12Cell = row.insertCell(2);
  format24Cell.innerHTML = i;
  conversionCell.innerHTML = "( <b>" + i + "</b> + 11) % 12 + 1 =";
  
  // conversion takes place here
  format12Cell.innerHTML = (i + 11) % 12 + 1;
}
table {
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
}

th {
  padding: 0, 5px
}

td {
  padding-left: 5px;
}
<table id="demo">
  <tr>
    <th colspan="3">24 to 12 Hour Format Conversion Demo</th>
  <tr>
  <tr>
    <th>24 Hour Format</th>
    <th>Conversion</th>
    <th>12 Hour Format</th>
  </tr>
</table>

person William Herrmann    schedule 09.08.2019

This converts 24h Time to 12h, and also add AM, and PM suffix too.

const hours12 = (date) => {
    let ampm = date.getHours() >= 12 ? 'pm' : 'am';
    return `${(date.getHours() % 12  || 12)} ${ampm}`;
};
console.log(hours12(new Date()));

модифицированная версия @chickens.

person Don Dilanga    schedule 16.03.2021

Этого легко добиться с помощью функции .getHours(). Помните, что getHours возвращает целочисленные значения от 0 до 23, поэтому все, что вам нужно сделать, это проверить значение 0.

let date = new Date()
let hour = (date.getHours()===0)? 24:date.getHours()

person Wise    schedule 04.08.2021