thinkyu/Web/forms/punchcard/fmPunchCard.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="fmPunchCard.ascx.cs"
    Inherits="forms_worker_fmPunchCard" %>
<%@ Register Assembly="WNET" Namespace="Wellan.Web.UI" TagPrefix="cc1" %>
<cc1:WLabel ID="WLabel1" runat="server" CssClass="pageTitle"
    Text="打卡作業"></cc1:WLabel>
<asp:CustomValidator ID="cvMessage" runat="server" Display="None"></asp:CustomValidator>

<style type="text/css">
    .style2 {
        font-size: 30pt;
        color: Blue;
        font-weight: bold;
    }

    .style3 {
        font-size: 18pt;
        font-weight: bold;
        line-height: 150%;
    }

    .style4 {
        font-size: 18pt;
        font-weight: bold;
        line-height: 150%;
        color: Red;
    }

    .buttonOnDuty {
        font-size: 36pt;
        font-weight: bold;
        color: Black;
    }

    .buttonOffDuty {
        font-size: 36pt;
        font-weight: bold;
        color: Black;
    }
</style>
<center>
  <table border="1" cellpadding="15" cellspacing="0">
    <tr>
      <td colspan="2" align="center">
        <span <%= showTWTime ? "class='style2'" : "class='hide'" %> >台灣 </span>
        <span id="lbCurrentTimeTW" class="style2">0000-00-00 00:00:00</span>
        <span <%= showTWTime ? "class='style2'" : "class='hide'" %> ><br />本地 </span>
        <span id="lbCurrentTimeLocal" <%= showTWTime ? "class='style2'" : "class='hide'" %>>0000-00-00 00:00:00</span>
      </td>
    </tr>
    <tr>
      <td>
        <cc1:WButton ID="btnOnDuty" runat="server" Text="上班打卡" CssClass="buttonOnDuty"
          OnClick="btnOnDuty_Click" style="font-size: 36pt; height: auto;" 
          OnClientClick="if(!confirm(&quot;是否確定「上班打卡」？&quot;)) return;" 
          UseSubmitBehavior="False" />
      </td>
      <td width="300" align="center">
        <cc1:WLabel ID="lbOnDuty" runat="server" CssClass="style2" EnableViewState="False"
          TextMessageId=""></cc1:WLabel>
      </td>
    </tr>

    <tr>
      <td>
        <cc1:WButton ID="btnOut" runat="server" Text="出差外出" CssClass="buttonOnDuty"
          OnClick="btnOut_Click" style="font-size: 36pt; height: auto;" 
          OnClientClick="if(!confirm(&quot;是否確定「出差外出」？&quot;)) return;" 
          UseSubmitBehavior="False" />
      </td>
      <td width="300" align="center">
        <cc1:WLabel ID="lbOut" runat="server" CssClass="style2" EnableViewState="False"
          TextMessageId=""></cc1:WLabel>
      </td>
    </tr>

    <tr>
      <td>
        <cc1:WButton ID="btnBack" runat="server" Text="出差返回" CssClass="buttonOnDuty"
          OnClick="btnBack_Click" style="font-size: 36pt; height: auto;" 
          OnClientClick="if(!confirm(&quot;是否確定「出差返回」？&quot;)) return;" 
          UseSubmitBehavior="False" />
      </td>
      <td width="300" align="center">
        <cc1:WLabel ID="lbBack" runat="server" CssClass="style2" EnableViewState="False"
          TextMessageId=""></cc1:WLabel>
      </td>
    </tr>

    <tr>
      <td>
        <cc1:WButton ID="btnOffDuty" runat="server" Text="下班打卡" CssClass="buttonOffDuty"
          OnClick="btnOffDuty_Click" style="font-size: 36pt; height: auto;" 
          OnClientClick="if (!confirm(&quot;是否確定「下班打卡」？&quot;)) return;" 
          UseSubmitBehavior="False" />
      </td>
      <td align="center">
        <cc1:WLabel ID="lbOffDuty" runat="server" CssClass="style2" EnableViewState="False"
          TextMessageId=""></cc1:WLabel>
      </td>
    </tr>

  </table>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <div class="style3" style="text-align: left">
          <br />
          請注意：
          <ol>
            <li>打卡時間以主機時間為準，畫面上時間僅為參考之用。</li>
            <li>主機每週會與國家時間伺服器對時。</li>
            <li class="style4">打卡後無法取消，請注意不要按錯。</li>
            <li>派遣於桃竹苗分署之人員，若有疑義，服務專線如下：<br/>
                桃竹苗分署服務專線：03-4855368 分機 1185<br/>
                傳真：03-4855912<br/>
                email：<a href="mailto:hanchiang1@wda.gov.tw">hanchiang1@wda.gov.tw</a></li>
            <li>派遣於北分署之人員，若有疑義，服務專線如下：<br/>
                02-22560859 分機 102</li>
          </ol>
        </div>
      </td>
    </tr>
  </table>
</center>

<script type="text/javascript">
    //<!--
    var now = new Date();

    function InitialTime()
    {
        // now.setTime(<%= nowtime%> - now.getTimezoneOffset() * 60 * 1000);
        now.setTime(<%= nowtime %>);
        UpdateTime();
        StartTimer();
    }

    function StartTimer()
    {
        window.setInterval("UpdateTime();", 1000);
    }

    function UpdateTime()
    {
        // 顯示台灣時間

        const twNow = new Date(now.getTime() + (8 * 60 * 60 * 1000));

        let twYear = twNow.getUTCFullYear();
        let twMonth = twNow.getUTCMonth() + 1;
        let twDay = twNow.getUTCDate();
        let twHour = twNow.getUTCHours();
        let twMin = twNow.getUTCMinutes();
        let twSec = twNow.getUTCSeconds();

        if (twHour >= 0 && twHour < 6)
        {
            let aNow = new Date();
            aNow.setTime(twNow.getTime() - 86400000);
            twYear = aNow.getUTCFullYear();
            twMonth = aNow.getUTCMonth() + 1;
            twDay = aNow.getUTCDate();
            twHour = twHour + 24;
        }

        twMonth = String(twMonth).padStart(2, '0');
        twDay = String(twDay).padStart(2, '0');
        twHour = String(twHour).padStart(2, '0');
        twMin = String(twMin).padStart(2, '0');
        twSec = String(twSec).padStart(2, '0');

        document.getElementById("lbCurrentTimeTW").innerText = `${twYear}-${twMonth}-${twDay} ${twHour}:${twMin}:${twSec}`;


        // 顯示當地時間

        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let min = now.getMinutes();
        let sec = now.getSeconds();

        if (hour >= 0 && hour < 6) {
            let aNow = new Date();
            aNow.setTime(now.getTime() - 86400000);
            year = aNow.getUTCFullYear();
            month = aNow.getUTCMonth() + 1;
            day = aNow.getUTCDate();
            hour = hour + 24;
        }

        month = String(month).padStart(2, '0');
        day = String(day).padStart(2, '0');
        hour = String(hour).padStart(2, '0');
        min = String(min).padStart(2, '0');
        sec = String(sec).padStart(2, '0');

        document.getElementById("lbCurrentTimeLocal").innerText = `${year}-${month}-${day} ${hour}:${min}:${sec}`;

        now.setTime(now.getTime() + 1000);
    }

    InitialTime();
    //-->
</script>