質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4827閲覧

jsで独立したストップウォッチを複数作りたい

youya66

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/01/16 04:58

ストップウォッチを複数作る方法が分かりません。
一つだけならできたのですが、独立したストップウォッチを複数作るとなると、
不具合が起きてしまいます。
独立した複数のストップウォッチの作り方を教えてください。
よろしくお願いします。
(以下は単体のストップウォッチのコードです)

lang

1<h1>ストップウォッチ</h1> 2 <div id="sec" style="font-size:128px">0.00</div> 3 <input type="button" value="start!" id="run"> 4 <input type="button" value="stop!" id="stop"> 5 <input type="button" value="reset!" id="reset">

lang

1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2<script> 3 4$(function(){ 5var startTime, 6 timerId, 7 running = false, 8 stopTime; 9 10$('#run').click(function(){ 11 run(); 12 clickRun(); 13}); 14 15$('#stop').click(function(){ 16 stop(); 17 clickstop(); 18}); 19 20$('#reset').click(function(){ 21 reset(); 22 clickReset(); 23}); 24 25function run(){ 26 27 if(running) return; 28 29 running = true; 30 31 if (stopTime){ 32 startTime = startTime + (new Date()).getTime() - stopTime; 33 } 34 35 if(!startTime){ 36 startTime = (new Date()).getTime(); 37 } 38 timer(); 39} 40 41function timer(){ 42 document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); 43 timerId = setTimeout(function(){ 44 timer(); 45 },100); 46} 47 48function stop(){ 49 if(!running) return false; 50 running = false; 51 clearTimeout(timerId); 52 stopTime = (new Date()).getTime(); 53} 54 55function reset(){ 56 if(running) return; 57 startTime = undefined; 58 document.getElementById('sec').innerHTML = '0.00'; 59} 60 61function clickRun(){ 62 $('#run').css('display','none'); 63 $('#stop').show(); 64 $('#reset').show(); 65} 66function clickstop(){ 67 $('#run').show(); 68 $('#stop').css('display','none'); 69} 70function clickReset(){ 71 $('#run').show(); 72 $('#stop').css('display','none'); 73 $('#reset').css('display','none'); 74} 75}); 76</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ちょっと作ってみました。
http://jsdo.it/utun001/lTD7

※ jQuery使ってます。

lang

1<div id="sw1"> 2 <button class="startBtn">start</button> 3 <button class="stopBtn">stop</button> 4 <button class="resetBtn">reset</button> 5 <div class="timerText">0</div> 6</div> 7<div id="sw2"> 8 <button class="startBtn">start</button> 9 <button class="stopBtn">stop</button> 10 <button class="resetBtn">reset</button> 11 <div class="timerText">0</div> 12</div> 13<div id="sw3"> 14 <button class="startBtn">start</button> 15 <button class="stopBtn">stop</button> 16 <button class="resetBtn">reset</button> 17 <div class="timerText">0</div> 18</div>

lang

1//クラス作成&コンストラクタ 2var StopWatch = function(_continerId){ 3 var self = this; 4 this.continerSelecter = '#'+_continerId; 5 this.startBtnSelecter = '.startBtn'; 6 this.stopBtnSelecter = '.stopBtn'; 7 this.resetBtnSelecter = '.resetBtn'; 8 this.timerTextSelecter = '.timerText'; 9 this.defaultInterval = 1000; 10 this.timerId = null; 11 12 13 // クリックイベント登録 14 $(this.continerSelecter+'>'+this.startBtnSelecter).click(function(){ 15 self.start(); 16 }); 17 $(this.continerSelecter+'>'+this.stopBtnSelecter).click(function(){ 18 self.stop(); 19 }); 20 $(this.continerSelecter+'>'+this.resetBtnSelecter).click(function(){ 21 self.reset(); 22 }); 23}; 24//各function 25StopWatch.prototype.start = function(){ 26 this.run(); 27}; 28StopWatch.prototype.stop = function(){ 29 if(this.timerId !== null){ 30 clearInterval(this.timerId); 31 } 32}; 33StopWatch.prototype.reset = function(){ 34 $(this.continerSelecter+'>'+this.timerTextSelecter).text('0'); 35}; 36StopWatch.prototype.run = function(){ 37 var self = this; 38 this.timerId = setInterval(function(){ 39 var num = $(self.continerSelecter+'>'+self.timerTextSelecter).text(); 40 $(self.continerSelecter+'>'+self.timerTextSelecter).text(parseInt(num,10)+1); 41 }, this.defaultInterval); 42}; 43 44// main処理 45$(document).ready(function(){ 46 var sw1 = new StopWatch('sw1'); 47 var sw2 = new StopWatch('sw2'); 48 var sw3 = new StopWatch('sw3'); 49});

こんな感じで如何でしょうか。
ストップウォッチクラスを作って、インスタンス生成してから処理する様にすれば、いくつでも作れるようになりますよ。

以上、ご参考になれば幸いです。

投稿2015/01/16 06:46

utun

総合スコア384

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

youya66

2015/01/16 11:54

ありがとうございます。そのような感じのものを作りたいです。 ただ、不具合が多いので、手直ししていただけると幸いです。 どうか、よろしくお願いします。
youya66

2015/01/20 04:03

無事解決することができました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問