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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2375閲覧

jvascriptで書いたカウントダウンタイマーをjQueryで書きたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/11/26 13:23

前提・実現したいこと

javascriptで書いたものをjQueryで記述したいです。

javascriptで、カウントダウンタイマーを作りました。それをjQueryで書きたいのですが、
startを押しても動作してくれません。

js

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>カウントダウン</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script> 8 var interval_id; 9 var time = 180; 10 11 function count_start(){ 12 document.getElementById('start').disabled = true; 13 interval_id = setInterval(count_down , 1000); 14 } 15 16 function count_down(){ 17 var display = document.getElementById('display'); 18 var min = document.getElementById('min'); //分 19 var sec = document.getElementById('sec'); //秒 20 if (time === 1 ){ 21 display.innerHTML = 'TIME UP!'; 22 document.getElementById('display').style.color = "red"; 23 }else{ 24 time--; 25 var next_min = Math.floor(time / 60); 26 var next_sec = Math.floor(time % 60); 27 28 next_min = zero_padding(next_min); 29 next_sec = zero_padding(next_sec); 30 min.innerHTML = next_min; 31 sec.innerHTML = next_sec; 32 } 33 }; 34 35 function zero_padding(num){ 36 return ('00' + num).slice(-2); 37 }; 38 39 function count_stop(){ 40 clearInterval(interval_id); 41 document.getElementById('start').disabled = false; 42 }; 43 44 function count_reset(){ 45 count_stop(); 46 document.getElementById('min').innerHTML = '03'; 47 document.getElementById('sec').innerHTML = '00'; 48 document.getElementById('start').disabled = false; 49 }; 50 51 window.onload = function(){ 52 var start = document.getElementById('start'); 53 start.addEventListener('click' , count_start , false); 54 var stop = document.getElementById('stop'); 55 stop.addEventListener('click', count_stop , false); 56 var reset = document.getElementById('reset'); 57 reset.addEventListener('click', count_reset , false); 58 }; 59</script> 60 </head> 61<body> 62 <div id ="timer"> 63 <div id ="box"> 64 <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p> 65 <div id="button"> 66 <button id ="start">スタート</button> 67 <button id ="stop">ストップ</button> 68 <button id ="reset">リセット</button> 69 </div> 70 </div> 71 </div> 72</body> 73</html>

該当のソースコード

自分なりに書いてみたのですが、、、動作しないので間違っているんだと思います。

jQuery

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>カウントダウン</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script> 8 var interval_id; 9 var time = 180; 10 11 function count_start(){ 12 $('#start').prop('disabled', 'true'); 13 interval_id = setInterval(count_down , 1000); 14 } 15 16 $(function(){ 17 $('#start').click(function(){ 18 $('start').prop('disabled', true); 19 interval_id = setInterval(count_down, 1000); 20 }); 21 }); 22 23 function count_down(){ 24 var display = $('#display').get(0); 25 var min = $('#min').get(0); 26 var sec = $('#sec').get(0); 27 if (time === 1 ){ 28 $('#display').text('TIME UP!').css('color', 'red'); 29 }else{ 30 time--; 31 var next_min = Math.floor(time / 60); 32 var next_sec = Math.floor(time % 60); 33 34 next_min = zero_padding(next_min); 35 next_sec = zero_padding(next_sec); 36 min.innerHTML = next_min; 37 sec.innerHTML = next_sec; 38 } 39 }; 40 41 function zero_padding(num){ 42 return ('00' + num).slice(-2); 43 }; 44 45 function count_stop(){ 46 clearInterval(interval_id); 47 $('#start').prop('disabled', 'false'); 48 }; 49 50function count_reset(){ 51 count_stop(); 52 $('#min').html('03'); 53 $('#sec').html('00'); 54 $('#start').prop('disabled', 'false'); 55 }; 56 57 $(function(){ 58 var start = $('#start').get(0); 59 $('#start').on('click', count_start, flase); 60 61 var stop = $('#stop').get(0); 62 $('#stop').on('click', count_start, flase); 63 64 var reset = $('#start').get(0); 65 $('#reset').on('click', count_start, flase); 66 }); 67 68</script> 69 </head> 70<body> 71 <div id ="timer"> 72 <div id ="box"> 73 <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p> 74 <div id="button"> 75 <button id ="start">スタート</button> 76 <button id ="stop">ストップ</button> 77 <button id ="reset">リセット</button> 78 </div> 79 </div> 80 </div> 81</body> 82</html> 83

どのように書けばいいかアドバイスいただけますでしょうか。

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

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

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

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

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

m.ts10806

2018/11/26 14:16

開発ツールのコンソールにエラー出ていませんか?出ているようでしたら質問に追記願います
退会済みユーザー

退会済みユーザー

2018/11/26 14:22 編集

Uncaught ReferenceError: flase is not defined at HTMLDocument.<anonymous> (challenge_jQuery.html:76) at j (jquery.js:3099) at Object.fireWith [as resolveWith] (jquery.js:3211) at Function.ready (jquery.js:3417) at HTMLDocument.I (jquery.js:3433) と言ったエラーが出ています。
m.ts10806

2018/11/26 23:15

回答に出ている内容で解決しそうですが、ひとまず質問本文に追記してください。
guest

回答3

0

とりあえず1点。

js

1// ↓どうせ書くならfalse。この引数は不要。 2$('#start').on('click', count_start, flase);

【.on() | jQuery API Documentation】
http://api.jquery.com/on/

投稿2018/11/26 14:07

kei344

総合スコア69357

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

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

退会済みユーザー

退会済みユーザー

2018/11/27 09:27

タイプミスの指摘ありがとうございます。全然気付きませんでした。
guest

0

総じてこんな感じ

javascript

1<script> 2var interval_id; 3var default_time = 180; 4var time = default_time; 5$(function(){ 6 $('#start').on('click',function(){ 7 $(this).prop('disabled',true); 8 interval_id = setInterval(count_down , 1000); 9 }); 10 $('#stop').on('click',function(){ 11 clearInterval(interval_id); 12 $('#start').prop('disabled',false); 13 }); 14 $('#reset').on('click',function(){ 15 $('#stop').prop('disabled',false).trigger('click'); 16 time=default_time; 17 $('#display').html($('<span id="min"></span>:<span id="sec"></span>')).css('color',''); 18 view(); 19 }).trigger('click'); 20}); 21function view(){ 22 var next_min = Math.floor(time / 60); 23 var next_sec = Math.floor(time % 60); 24 next_min = zero_padding(next_min); 25 next_sec = zero_padding(next_sec); 26 $('#min').html(next_min); 27 $('#sec').html(next_sec); 28} 29function count_down(){ 30 if (time <= 1 ){ 31 $('#stop').prop('disabled',true); 32 $('#display').html('TIME UP!').css('color','red'); 33 clearInterval(interval_id); 34 }else{ 35 time--; 36 } 37 view(); 38}; 39function zero_padding(num){ 40 return ('00' + num).slice(-2); 41}; 42</script> 43<div id ="timer"> 44<div id ="box"> 45<p id ="display"></p> 46<div id="button"> 47<button id ="start">スタート</button> 48<button id ="stop">ストップ</button> 49<button id ="reset">リセット</button> 50</div> 51</div> 52</div> 53

投稿2018/11/27 01:51

編集2018/11/27 01:52
yambejp

総合スコア114505

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

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

退会済みユーザー

退会済みユーザー

2018/11/27 09:35

コードの記述ありがとうございます!trigger()は知りませんでした。 とても勉強になります。
guest

0

ベストアンサー

$(function(){ $('#start').click(function(){ $('start').prop('disabled', true); interval_id = setInterval(count_down, 1000); }); });

この記述は最後の方の .on('click',...) と同じ意味になるので、
消してしまって問題ありません。

ざっと直してみたものをアップしてみたので比べてみるとよいかもしれません。
(リセットはそのまま

https://codesandbox.io/s/wk2wr02298

投稿2018/11/26 15:13

編集2018/11/26 15:14
wilf

総合スコア300

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

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

退会済みユーザー

退会済みユーザー

2018/11/27 09:31

ありがとうございます! on.('click') の所もよくわかって無かったのですが、コードみて理解できました!
wilf

2018/11/27 14:58

最初はわからないことが多いと思いますが、 イベントと関数の紐づけがわかるようになると他の人のコードを読めるようになるので、 トライアンドエラーがんばってくださいー!
退会済みユーザー

退会済みユーザー

2018/11/28 05:35

ありがとうございます!! 頑張ります〜!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問