<div class="field">
<label class="label">時間戳(timestamp)</label>
<div class="field has-addons">
<p class="control has-icons-left">
<span class="icon is-small is-left">
<i class="fa-regular fa-clock"></i>
</span>
<input class="input" id="timestamp" type="number" placeholder="input timestamp">
</p>
<p class="control">
<span class="select">
<select id="unit">
<option value="1000">秒</option>
<option value="1">毫秒</option>
</select>
</span>
</p>
</div>
</div>
<div class="field">
<label class="label">日期時間(date)</label>
<div class="field-body">
<div class="field has-addons">
<div class="control has-icons-left">
<span class="icon is-small is-left">
<i class="fa-regular fa-calendar-days"></i>
</span>
<input class="input" type="text" id="calendar" placeholder="YYYY/MM/DD HH:MM:SS" maxlength="19">
</div>
<p class="control">
<a class="button is-static" id="gmt">
</a>
</p>
</div>
</div>
<p class="help">Date-Time Format:YYYY/MM/DD HH:MM:SS</p>
</div>
$(document).ready(function () {
// 設定 #timestamp 預設為當下時間戳(秒)
const now = Math.floor(Date.now() / 1000);
$("#timestamp").val(now);
// 顯示當前時區
const timezoneOffset = -new Date().getTimezoneOffset() / 60;
const gmtString = `GMT ${timezoneOffset >= 0 ? "+" : ""}${timezoneOffset}`;
$("#gmt").text(gmtString);
// 監聽 #timestamp 和 #unit 的變化
$("#timestamp").on("input", updateCalendar);
$("#unit").on("change", updateCalendar);
// 監聽 #calendar 的變化
$("#calendar").on("input", updateTimestamp);
// 手動觸發一次輸入事件,顯示當下日期時間
$("#timestamp").trigger("input");
// 更新 #calendar 的日期
function updateCalendar() {
const timestamp = parseInt($("#timestamp").val(), 10);
const unit = parseInt($("#unit").val(), 10);
if (!isNaN(timestamp)) {
const date = new Date(timestamp * unit);
const formattedDate =
date.getFullYear() +
"/" +
String(date.getMonth() + 1).padStart(2, "0") +
"/" +
String(date.getDate()).padStart(2, "0") +
" " +
String(date.getHours()).padStart(2, "0") +
":" +
String(date.getMinutes()).padStart(2, "0") +
":" +
String(date.getSeconds()).padStart(2, "0");
$("#calendar").val(formattedDate);
} else {
$("#calendar").val("");
}
}
// 更新 #timestamp 的數值
function updateTimestamp() {
const dateStr = $("#calendar").val().trim();
const dateRegex = /^\d{4}\/\d{2}\/\d{2} \d{2}:\d{2}:\d{2}$/;
if (dateRegex.test(dateStr)) {
const [datePart, timePart] = dateStr.split(" ");
const [year, month, day] = datePart.split("/").map(Number);
const [hours, minutes, seconds] = timePart.split(":").map(Number);
// 建立日期物件
const date = new Date(
year,
month - 1,
day,
hours,
minutes,
seconds
);
if (!isNaN(date.getTime())) {
const unit = parseInt($("#unit").val(), 10);
const timestamp = Math.floor(date.getTime() / unit);
$("#timestamp").val(timestamp);
}
}
}
});