• 締切済み

JS初心者です。このコードの式を教えてください

下記はストップウォッチのコードとなります 「startTime = startTime + (new Date()).getTime() - stopTime;」 ここの式の意味がわかりません。 startTimeは 「if (!startTime) { startTime = (new Date()).getTime(); }」 の部分で、０秒にセットされている？と思います。 ですのでストップウォッチをスタートした1秒後にストップを作動させ、再度スタートさせるときの時間は 「startTime = startTime + (new Date()).getTime() - stopTime;」つまり 「startTime = ０秒 + (new Date()).getTime() - 1秒;」 と言い換えられると思います。単純に考えて1秒でストップさせてスタートする時刻も1秒目からですので、自ずと(new Date()).getTime()の中身は２秒になっちゃうと思っているのですが、どこからそのような数字がくるんだよということで絶対に違うと思います。 色々とわかりません。どなたかこの式を教えてください！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" id="run"> <input type="button" value="Stop!" id="stop"> <input type="button" value="Reset!" id="reset"> <script> (function(){ var startTime, stopTime, running = false, timerId; document.getElementById('run').onclick = function(){ run(); } document.getElementById('stop').onclick = function(){ stop(); } document.getElementById('reset').onclick = function(){ reset(); } function run() { if(running) return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (!startTime) { startTime = (new Date()).getTime(); } timer(); } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); timerId = setTimeout(function() { timer(); }, 100); } function stop() { if(!running) return false; running = false; clearTimeout(timerId); stopTime = (new Date()).getTime(); } function reset() { if(running) return; startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } }()); </script> </body> </html>

みんなの回答

  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.1

