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

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

質問する

ただいまの
回答率

88.32%

jQueryを使った3分タイマーの作成について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 484
kasabranka

kasabranka

score 9

前提・実現したいこと

javascript,jQuery共に初心者です。
jQueryを使う事で変数を入れなくていいという所だけ理解しています。

Javascriptでは作成出来たので、それを参考にjqueryで書き換えれる部分を書き換えましたが、
スタートボタンとストップボタンが動きません。リセットボタンは動きましたが、押した数秒後'timeUp'が出てきておかしな事になります。

検証ツールでも問題が出てこないので、これ以上どうしたらいいのかわかりません。
改善できる所をアドバイス頂ければ有難いです。
よろしくお願いします。

発生している問題・エラーメッセージ

タイマーのスタート、ストップボタンが動かない。
リセットボタンは動きますが、少しおかしい。 

エラーメッセージ

該当のソースコード

```ここに言語名を入力
jQuery
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマー</title>
<link rel="stylesheet" href="../JS09/timer.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
var counter;
var time = 180;
function countStart( ){
counter = setInterval(count, 100);
toggle($('#start_button').prop('disabled'));
} 

function countStop( ){
clearInterval(counter);
toggle($('#stop_button').prop('disabled'));
}

function countReset( ){

time = 180

clearInterval(counter);
toggle();
$('#min').text('03')
$('#sec').text('00')
$('#timeUp').css('display','none');
$('#timerLavel').css('display','block');
}

function toggle(x){
if(x===false){
$('#start_button').prop('disabled',false);
$('#stop_button').prop('disabled',true);

} else {
$('#start_button').prop('disabled',true);
$('#stop_button').prop('disabled',false);
}   
}

function count( ) {
if( time === 0) {
$('#timeUp').css('display','block');
$('#timeUp').css('color','red');
$('timerLavel').css('display','none');
clearInterval(counter);
} else {
time -= 1;
$('min').text('time % 60');
$('sec').text('Math.floor(time /60)');
}
}

var timerLavel = timerLavel; 
var timeUp = timeUp;  
$(function(){
$('#start_button').click(countStart);
$('#stop_button').click(countStop);
$('#reset_button').click(countReset);
});

</script>
</head>
<body>
<div class="container">
<h1 class="title">Stop watch</h1>
<h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
<h1 id="timeUp">TimeUp!</h1>
<div class="set">
<button id="start_button">スタート</button>
<button id="stop_button">ストップ</button>
<button id="reset_button">リセット</button>
</div>
</div>
</body>
</html>

機能してるJavascriptのソースコード↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマー</title>
<link rel="stylesheet" href="timer.css">

<script>
var counter;
var time = 180;
var start;
var stop;

function countStart( ){
counter = setInterval(count, 100);
toggle();
}

function countStop( ){
clearInterval(counter);
toggle();
}

function countReset( ){
var min= document.getElementById('min');
var sec= document.getElementById('sec');
time = 180
sec.innerHTML = '00';
min.innerHTML = '03';

clearInterval(counter);
timeUp.style.display ='none';
timerLavel.style.display='block';  
if(start.toggle){
toggle();
}
}

function toggle(){
if(start.disabled){
start.disabled = false;
stop.disabled = true;
} else {
start.disabled = true; 
stop.disabled = false; 
}   
}

function count( ) {
var min= document.getElementById('min');
var sec= document.getElementById('sec');
if( time === 0) {
timeUp.style.display ='block';
timeUp.style.color ='red';
timerLavel.style.display='none';        
clearInterval(counter);
} else {
time -= 1;
sec.innerHTML = time % 60;
min.innerHTML = Math.floor(time /60);
}
}

window.onload = function(){
var timerLavel= document.getElementById('timerLavel');
var timeUp= document.getElementById('timeUp');
start = document.getElementById('start_button');
stop = document.getElementById('stop_button');
var reset = document.getElementById('reset_button');
start.addEventListener('click',countStart,false);
stop.addEventListener('click',countStop,false);
reset.addEventListener('click',countReset,false);
}

</script>
</head>
<body>
<div class="container">
<h1 class="title">Stop watch</h1>
<h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
<h1 id="timeUp">TimeUp!</h1>
<div class="set">
<button id="start_button">スタート</button>
<button id="stop_button">ストップ</button>
<button id="reset_button">リセット</button>
</div>
</div>
</body>
</html>

試したこと

javascriptの変数に変える部分はjQueryに書き換えて、検証ツールで問題がでる部分は修正しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert1 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • thyda.eiqau

    thyda.eiqau

    2020/02/08 18:59 編集

    ご自身でこちらの質問ページを開いたときに、ソースコードが非常に見づらいことにお気づきでしょうか。適切にコードブロック機能を利用できていないのが原因です。
    我々としても読むのが大変です。質問本文は編集できますので、次のように編集してください。
    - - - - -
    ```ここに言語名を入力
    jQuery
    ソースコード
    <!DOCTYPE html>
    の4行を、
    ```html
    <!DOCTYPE html>
    の2行に置き換えてください。
    - - - - -
    </html>

    機能してるJavascriptのソースコード↓

    <!DOCTYPE html>
    の5行を、
    </html>
    ```
    機能してるJavascriptのソースコード↓
    ```html
    <!DOCTYPE html>
    の5行に置き換えてください。
    - - - - -
    </html>

    ### 試したこと
    の3行を、
    </html>
    ```
    試したこと
    の3行に置き換えてください。
    - - - - -
    本文を編集しているとプレビューが表示されますよね。コード部分が適切に表示されていることを確認してください。

    キャンセル

回答 1 件

link

checkベストアンサー

0

動いていない原因として

  • $('min').text('03')になっており、$('#min’)などに修正
  • function toggle()部分でstart,stopの動作が同じになっているため、動作を切り替える
  • $(‘要素名’).text('time % 60');のような感じだと'time % 60'のテキストが表示されてしまうため、$(‘要素名’).text(time % 60);に修正

などで動きについては行われると思います。

こちらに実行するcodepenのURLも貼り付けておきます。  
https://codepen.io/miwashutaro0611/pen/ZEGYRXO?editors=1010

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/09 13:00

    jackmiwamiwa　さん
    大変わかりやすいアドバイスありがとうございました。今後は＃を入れる事や、シングルーコーテーションをつけるかつけないかの確認をしっかりしようと思います。
    こちら修正後動作する様になりましたが、表示がminとsecが逆ですが左をminで右をsecにするにはどうしたら良いでしょうか？HTMLには左→min 右→secになってます。

    キャンセル

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

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る