2011年9月17日土曜日

ASP.NETでデータベース等より取得した時間を元にデジタル時計を表示する方法。

ASP.NET で出退勤のシステムを作ることになったので、
画面上にデジタル時計を表示する必要があったので作成しました。
時計のカウントアップにJavaScriptを使用しています。
1秒毎にデータベースの値を取得するとデータベースに負荷が掛かるので、
5分毎にデータベースの値を取得するようにしています。
JavaScriptでデータベースアクセスの方法が分からなかったので、
荒業ですが、ページを再ロードする方法をとっています。
ここの部分は再度考慮の必要があると思います。

※注意が必要なのが、なぜかJavaScriptのデータは月を-1して日付計算をする必要があるみたいです。
詳しくは調べていませんのでデマかも知れません。



    Protected Sub Set_Watch()
        Dim sf As New Shared_Function
        Dim sdatetime As String
        Dim strScript As String = ""
        Dim numyear As String
        Dim numman As String
        Dim numday As String
        Dim numtime As String
        Dim nummin As String
        Dim numscn As String

       

         'データベースより時間を取ってくる YYYY/MM/DD HH24:MI:SS 形式
        sdatetime = sf.Get_Str_Sysdatetime

        'それぞれを年,月,日,時間,分,秒に分ける。
        numyear = Mid(sdatetime, 1, 4)
        numman = Mid(sdatetime, 6, 2)
        numday = Mid(sdatetime, 9, 2)
        numtime = Mid(sdatetime, 12, 2)
        nummin = Mid(sdatetime, 15, 2)
        numscn = Mid(sdatetime, 18, 2)

 

        strScript = ""
        strScript &= "<script language=javascript>"
        strScript &= "numyear = Number(" + numyear + ");"

        'javascriptの仕様で月は-1する
        strScript &= "numman = Number(" + numman + ")-1;"  
        strScript &= "numday = Number(" + numday + ");"
        strScript &= "numtime = Number(" + numtime + ");"
        strScript &= "nummin = Number(" + nummin + ");"
        strScript &= "numscn = Number(" + numscn + ");"
        strScript &= "aa = 0;"

        strScript &= "function Watch() {"

        '5分毎にページを再ロードしデータベースの値を取得
        strScript &= "if(aa == 300000)" & _

                             "{parent.location.href = '../In_Out_Check/Entry.aspx';};"

        '取得した値をDate型に変換
        strScript &= "now = " &  _

                               new Date(numyear,numman,numday,numtime,nummin,numscn );"

        'データベースの値は5分ごとに再取得するので

        'それでは1000ミリ秒ずつセットしなおす。
        strScript &= "now.setTime(now.getTime()+aa);"
        strScript &= "now.getTime();"

        strScript &= "year = now.getYear();"

        'Date変換時にマイナスした分を足す。

        strScript &= "month = now.getMonth()+1;" 

        strScript &= "day = now.getDate();"
        strScript &= "hour = now.getHours();"
        strScript &= "minute = now.getMinutes();"
        strScript &= "second = now.getSeconds();"
        strScript &= "now = new Date();"
        strScript &= "if (year < 1000) { year += 1900 }"
        strScript &= "if (hour < 10) { hour = '0' + hour }"
        strScript &= "if (minute < 10) { minute = '0' + minute }"
        strScript &= "if (second < 10) { second = '0' + second }"

        'ID=watchのテキストに時間を渡す。 aspx上に配置必要
        strScript &= "document.getElementById(""watch"").value = " & _

                              "  hour + ':' + minute + ':' + second;"

        'ID=DataTextのテキストに年月等を渡す。
        strScript &= "document.getElementById(""DateText"").value = " & _

                                " year+'年' + month + '月' + day;"

 

        strScript &= "aa = aa + 1000;"
        strScript &= "};"

        '1000ミリ秒(1秒ごと) watchを動かす。
        strScript &= "window.onload=function(){"
        strScript &= "setInterval(function(){Watch()},1000);"
        strScript &= "};"
        strScript &= "</script>"
        Response.Write(strScript)

    End Sub



ASP.NET VB2005 デジタル時計 JavaScript 表示

 

0 件のコメント:

コメントを投稿