CATEGORY

アナログ時計

アナログ時計の掲載を断念

昨日は、沢田内科医院HPが表示できない状況となりました。 どうやらアナログ時計のPHPの負荷が高く、サーバーが応答しなくなったようです。 現在使用のレンタルサーバーでは、能力的に厳しいようです。 従って、沢田内科医院HP上にアナログ時計を載せるのはあきらめました。 PHPを使用しないJavaScript+Canvasのアナログ時計ならサーバーに負荷をかけることはないのですが・・・。 代わりと言う訳 […]

再度、アナログ時計を少し改修

文字ベースのデジタル時計を、getElementByIdメソッド+innerHTMLでの表示から、CanvasのfillText()メソッドでの表示に変更しました。 その他、針の長さや幅、外枠の影付けなどを見直しました。 ソースをよく見ると、91行目〜107行目をコメントにしています。これをコメントアウトすれば、置き時計風の表示にできます。 しかし、見た目が今ひとつで、HPに載せてみたら、違和感が […]

アナログ時計に「再読込」ボタンを追加

アナログ時計の下部に「サーバーの時刻を再読込」ボタンを追加しました。 (下記ソース245行目) 時刻が遅れ気味になるようなので、1000ミリ秒ごとの積み上げを、995ミリ秒ごとの積み上げに変更。(237行目) それでも心もとないので、当初、60秒ごとに(00秒時に)、自動的にサーバーの時刻を再読み込みするようにしたのですが、サーバーからの応答が無く、何も表示されなくなるケースが多くなりました。 現 […]

アナログ時計をサーバー参照に

これまで、トップページのアナログ時計は、クライアントPC(閲覧者の利用端末)の時計を参照して表示していました。 今回、サーバーの時計を参照して時刻を表示するPHPプログラムに修正しました。 アクセス時にサーバーの時刻を取り込み、そこからクライントのインターバルタイマーで一秒ごとに、値を積み上げて時刻表示しています。 その為、長時間の稼働では誤差が心配なので、1時間毎に、window.locatio […]

アナログ時計のデザイン変更

短針(時針)、長針(分針)、秒針のデザインを変更しました。 CanvasのquadraticCurveTo()メソッドで、ペジェ曲線で描いたのですが、なかなか難しい・・・。 ・・・もしかすると、良いツールがあるのかも知れない・・・。 インラインフレームに表示してみました。 みっともないソースはこちら

アナログ時計を追加

診療時間のページに、「現在の時刻」と「カレンダー」を追加しました。(初回「F5」キーで再読み込み必要かも) 「現在の時刻」は、JavaScriptで閲覧端末から時刻情報を得て、HTML5のCanvas機能でアナログ時計を描画しています。 以下のサイトを参考にさせて頂きました。ありがとうございました。 HTML5 – Canvas でアナログ時計を描く|及川WEB室 ・・・当初、ロレック […]