{"id":1260,"date":"2026-04-17T16:16:34","date_gmt":"2026-04-17T08:16:34","guid":{"rendered":"https:\/\/www.05621997.xyz\/?page_id=1260"},"modified":"2026-04-17T16:21:02","modified_gmt":"2026-04-17T08:21:02","slug":"%e5%85%a8%e7%90%83%e6%97%b6%e5%8c%ba%e8%bd%ac%e6%8d%a2","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e5%85%a8%e7%90%83%e6%97%b6%e5%8c%ba%e8%bd%ac%e6%8d%a2\/","title":{"rendered":"\u5168\u7403\u65f6\u533a\u8f6c\u6362"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1260\" class=\"elementor elementor-1260\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1dc0c3b e-con-full e-flex e-con e-parent\" data-id=\"1dc0c3b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c6921b elementor-widget elementor-widget-heading\" data-id=\"2c6921b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u5168\u7403\u65f6\u533a\u8f6c\u6362<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-721a612 e-con-full e-flex e-con e-parent\" data-id=\"721a612\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9dc6997 elementor-widget elementor-widget-heading\" data-id=\"9dc6997\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">\u91cd\u65b0\u9009\u62e9\u533a\u57df\u540e\uff0c\u9700\u70b9\u51fb\u5237\u65b0\u6309\u94ae<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a66597 e-con-full e-flex e-con e-parent\" data-id=\"7a66597\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2d1071 elementor-widget elementor-widget-html\" data-id=\"b2d1071\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tzc-global-wrapper\">\r\n  <div class=\"tzc-container\">\r\n    <div class=\"tzc-row\">\r\n      <div class=\"tzc-col\">\r\n        <label class=\"tzc-label\">\u533a\u57df A<\/label>\r\n        <select id=\"tzcZone1\" class=\"tzc-select\"><\/select>\r\n        <div class=\"tzc-time-card\">\r\n          <div class=\"tzc-time-value\" id=\"tzcTime1\">--:--:--<\/div>\r\n          <div class=\"tzc-date-value\" id=\"tzcDate1\">----\u5e74--\u6708--\u65e5<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"tzc-col\">\r\n        <label class=\"tzc-label\">\u533a\u57df B<\/label>\r\n        <select id=\"tzcZone2\" class=\"tzc-select\"><\/select>\r\n        <div class=\"tzc-time-card\">\r\n          <div class=\"tzc-time-value\" id=\"tzcTime2\">--:--:--<\/div>\r\n          <div class=\"tzc-date-value\" id=\"tzcDate2\">----\u5e74--\u6708--\u65e5<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"tzc-diff-area\">\r\n      <div class=\"tzc-diff-label\">\u65f6\u5dee (A - B)<\/div>\r\n      <div class=\"tzc-diff-value\" id=\"tzcDiff\">--\u5c0f\u65f6--\u5206\u949f<\/div>\r\n    <\/div>\r\n    <button id=\"tzcRefreshBtn\" class=\"tzc-refresh-btn\">\ud83d\udd04 \u5237\u65b0<\/button>\r\n    <div class=\"tzc-note\">\u6570\u636e\u57fa\u4e8e\u670d\u52a1\u5668\u65f6\u95f4\uff0c\u5b9e\u65f6\u5bf9\u6bd4<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .tzc-global-wrapper {\r\n    max-width: 900px;\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    background: linear-gradient(145deg, #f0f7ff 0%, #e9f0fa 100%);\r\n    border-radius: 2rem;\r\n    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);\r\n    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n    transition: all 0.2s;\r\n  }\r\n  .tzc-container {\r\n    padding: 1.8rem 2rem 2rem;\r\n  }\r\n  .tzc-row {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 1.5rem;\r\n    margin-bottom: 2rem;\r\n  }\r\n  .tzc-col {\r\n    flex: 1;\r\n    min-width: 240px;\r\n    background: rgba(255, 255, 255, 0.6);\r\n    backdrop-filter: blur(4px);\r\n    border-radius: 1.5rem;\r\n    padding: 1.2rem 1rem;\r\n    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);\r\n  }\r\n  .tzc-label {\r\n    display: block;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    color: #1e4a6e;\r\n    margin-bottom: 0.6rem;\r\n    letter-spacing: 0.5px;\r\n    padding-left: 0.4rem;\r\n  }\r\n  .tzc-select {\r\n    width: 100%;\r\n    padding: 0.75rem 1rem;\r\n    border-radius: 2rem;\r\n    border: 1px solid #cbdde9;\r\n    background: white;\r\n    font-size: 0.95rem;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: 0.2s;\r\n    margin-bottom: 1.2rem;\r\n    font-family: inherit;\r\n  }\r\n  .tzc-select:focus {\r\n    outline: none;\r\n    border-color: #2c7da0;\r\n    box-shadow: 0 0 0 3px rgba(44, 125, 160, 0.2);\r\n  }\r\n  .tzc-time-card {\r\n    background: #ffffffcc;\r\n    border-radius: 1.25rem;\r\n    padding: 0.8rem 0.5rem;\r\n    text-align: center;\r\n    backdrop-filter: blur(2px);\r\n  }\r\n  .tzc-time-value {\r\n    font-size: 2rem;\r\n    font-weight: 700;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    color: #0b3b4f;\r\n    letter-spacing: 2px;\r\n    line-height: 1.2;\r\n  }\r\n  .tzc-date-value {\r\n    font-size: 0.9rem;\r\n    color: #2c6079;\r\n    margin-top: 0.4rem;\r\n    font-weight: 500;\r\n  }\r\n  .tzc-diff-area {\r\n    background: #1f4e6e;\r\n    border-radius: 1.5rem;\r\n    padding: 1rem 1.2rem;\r\n    text-align: center;\r\n    margin-bottom: 1.2rem;\r\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\r\n  }\r\n  .tzc-diff-label {\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    color: #cfe6f2;\r\n    letter-spacing: 1px;\r\n  }\r\n  .tzc-diff-value {\r\n    font-size: 1.8rem;\r\n    font-weight: 800;\r\n    color: white;\r\n    text-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n    margin-top: 0.2rem;\r\n  }\r\n  .tzc-refresh-btn {\r\n    width: 100%;\r\n    background: #2c7da0;\r\n    border: none;\r\n    padding: 0.9rem;\r\n    border-radius: 3rem;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    color: white;\r\n    cursor: pointer;\r\n    transition: 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 0.5rem;\r\n    box-shadow: 0 5px 12px rgba(44, 125, 160, 0.3);\r\n    font-family: inherit;\r\n  }\r\n  .tzc-refresh-btn:hover {\r\n    background: #1f5e7a;\r\n    transform: scale(0.98);\r\n  }\r\n  .tzc-note {\r\n    text-align: center;\r\n    font-size: 0.7rem;\r\n    color: #5f7f92;\r\n    margin-top: 1rem;\r\n  }\r\n  @media (max-width: 680px) {\r\n    .tzc-container {\r\n      padding: 1.2rem;\r\n    }\r\n    .tzc-time-value {\r\n      font-size: 1.5rem;\r\n    }\r\n    .tzc-diff-value {\r\n      font-size: 1.4rem;\r\n    }\r\n  }\r\n  @media (max-width: 540px) {\r\n    .tzc-row {\r\n      flex-direction: column;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const API_ENDPOINT = '\/wp-json\/tzcmp\/v1\/compare';\r\n  const zoneSelect1 = document.getElementById('tzcZone1');\r\n  const zoneSelect2 = document.getElementById('tzcZone2');\r\n  const timeElem1 = document.getElementById('tzcTime1');\r\n  const dateElem1 = document.getElementById('tzcDate1');\r\n  const timeElem2 = document.getElementById('tzcTime2');\r\n  const dateElem2 = document.getElementById('tzcDate2');\r\n  const diffElem = document.getElementById('tzcDiff');\r\n  const refreshBtn = document.getElementById('tzcRefreshBtn');\r\n\r\n  const commonTimezones = [\r\n    \"UTC\", \"Europe\/London\", \"Europe\/Paris\", \"Europe\/Berlin\", \"Europe\/Moscow\",\r\n    \"America\/New_York\", \"America\/Chicago\", \"America\/Denver\", \"America\/Los_Angeles\",\r\n    \"America\/Sao_Paulo\", \"Asia\/Dubai\", \"Asia\/Kolkata\", \"Asia\/Jakarta\", \"Asia\/Shanghai\",\r\n    \"Asia\/Tokyo\", \"Asia\/Seoul\", \"Australia\/Sydney\", \"Pacific\/Auckland\", \"Africa\/Cairo\",\r\n    \"Africa\/Johannesburg\"\r\n  ];\r\n\r\n  function populateSelect(selectElement, selectedValue) {\r\n    if (!selectElement) return;\r\n    selectElement.innerHTML = '';\r\n    commonTimezones.forEach(tz => {\r\n      const option = document.createElement('option');\r\n      option.value = tz;\r\n      option.textContent = tz.replace(\/_\/g, ' ');\r\n      if (tz === selectedValue) option.selected = true;\r\n      selectElement.appendChild(option);\r\n    });\r\n    if (!selectedValue && commonTimezones.length) {\r\n      selectElement.value = commonTimezones[0];\r\n    }\r\n  }\r\n\r\n  function formatTime(date) {\r\n    const year = date.getFullYear();\r\n    const month = String(date.getMonth() + 1).padStart(2, '0');\r\n    const day = String(date.getDate()).padStart(2, '0');\r\n    const hours = String(date.getHours()).padStart(2, '0');\r\n    const minutes = String(date.getMinutes()).padStart(2, '0');\r\n    const seconds = String(date.getSeconds()).padStart(2, '0');\r\n    const weekdays = ['\u5468\u65e5', '\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d'];\r\n    const weekday = weekdays[date.getDay()];\r\n    return { time: `${hours}:${minutes}:${seconds}`, date: `${year}\u5e74${month}\u6708${day}\u65e5 ${weekday}` };\r\n  }\r\n\r\n  async function fetchTimeData() {\r\n    const tz1 = zoneSelect1.value;\r\n    const tz2 = zoneSelect2.value;\r\n    if (!tz1 || !tz2) return;\r\n    try {\r\n      const response = await fetch(API_ENDPOINT, {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application\/json' },\r\n        body: JSON.stringify({ tz1: tz1, tz2: tz2 })\r\n      });\r\n      const data = await response.json();\r\n      if (data.success) {\r\n        const date1 = new Date(data.time1);\r\n        const date2 = new Date(data.time2);\r\n        const fmt1 = formatTime(date1);\r\n        const fmt2 = formatTime(date2);\r\n        timeElem1.innerText = fmt1.time;\r\n        dateElem1.innerText = fmt1.date;\r\n        timeElem2.innerText = fmt2.time;\r\n        dateElem2.innerText = fmt2.date;\r\n        let diffText = '';\r\n        const diffHours = Math.abs(data.diffHours);\r\n        const diffMins = Math.abs(data.diffMinutes);\r\n        const sign = data.diffHours >= 0 ? '+' : '-';\r\n        if (data.diffHours === 0 && data.diffMinutes === 0) {\r\n          diffText = '\u5b8c\u5168\u76f8\u540c';\r\n        } else {\r\n          diffText = `${sign} ${diffHours}\u5c0f\u65f6${diffMins > 0 ? diffMins + '\u5206\u949f' : ''}`;\r\n        }\r\n        diffElem.innerText = diffText;\r\n      } else {\r\n        console.warn('API error', data.error);\r\n        diffElem.innerText = '\u83b7\u53d6\u5931\u8d25';\r\n      }\r\n    } catch (err) {\r\n      console.error(err);\r\n      diffElem.innerText = '\u7f51\u7edc\u9519\u8bef';\r\n    }\r\n  }\r\n\r\n  function init() {\r\n    populateSelect(zoneSelect1, 'Asia\/Shanghai');\r\n    populateSelect(zoneSelect2, 'America\/New_York');\r\n    fetchTimeData();\r\n    refreshBtn.addEventListener('click', fetchTimeData);\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5168\u7403\u65f6\u533a\u8f6c\u6362 \u91cd\u65b0\u9009\u62e9\u533a\u57df\u540e\uff0c\u9700\u70b9\u51fb\u5237\u65b0\u6309\u94ae \u533a\u57df A &#8211;:&#8211;:&#8211; &#8212;-\u5e74&#8211;\u6708&#8211;\u65e5 \u533a\u57df B &#8211;:&#8211;:&#8211; &#8212;-\u5e74&#038;#82<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1260","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1260"}],"version-history":[{"count":7,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1260\/revisions"}],"predecessor-version":[{"id":1267,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1260\/revisions\/1267"}],"up":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}