前端獲取時間戳詳解

一、前端獲取時間戳13位與10位區別

時間戳是指從1970年01月01日00時00分00秒開始到現在的秒數。前端獲取時間戳有兩種形式：13位時間戳和10位時間戳。13位時間戳是指當前時間的毫秒數，10位時間戳是指當前時間的秒數。

二、前端獲取時間戳是為什麼

前端獲取時間戳可以用於實現一些時間相關的功能，例如計時器、倒計時、日期選擇器等。

三、前端獲取時間戳轉換為時間格式

/**
 * 將時間戳轉換為時間格式
 * @param {number} timestamp - 時間戳
 * @param {string} format - 時間格式，例如 'yyyy-MM-dd HH:mm:ss'
 * @return {string} 轉換後的時間字符串
 */
function formatTimestamp(timestamp, format) {
  var date = new Date(timestamp);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  var padding = function (num) { return num < 10 ? '0' + num : num };
  return format.replace('yyyy', year).replace('MM', padding(month)).replace('dd', padding(day)).replace('HH', padding(hour)).replace('mm', padding(minute)).replace('ss', padding(second));
}

上述代碼中的 format 參數是時間格式字符串，可以自定義格式，也可以使用常用格式，例如 ‘yyyy-MM-dd HH:mm:ss’。

四、前端獲取服務器時間戳

/**
 * 獲取服務器時間戳
 * @param {Function} callback - 回調函數，獲取服務器時間成功後執行
 */
function getServerTimestamp(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', window.location.href, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var serverTimestamp = new Date(xhr.getResponseHeader('Date')).getTime();
      callback(serverTimestamp);
    }
  };
  xhr.send(null);
}

上述代碼中的 XMLHttpRequest 使用 HEAD 方法獲取服務器響應頭中的 Date 字段，該字段是服務器當前時間的時間戳，通過 getTime() 方法可以獲得對應的毫秒數。callback 參數是獲取服務器時間成功後的回調函數。

五、前端獲取時間戳為null

前端獲取時間戳為 null 的情況可能是在出錯或者不支持的瀏覽器中出現，需要注意處理。

六、前端獲取時間戳1000

在一些需要直接使用時間戳的場合，需要將秒級的時間戳轉換為毫秒級的時間戳，例如：

var timestamp = 1620139865; // 秒級時間戳
var timestamp_ms = timestamp * 1000; // 毫秒級時間戳

七、前端怎麼實時獲取時間

可以使用 setInterval() 函數來定時獲取當前時間並更新顯示：

setInterval(function() {
  var now = new Date(); // 獲取當前時間
  var formattedTime = formatTimestamp(now, 'yyyy-MM-dd HH:mm:ss'); // 轉換為格式化時間字符串
  document.getElementById('time').textContent = formattedTime; // 更新顯示
}, 1000); // 每秒鐘更新一次

上述代碼中的 formatTimestamp() 函數是前面介紹的將時間戳轉換為時間格式的函數，可以自定義時間格式。document.getElementById(‘time’) 是要更新的顯示元素。

八、前端獲取當前時間

可以直接創建 Date 對象獲取當前時間：

var now = new Date(); // 獲取當前時間對象
var timestamp = now.getTime(); // 獲取時間戳
var formattedTime = formatTimestamp(now, 'yyyy-MM-dd HH:mm:ss'); // 轉換為格式化時間字符串

九、前端時間戳轉換日期格式

前面已經介紹了將時間戳轉換為時間格式的函數，可以直接使用該函數：

var timestamp = 1620139865000; // 毫秒級時間戳
var formattedTime = formatTimestamp(timestamp, 'yyyy-MM-dd HH:mm:ss'); // 轉換為格式化時間字符串

十、前端給後端傳遞時間戳

在向後端傳遞時間信息時，通常使用時間戳作為參數。

var timestamp = new Date().getTime(); // 獲取當前時間戳
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api?timestamp=' + timestamp, true);
xhr.send(null);

上述代碼中的 /api 是後端接口的 URL，timestamp 是時間戳參數。