startTime にはrunボタンを押した時刻が入ります。 stopTime にはstopボタンを押した時刻が入ります。 1:00:00 にrunを押したとします。 続いて 1:00:05 にstopを押したとします。 この時、経過時刻として 5秒 が表示されます。 リセットせずに 1:00:12 にrunを押したとします。 1:00:17 の時点で経過時刻には 10秒 が表示されている事が期待されます。 表示ロジックは現在時刻から startTime を引いた時間を表示していますので、1:00:17 の時点で経過時刻 10秒 にするためには startTime は 1:00:07 でなければいけません。 ご質問の計算式は stopTime に何らかの値が入っているときに実行されるようになっているので、2回目のrunボタンを押した時に実行されるロジックです。 式は ＞　startTime = startTime + (new Date()).getTime() - stopTime; ですから、新たな startTime には、元々のstartTime ＋ 現在時刻 － stopTime の結果を入れることになります。 ＞　startTime = 1:00:00 + 1:00:12 - 1:00:05; なので、新しいstartTimeは 1:00:07 になります。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptのストップウオッチのコード

    javascript初級勉強中です。 以下のコードを実行すると(1)小数点第２の動きがおかしい。 　(2)一度リセットボタンを押さないとタイマーが動かない。 という２点の不具合が出ます。 　　どうすれば解決するでしょうか？ <!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウオッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" onclick="run();"> <input type="button" value="Stop!" onclick="stop();"> <input type="button" value="Reset!" onclick="reset();"> <script> var statTime, stopTime, running = false, timerId; function run() { if (running)return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (! startTime) { startTime = (new Date()).getTime(); } timer(); //タイマー処理回していく } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2); timerId =setTimeout(function() { timer(); //このタイマー自身を回していく }, 100); } function stop() { if (!running) return false; running = false; clearTimeout(timerId); //timerIdを渡して止める stopTime = (new Date()).getTime(); } function reset() { if (running) return; 　　startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } </script> </body> </html>

  • scriptが実行されません

    現在勉強中でドットインストールのJavaScriptでストップウォッチを作ろうのコードを書いています。 ですが、急にscript が実行されなくなってしまいました。 何かコードに間違いがあるのでしょうか？ご指摘いただけると助かります。 以下コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> <style> body{ background:#e0e0e0; font-family:Arial, sans-serif; text-align:center; } #timerText{ color:#00aaff; font-size:128px; margin:40px auto; text-shadow:0 1px 0 rgba(255,255,255,0.5); } </style> </head> <body> 　<div id="timerText">0.00</div> 　<button id ="start">START</button> 　<button id ="stop">STOP</button> 　<button id ="reset">RESET</button> <script> (function(){ 'use.strict'; var startTime; var timerId; var startButton =document.getElementById('start'); var stoptButton =document.getElementById('stop'); var resetButton =document.getElementById('reset'); var timerText =document.getElementById('timerText'); startButton.addEventListener('click',function(){ startTime =Date.now(); updateTimerText(); }); function updateTimerText(){ timerId = setTimeout(function(){ var t =Date.now() - startTime; timerText.innerHTML =(t / 1000).toFixed(2); updateTimerText(); }, 10); } })(); </script> </body> </html> よろしくお願い致します。

  • innerHTMLなどの反映タイミング

    innerHTMLやinnerTextでの反映タイミングについて教えてください。 JavaScriptでsleep関数の自作テストを行なっている過程で innerHTMLやinnerTextが即時には反映されない現象に直面しました。 コードを貼り付けておきます。 ※htmlとしてIE等のブラウザで動かしてもいいですが、 htaとして実行したほうが簡易で軽くていいと思います。 このコードでは (1)innerHTML(かinnerText)で「実行中…」を表示 (2)sleep関数を呼ぶ (3)innerHTML(かinnerText)で「終了」を表示 という、(少なくとも表示部分に関しては) 極めて単純な処理をしています。しかし(1)が反映されません…。 (1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。 よく他言語・フレームワークではflushとかリアルタイム描画等の コマンドやオプションで対処できるので、JavaScript(JScript)でも ないものかなぁと思い質問してみることにしました。 質問は以下です ・この現象はなぜ起こるのか。原因説明 ・これを回避する方法はあるかないか ・あるのならその方法 明示的なコマンド・オプションでも対症療法でもかまいません。 環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。 よろしくお願いします。 <html> <body> <div id="status">sleepテスト</div> <input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br> <input type="button" onclick="testBusySleep()" value="testBusySleep"><br> <br> <script> var waittime = 3; function testAjaxSleep() { document.getElementById("status").innerHTML = "「AjaxSleep」実行中…"; ajaxSleep(waittime); document.getElementById("status").innerHTML = "AjaxSleep終了"; } function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; document.close(); busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; } function ajaxSleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); var url = "http://www.google.com/?dummy"; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); while (stopTime > (new Date()).getTime()) { xmlHttp.open('GET', url, false); xmlHttp.send(null); } } function busySleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); while (stopTime > (new Date()).getTime()) {} } </script> </body> </html>

  • JavascriptのtimerIDの意味

    いつもお世話になっております。 現在、Javascriptの勉強をしており、その過程でカウントダウンタイマーを作成しています。 テキスト通りにsetTimeout（）メソッドなどを使用しているのですが、timerIDの意味が理解できず困っております。 タイマーを識別するID番号ということはなんとなく理解できるのですが、下記コードのelse if (timerID)やtimerID=0とは何を意味しているのでしょうか。 if文の条件がtimerIDとはどういうことなのか。 timerIDの値を0にする必要性は何なのか。 教えてください。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> <script type="text/javascript"> window.onload = init; function init(){ document.form1.start.onclick = start; document.form1.reset.onclick = stop; } var timerID; function start(){ count = parseInt(document.form1.time.value); if (count<=0){ count = 0; return; } else if (timerID){ count--; } document.form1.time.value=count; if (count==0){ clearTimeout(timerID); timerID = 0; alert("時間です"); return; } timerID = setTimeout("start()", 1000); } function stop(){ document.form1.time.value=0; if(timerID){ clearTimeout(timerID); timerID=0; } } </script> </head> <body> <h1>カウントダウンタイマー</h1> <form name="form1"> 時間<input name="time" type="text" size="3">秒<br> <input name="start" type="button" value="スタート"> <input name="reset" type="button" value="リセット"> </form> <script type="text/javascript"> </script> </body> </html>

  • このjavascriptコードを短くできませんか？

    javascript初心者です。 どなたか下記のコードを短くしていただけないでしょうか？ 変数1～変数12まであるので、それぞれコードを書いたら長くなってしまいました。 このままでもうまく動いてはいるのですが、もし短くできるならしたいなと思いまして。 よろしくお願いいたします。 <script type="text/javascript"> <!-- //基準になる日を設定 inputDay1 = "変数1"; //指定日を変数に var hairetu = inputDay1.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday1 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay2 = "変数2"; //指定日を変数に var hairetu = inputDay2.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday2 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay3 = "変数3"; //指定日を変数に var hairetu = inputDay3.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday3 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay4 = "変数4"; //指定日を変数に var hairetu = inputDay4.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday4 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay5 = "変数5"; //指定日を変数に var hairetu = inputDay5.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday5 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay6 = "変数6"; //指定日を変数に var hairetu = inputDay6.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday6 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay7 = "変数7"; //指定日を変数に var hairetu = inputDay7.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday7 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay8 = "変数8"; //指定日を変数に var hairetu = inputDay8.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday8 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay9 = "変数9"; //指定日を変数に var hairetu = inputDay9.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday9 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay10 = "変数10"; //指定日を変数に var hairetu = inputDay10.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday10 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay11 = "変数11"; //指定日を変数に var hairetu = inputDay11.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday11 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); inputDay12 = "変数12"; //指定日を変数に var hairetu = inputDay12.split("/"); var nowday = new Date(); //今日の日付 var xday = new Date(hairetu[0],hairetu[1] - 1,hairetu[2]);//基準になる日 var countday12 = Math.ceil((xday.getTime() - nowday.getTime()) / (1000 * 60 * 60 * 24)); if (countday1 < 0)document.write("111"); if (countday2 < 0)document.write("222"); if (countday3 < 0)document.write("333"); if (countday4 < 0)document.write("444"); if (countday5 < 0)document.write("555"); if (countday6 < 0)document.write("666"); if (countday7 < 0)document.write("777"); if (countday8 < 0)document.write("888"); if (countday9 < 0)document.write("999"); if (countday10 < 0)document.write("101010"); if (countday11 < 0)document.write("111111"); if (countday12 < 0)document.write("121212"); --> </script>

  • 現在時刻から指定時刻までの時間差分を計算

    setInterval(next, 1000); //1:30後の時刻取得 function get_next(){ 　nextTime = new Date(); 　nextTime.setTime(nextTime.getTime() + 90*60*1000); } function next(){ 　nowTime = new Date(); 　outputTime = nextTime.getTime() - nowTime.getTime(); 　getElementById('output').innerHTML = outputTime; } これで1時間30分後までの時間差分をミリ秒で取得は出来てるんですが これを1秒ごとに実行して これをx時間x分x秒後　という感じに表示させたいのですが何か良い方法はありませんか？

  • JavaScriptのストップウォッチについて

    以下のコードでストップウォッチを作りました ここまではできるのですがここに新たな仕様として ・画面を開いてから3秒後に自動でカウントする というコードを入れたいです ですからスタートボタンをなくしてストップとリセットだけにしたいです 初心者なので変なコードになっているかもしれません その時はこうした方がいい！みたいなことを言っていただけるとすごく助かります どなたかご教授お願いします HTMLコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/aaa.css" rel="Stylesheet" /> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:100px;">0.00</div> <input id="btn_start" type="button" value="Start" onclick="start();"> <input id="btn_stop" type="button" value="Stop" onclick="stop();"> <input id="btn_reset" type="button" value="Reset" onclick="reset();"> <script> var sec = 0.00; var timerId; //スタートボタン function start() { timerId = setInterval(function() { sec += 0.01; document.getElementById('sec').innerHTML = Math.round(sec*100)/100; //もしも0.0で表示したければ10にすること },10); //この数字はカウントの速さ0.00表示の時は10！ } //ストップボタン function stop(){ clearInterval(timerId); } //リセットボタン function reset(){ document.getElementById('sec').innerHTML = '0.00'; sec = 0.00; } </script> </body> </html> CSSコード body { background-color:#B2B2B2; } h1 { background-color:#00EFFF; } #sec { background-color:#00EFFF; } #btn_start ,#btn_stop ,#btn_reset { margin-top:25px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border: 1px solid #DDD; color: #FFF; width: 60px; padding: 10px 0; }

  • カウントダウンJSにタイマーは付けられますか？

    カウントダウンプログラムを使用しているのですが、 毎日０時になったらカウントダウンがスタートするように改造したく思います。 （カウントダウンが始まる前は非表示にしておきたいです。） 使っているソースは以下です。 お詳しい方、教えていただけませんでしょうか。 よろしくお願いいたします！ ----------------------------------- <!-- カウントダウン --><DIV id="myCwww"></DIV> <SCRIPT language="JavaScript"><!-- function myCountd(){ myHyouji = 1; //0で秒数、1で日数含む形式 mySetname = "セール終了"; //目標時間の名称 mySetyear = 2011; //目標年 mySetmon = 3; //目標月 mySetday = 6; //目標日 mySethour = 23; //目標時 mySetmin = 59; //目標分 mySetsec = 59; //目標秒 myTime = new Date(); mySettime = new Date(mySetyear,mySetmon - 1,mySetday,mySethour,mySetmin,mySetsec); myTimeth = (Math.floor( ( myTime.getTime() - mySettime.getTime() ) / 1000) ) * -1; if(myTimeth > -1){ myChunts = 0; } else { myChunts = 1; myTimeth = myTimeth * -1; } if(myHyouji == 1){ var myWarid = 0; var myWarih = 0; var myWarim = 0; if(myTimeth > 86399){ myWarid = myTimeth / 86400; myWarid = Math.floor(myWarid); myTimeth = myTimeth - (86400 * myWarid); } if(myTimeth > 3599){ myWarih = myTimeth / 3600; myWarih = Math.floor(myWarih); myTimeth = myTimeth - (3600 * myWarih); } if(myTimeth > 59){ myWarim = myTimeth / 60; myWarim = Math.floor(myWarim); myTimeth = myTimeth - (60 * myWarim); } myTimeth = myWarid + "日と" + myWarih + "時間" + myWarim + "分" + myTimeth; } if(myChunts == 0){ document.getElementById("myCwww").innerHTML = mySetname + "まで、あと" + myTimeth + "秒です"; } else { document.getElementById("myCwww").innerHTML = "セール終了いたしました。"; } } setInterval("myCountd()", 1000); // --></SCRIPT><!-- カウントダウン -->

  • JavaScriptで時間指定をして表示を切り替え

    JavaScriptで時間指定をして表示を切り替えたいのですが safariだけうまく動作しません、下記のjsファイルを読み込んでHTML側には <div id="hoge1">切り替え前の内容</div> <div id="hoge2">切り替え後の内容</div> としています。 解決策があればご教授お願い致します。 window.onload = changeDisplay; function changeDisplay(){ var objDate = new Date(); var now = objDate.getTime();//現在のタイムスタンプ（ミリ秒）を取得 var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ（ミリ秒）を取得 //切り替え前 if (now < changeTime) { document.getElementById('hoge1').style.display = "block"; document.getElementById('hoge2').style.display = "none"; setTimeout("changeDisplay()", 1000);//1秒ごとに実行（◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述） //切り替え後 } else { document.getElementById('hoge1').style.display = "none"; document.getElementById('hoge2').style.display = "block"; } }

  • setIntervalについて

    お世話になります <script type="text/javascript"><!-- window.onload=function() { n=0; Timer = setInterval("ch()",1000); } function ch() { n++; document.getElementById("test").innerHTML = n; } function re() { clearInterval(Timer); } function call() { Timer = setInterval("ch()",1000); } //--></script> <input type="button" onclick="re()" value="reset"> <input type="button" onclick="call()" value="call"> <div id="test"></div> としたときにページを表示したら1秒ごとに<div>『test』に1ずつ数が増えて表示されていき『reset』ボタンを押すとTimerが止まり『call』ボタンを押すとTimerが再開します でもTimerを解除せずに『call』ボタンを押すと1秒に2ずつ、3ずつという風に相乗されていきます（新しいTimerが追加されていく） これをTimerが起動しているときに『call』ボタンを押すとreturn false; 起動していないときにはTimerを起動させるという風にすることは可能でしょうか？ (Timerが起動しているときに『call』ボタンを押せないようにする以外に）

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する