/wp-content/uploads/servertime.html
JavaScriptで、ほぼサーバー時刻で動く時計を作ってみました。そのまま動くサンプルがみつからなかったので公開しておきます。ネット上のサンプルの寄せ集めレベルなので、変数名とか結構そのままだったりします。
ドラクエ10界隈にはアストルティア時計という立派なものがあります。要するに「20倍速時計」なのですが、まずそれと同じ仕組みのものを作ってみて、「PCの時刻って数十秒～数分ずれてる人もざらだよなぁ」→「サーバーの時刻を使えないかな？」と思ってネットで調べながら作りました。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<!– ■ほぼサーバー時刻で動く時計 http://dqblog.info/ アキラ –>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<style type=”text/css”>
div {
color: #000000;
font: 14px/1.2 Helvetica,Verdana,sans-serif;
}
</style>
<script type=”text/javascript”>
var timesa = 0;function n2(n) {
var ret;
if( n < 10 ){
ret = “0” + n;
}
else{
ret = n;
}
return ret;
}function getServerTimesa(){
var req = new XMLHttpRequest;
var href = window.location.href;
req.open(‘HEAD’, href, false);
req.send(null);
var server = new Date(req.getResponseHeader(‘Date’))
var now = new Date();
timesa = server – now;
}function rCheck(){
if (window.name != “akira2016”){
location.reload();
window.name = “akira2016”;
}
}function ShowStr(){
myTbl = new Array(“日”,”月”,”火”,”水”,”木”,”金”,”土”);
myD = new Date();
myD.setTime( myD.getTime() + timesa );myYear = myD.getFullYear();
myMonth = myD.getMonth() + 1;
myDate = myD.getDate();
myDay = myD.getDay();
myHours = myD.getHours();
myMinutes = myD.getMinutes();
mySeconds = myD.getSeconds();myMess1 = myYear + “年” + myMonth + “月” + myDate + “日”;
myMess2 = “（” + myTbl[myDay] + “）”;
myMess3 = myHours + “:” + n2( myMinutes ) + “.” + n2( mySeconds );
myMess = myMess1 + myMess2 + ” ” + myMess3;document.getElementById(“DispMes”).innerHTML = myMess;
}
setInterval(‘ShowStr()’,1000);
</script>
</head>
<body onLoad=”rCheck()”>
<div id=”DispMes”></div>
<script type=”text/javascript”>
getServerTimesa();
ShowStr();
</script>
</body>
</html>
ファイルはこれ1個です（html）。1個のほうが管理が楽だったので。
■function getServerTimesa()
サーバーの時刻と自分の端末の時間差がtimesaに入ります。
XMLHttpRequestはhttp://hakuhin.jp/js/xmlhttprequest.htmlなどを参照して下さい。
自分自身へのリクエストを送信するようにしてありますが、404エラーになるようにしてもGoogleCromeとFireFoxでは動きました。Edgeでは404エラーが表示されてしまったので、確実に実在するファイルを指定するという意味で自分にしているだけです。
自分のサーバーの時計が狂っててどうしようもない場合は信頼できるサーバーをしても良いかも知れませんが、自分のところのアクセス数が極端に多い人は、自分以外を指定すると攻撃とみなされかねないと思います。
■function rCheck()
一回だけ自分をリロードする仕組みに必要。リロードしないと、どうも時刻がズレたので。
■function ShowStr()
時計本体。自分の端末の時刻からtimesaだけずらすのがミソ。あとは普通の時計と同じ。
あちこち見たのですが、http://www.nishishi.com/javascript/2014/realtime-clock-setinterval.htmlここは確実に参考にしました。
■setInterval(‘ShowStr()’,1000);
ShowStrを1000ミリ秒ごとに呼び出す仕組みです。