ストップウォッチをつくる
ストップウォッチで測る秒数は変数に入れるが
それは関数の外で宣言しないとまずい
setInterval(conunUp, 1000);
セットインターバルの第一引数は「関数の名前」だけで（）はつけない
ちなみに関数名をcountUpにしたらエラーになったので、たぶんそれだと予約語が入っているね。
--->test2.js(自分のコード)
$(function(){
//console.log('stopwatch');
var cnt = 0;//グローバル変数として宣言
var start = false;//startボタンが押されたかどうか
//カウントアップする関数
function cntUp(){
cnt++;
$('#clock').text(cnt);
}
//タイマー処理の実行
$('#b1').on('click',function(){
if(start==false){//startボタン押すたびカウントが早くなるのを防ぐ
start = true;
setInterval(cntUp, 1000);
}
});
});
prop プロップ
よくわからんがボタンとかそのほかの要素はdisabledという値をもっていて、
それをtrueにすると「使用不可」のグレーになる。
それを記述するときにこのpropを使うらしい。
propは「プロパティの真偽(true/fales)の書き換えに用いる。
attrと同じようなもので、やはりこれも引数が1つなら「値を拾得(つまりtrue/false）」、引数2つで「書き換え」となる。
$('#b1').prop('disabled',true);//ボタンを利用不可にする
--->test2.js
$(function(){
//console.log('stopwatch');
var cnt = 0;//グローバル変数として宣言
var testTimer;//このタイマーの名前。外側で宣言しておく必要あり
//カウントアップする関数
function cntUp(){
cnt++;
$('#clock').text(cnt);
}
//タイマー処理の予約
$('#b1').on('click',function(){
testTimer = setInterval(cntUp, 1000);
$('#b1').prop('disabled',true);//ボタンを利用不可にする
});
//タイマーを止める
$('#b2').on('click',function(){
clearInterval(testTimer);//testTimerを止める
console.log('foo');
$('#b1').prop('disabled',false);//ボタンを利用可にする
});
});
？？
ちなみにこの返り値がfalseにならなかったのはなぜだろう
var hoge = $('b1').prop('disabled');
console.log('prop '+hoge);
↑
これたぶん'#b1'が正しい。#抜けだと思う
（#をつけたら動いた）
とりあえず自分版でボタン1つで切り替える
$(function(){
//console.log('stopwatch');
var cnt = 0;//グローバル変数として宣言
var testTimer;//このタイマーの名前。外側で宣言しておく必要あり
var btnStart = true;//ボタンは「スタート」のボタン
//カウントアップする関数
function cntUp(){
cnt++;
$('#clock').text(cnt);
}
//タイマー処理
$('#b1').on('click',function(){
if(btnStart==true){
testTimer = setInterval(cntUp, 1000);
$('#b1').text('とめるよ');//stopボタンに変更
btnStart = false;
console.log('btn '+btnStart);
//});
}else{
//タイマーを止める
//$('#b1').on('click',function(){
clearInterval(testTimer);//testTimerを止める
console.log('foo');
$('#b1').text('かうんと');//カウントボタンに変更
btnStart = true;
}
});
//}
});
変数btnStartで私は制御したが、
「ボタンのテキストがstartならstartの処理をし、
stopならstopの処理をしろ」という形が先生版
ボタンの上のテキストを拾得する記述はこのとおり↓
$('#b1').text()
textメソッドはテキストを投入するだけでなく、（）内が空白の場合、
現在のテキストの「取得」として機能する。
attrと同じ。
ので、これを条件文の条件に入れてやればいい。
すなわち、
if($('#b1').text()=='start'){
}
これによって分岐する
--->test202.js
$(function(){
//console.log('stopwatch');
var cnt = 0;//グローバル変数として宣言
var testTimer;//このタイマーの名前。外側で宣言しておく必要あり
//カウントアップする関数
function cntUp(){
cnt++;
$('#clock').text(cnt);
}
//タイマー処理
$('#b1').on('click',function(){
if($('#b1').text()=='start'){
testTimer = setInterval(cntUp, 1000);
$('#b1').text('stop');//stopボタンに変更
}else{
//タイマーを止める
clearInterval(testTimer);//testTimerを止める
console.log('foo');
$('#b1').text('start');//カウントボタンに変更
}
});
});
変数をかませなくても、「今現在、html上にある要素の状態を『取得し』『それを条件文に直に投入』する」という手法があるということ。
--->一応 test202.html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="test2.css">
<title>ストップウォッチ</title>
<meta charset="UTF-8">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="clock">0</div>
<button id="b1">start</button>
<script src="test202.js"></script>
</body>
</html>
--->test2.css(変化なし)
body{
background: #e2ffb8;
}
#clock{
font-size: 2rem;
padding: 5px;
text-align: right;
background: #000;
color: #0F0;
width: 14rem;
font-weight: bold;
border: solid 3px #ccc;//ふちを丸く
}
