时间戳

首页 > 解决方案 > 使用 Javascript 函数将文本添加到 html 元素

javascript - 使用 Javascript 函数将文本添加到 html 元素

问题描述

我正在尝试使用 Javascript 将时间格式化为使用Intl.DateTimeFormat方法的本地化格式。

我有几个 24 小时格式的时间字符串实例，我想在 HTML 页面中本地化，例如：

<span class="timeclass">18:45</span> //and so on..

我可以使用以下代码格式化时间，该代码使用一个Date对象：

            let locale = 'en-US'; // this variable changes, example 'en-UK', etc
            let time = new Date('1971-12-12T18:45');
            console.log(new Intl.DateTimeFormat(locale, { 
              hour: 'numeric',
              minute: 'numeric',
            }).format(time));  //output is "6:45 PM"

如代码所示，我添加了一个虚拟日期，以使Date对象在语义上正确。现在，我正在尝试编写一个函数来替换timeelem类中包含的所有时间实例：

var locale = 'en-US';
var timeformat = new Intl.DateTimeFormat(locale, { 
    hour: 'numeric',
    minute: 'numeric',
});

timeelements = document.querySelectorAll('.timeclass');
timeelements.forEach((element) => { 
timeelements.textContent= timeformat.format(timeelements.textContent);  
 });

但它不起作用，因为它以格式18:45而不是1971-12-12T18:45. 将此类虚拟日期添加到字符串的最佳方法是什么？顺便说一句，日期仅与本地化功能的工作有关。

标签： javascript

解决方案

您可以选择任何您想要的日期，只要它的格式正确。你可以做这样的事情：工作演示

HTML

<span class="timeclass">18:45</span>
<span class="timeclass">18:15</span>
<span class="timeclass">11:45</span>
<span class="timeclass">02:45</span>
<span class="timeclass">22:45</span>
<span class="timeclass">23:45</span>
<span class="timeclass">18:00</span>

JAVASCRIPT

timeelements = document.querySelectorAll('.timeclass');
timeelements.forEach((element) => {
  console.log("elem ", element.innerHTML);
  // Append any date. Use your birthday.
  const timeString12hr = new Date('1970-01-01T' + element.innerHTML + 'Z')
    .toLocaleTimeString({}, {
      timeZone: 'UTC',
      hour12: true,
      hour: 'numeric',
      minute: 'numeric'
    });
    
  element.innerHTML = timeString12hr
});

- - - - - - - - - - - - 更新 - - - - - - - - - - - - 

var locale = "en-US";

var timeformat = new Intl.DateTimeFormat(locale, {
  hour: 'numeric',
  minute: 'numeric',
});

timeelements = document.querySelectorAll('.timeclass');
timeelements.forEach((element) => {
  console.log("elem ", element.innerHTML);
    const timeString12hr = new Date('1970-01-01T' + element.innerHTML + 'Z');
  element.innerHTML = timeformat.format(timeString12hr)
});

推荐阅读