unix Epoch类功能

mo49yndu  于 5个月前  发布在  Unix
关注(0)|答案(1)|浏览(63)

我试图使JavaScript代码,我可以把一个<span class="epoch>(unix timestamp)</span>,它将设置为在用户的时区时间戳。
到目前为止,我有这样的代码:

let epoch = document.getElementsByClassName("epoch");
for (var i = 0; i < epoch.length; i++) {
    let d = new Date(parseInt(epoch.item(i))).toDateString({ weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' });
    epoch.item(i).innerText = d;
}

字符串
我试着用alert(d);替换epoch.item(i).innerText = d;,但仍然不起作用。
HTML(不是完整版本,但仍然有相同的东西):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mesure73L</title>
  <link href="index.css?v=1" rel="stylesheet" type="text/css" />
  <script src="index.js?v=1" defer></script>
  <script src="https://mesure.x10.mx/public_assets/main.js?v=1" defer></script>
  <script id="mobile_navbar"></script>
  <link rel="icon" type="image/x-icon" href="favicon.png">
</head>

<body>
  <script id="replace_with_navbar" src="https://mesure.x10.mx/public_assets/navbar.js?v=1"></script>
  <div id="content">
    <p><span id="epoch">1700523189</span></p>
  </div>
</body>

</html>

5q4ezhmt

5q4ezhmt1#

原始应答

在JavaScript代码中有一些需要纠正和改进的地方,以实现您正在寻找的功能。
1.getElementsByClassName中的错字:方法名应为getElementsByClassName(复数),而不是getElementByClassName(单数)。
1.解析Timestamp:需要通过epoch元素的innerText调用parseInt函数,将epoch timestamp字符串转换为数字。
1.日期toDateString方法不接受任何参数。要格式化日期,您应该使用toLocaleDateString,它允许指定格式选项。
1.您正在使用ID作为epoch并调用Class。

let epochs = document.getElementsByClassName("epoch");
for (var i = 0; i < epochs.length; i++) {
    let timestamp = parseInt(epochs[i].innerText, 10);
    let date = new Date(timestamp * 1000); // Convert to milliseconds
    let formattedDate = date.toLocaleDateString(undefined, { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'short', 
        day: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit', 
        timeZoneName: 'short' 
    });
    epochs[i].innerText = formattedDate;
}

字符串

说明:

  • getElementsByClassName("epoch")返回一个包含已找到元素的实时HTMLCollection,类名为“epoch”。
  • parseInt(epochs[i].innerText, 10)将每个元素的内部文本解析为以10为底的整数(纪元时间戳)。
  • new Date(timestamp * 1000)从纪元时间戳创建一个新的Date对象。纪元时间以秒为单位,但JavaScript的Date对象构造函数需要毫秒,因此乘以1000。
  • toLocaleDateString(undefined, {...})根据用户的本地设置格式化日期(undefined使其使用用户的区域设置)。选项对象指定如何表示日期的各个部分。
  • 最后,epochs[i].innerText = formattedDate用格式化的日期字符串替换每个span的内部文本。

JSFiddle链接:https://jsfiddle.net/Termato/d1ytopuq/1/

更新:

使用以下代码:

<span class="epoch">(epoch timestamp)</span>


然后对于JavaScript:

window.onload = function() {
    // Get the current timestamp in seconds
    var milliseconds = new Date().getTime();

    // Create a Date object from the current timestamp
    let date = new Date(milliseconds * 1000);

    // Find the span element and set its content
    let epochSpan = document.querySelector('.epoch');
    if (epochSpan) {
        epochSpan.innerText = date;
    }
};


你可以在这里看到JSFiddle:https://jsfiddle.net/Termato/hr7ytf1p/5/
在你的问题中,你引用了一个类,但在你的代码中epoch是一个ID。这不起作用。要么使<span class="epoch">或更改JavaScript以针对ID:document.querySelector('#epoch');
请参见此JS Fiddle示例:https://jsfiddle.net/Termato/zmcaoxb9/2/

相关问题