使用Javascript函数在html元素前添加文本

Question

我正在尝试使用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。将这样的虚拟日期添加到字符串的最佳方法是什么?顺便说一下，日期只与本地化功能相关。

Answer 1

您可以选择任何您想要的日期，只要格式正确即可。你可以这样做:WORKING DEMO

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)
});