見た目を少し改善。
診療時間のページに、表示するようにした「本日の日付と曜日」ですが、背景色をgrayからlightgrayに変更して見やすくしました。
画像は、7インチタブレットで表示したもの。
Ｗｅｂサーバの時計を参照し、本日の日付を表示しています。
ちなみに、このブログ（WordPress）は自宅サーバ（中古ノートＰＣ）で稼動しています。
自宅サーバＰＣとローカルＰＣそれぞれの時計を参照した時刻を表示させてみると以下の様になります。
（サーバはPHPで、ローカルPCはJavaScriptで時刻を取得。）
ソースを多少ですが改善しました。
JavaScriptで、ゼロ埋めする際は、slice を使用するのがスマートで良いらしいので盛り込んでみました。_client_today.htmlファイル14～18行。
また、JavaScript 版_client_today.htmlファイル26行目のコメント（先頭の”// “）を削除すれば、リアルタイムの時間を刻むデジタル時計になります。
PHP 版の方は、サーバに負荷がかかる為、同じ方法はできません。やるとすれば、サーバに負荷をかけないように、ある程度長めの間隔でサーバの時刻を取り込みJavaScriptで時計らしく表示すれば良いのでしょうが、むずかしそうなので、あきらめました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Today</title> <link rel="stylesheet" type="text/css" href="today_date.css"> </head> <body> <iframe src="_server_today.php" class="s_today" frameborder=0 width=280px height=64px></iframe> <br clear='all'> <iframe src="_client_today.html" class="c_today" frameborder=0 width=280px height=64px></iframe> </body> </html>
.txtToday {
font-weight: 600;
font-size: 1.1em;
text-align: center;
}
.s_today {
background-color: lightgray;
border: 1px solid black;
}
.c_today {
background-color: gold;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="today_date.css">
<?php
function text_disp() {
$yobi = array("日","月","火","水","木","金","土","日");
$yo = date("N");
$msg = "<br>(自宅サーバＰＣの時計より)";
echo date("Y/m/d")."(".$yobi[$yo].") ".date("H:i:s").$msg;
}
?>
</head>
<body>
<div class="txtToday"><?php text_disp(); ?></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="today_date.css">
<script language="JavaScript">
<!--
yobi = new Array("日","月","火","水","木","金","土");
function text_disp() {
//今日の日付と現在の時刻を表示
jikoku = new Date();
y = jikoku.getYear() + 1900;
g = ("0"+(jikoku.getMonth()+1)).slice(-2);
d = ("0"+jikoku.getDate()).slice(-2);
t = ("0"+jikoku.getHours()).slice(-2);
m = ("0"+jikoku.getMinutes()).slice(-2);
s = ("0"+jikoku.getSeconds()).slice(-2);
yo = jikoku.getDay();
now_Date = y+"/"+g+"/"+d;
now_Time = t+":"+m+":"+s;
now_Yobi = "("+yobi[yo]+") ";
msg = "<br>(現在御使用ＰＣの時計より)";
now_Text = now_Date + now_Yobi + now_Time + msg;
document.getElementById('now_text').innerHTML = now_Text;
// setTimeout('text_disp()', 1000); // コメント解除でデジタル時計
}
-->
</script>
</head>
<body onload="text_disp();">
<div id="now_text" class="txtToday"> </div>
</body>
</html>
関連記事：
本日の日付と曜日