Q&A
回答ありがとうございます！
すいませんですが、javascriptは学んでいないので、読んで見てもさっぱりです。
サイトでカウントする数字を、オフラインでもカウントする様なコードが書ければ簡単なのですが...
https://emaame.github.io/salmonrun_time_timer/ このサイトの様な、一定時間を刻み続ける、カウントダウンタイマーを作りたくて、表示する時間は、世界共通で更新してもリセットされない様にしたいです。
html
1<!DOCTYEPE html><html lang= “ja”> 2<head> 3<meta charset=utf-8> 4<title>xxxxx</title> 5<link rel="stylesheet" type="text/ css" href=“xxxxx” > 6</head> 7<body> 8<script> 9var iInterval=720;var iSec=iInterval;function fCount(){iSec--;if(iSec<0){iSec=iInterval}document.getElementById("pCount").innerHTML=iSec;}function fStart(){PassageID = setInterval("fCount()",1000);document.getElementById("bCount").disabled=true;} 10</script> 11<p> 12<input type="button" value="開始" id="bCount" onclick="fStart();" /> 13</p> 14<p id="pCount"></p> 15</body></html>
このコードでは、更新ボタンを押す、またはブラウザバックすると、カウントがリセットされてしまいます、共通した、タイマーを使うにはNICTのサービスが必要なそうですが、どの様に利用すれば良いのでしょうか？
回答2件
0
共通した、タイマーを使うにはNICTのサービスが必要なそうですが、
「共通した」の意味合いによります。
- 「パソコンの時計が狂っていても、それを補正して共通で動かす」場合には必要になります。
- 「どこからアクセスしても同じタイマー表示を共有したい」という場合、必要なのはデータ保存の機能です（ブラウザJavaScriptだけでは実現できません）。
投稿2019/03/07 05:11
総合スコア145184
0
共通した、タイマーを使うにはNICTのサービスが必要なそうですが
いや別にNICTは必須ではありません。
その共通タイマーに必要な情報は後720秒かという数値ではなく、
UTC時刻という絶対的な日時です。
720秒って何時から何時に対しての720秒やねん。
UTCとは全世界の標準時刻です。
(モデルは世界の中心と言われるロンドンのグリニッジ天文台)
このUTCが何年何月何日の何時何分何秒かであるかという情報です。
これを暫定的に「ターゲット時刻」と呼びます。
JavaScriptでnew Date()を実行すれば現在時刻を取得できます。
日本人のパソコンは言語設定が日本語になっているので、タイムゾーン設定もJSTになっているはずです。
(こちらのモデルは日本の中央にある明石市の交差点標柱です)
この日本標準時刻をマイナス9時間すればUTCを求める事が可能です。
「現在時刻」と「ターゲット時刻」との差分を取り、
「後何秒の差があります」という情報を求めて表示するのが貴方の仕事です。
NICTのサービスとはなんぞや？
JavaScriptでnew Date()を実行すれば現在時刻を取得できると言いましたが、
これは厳密に言えば嘘です。
new Date()で取得出来るのはパソコンで設定した時刻です。
手動で時刻合わせをして5時間後等に設定すると、
new Date()で取得する時刻も5時間後ろにずれます。
パソコンに普通使われている時計は精度が悪く、数日もすれば1秒程狂います。
ですので、new Date()で取得出来る時刻は狂ってるわけですね。
じゃあ本物の時刻はどこにあるねんみたいな話があって、
この「本物の時刻」を配信しているサービスがNICTです。
一度NICTにアクセスを送ってからnew Date()の誤差を求め、
「new Date()→UTCに変換→誤差補正」という流れを用いて正確なUTCを作り出しているのです。
どの様に利用すれば良いのでしょうか？
teratailのガイドラインの話をするとコードのクレクレになっているので、
本来であれば「丸投げの質問」として低評価を山程貰って回答が付かない状態になってしまうことでしょう。
ですので、もう少し頑張ってください。
ヒントを出すと、
http://www.nict.go.jp/JST/JST.htmlのサイトへ行く。
デベロッパーツールを開き、ネットワークタブ、XHRタブを開く。
Ajax通信の通信内容が表示されるので、それを解析してどんなデータをやり取りするか確認する。
それと同時に同サイトのJST5.jsファイルを開いて読んでください。
たかだか200行の平易なコードなので、読めば何やってるかはわかると思います。
これを切り貼りしながらまずは試行錯誤してみてください。
Ajaxをちら見しましたが、ヘッダーにAccess-Control-Allow-Origin: *がひっついているので、
このコードを丸ごと貴方のサイトへ持ち込んでも正しいJSTは取得出来るはずです。
投稿2019/03/07 05:09
編集2019/03/07 05:15
総合スコア21158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。