読んだ本
ステップアップJavaScript
大学の研究室で渡された本です。演習みたいなものが載っているので、自分なりの解答を残します
初学者の方も解答を一緒に考えたら力がつくと思います。
第一章で作ったもの
ストップウォッチを作りました
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step1</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<h1 class="title">ストップウォッチ</h1>
<div id ="stopWatchPanel">
<div class="display">0</div>
<div class="actions">
<button class="startButton">スタート</button>
<button class="stopButton">ストップ</button>
</div>
<div class="log"></div>
</div>
<script src ="./main.js"></script>
</body>
</html>
main.js
function stopWatch(options){
function addMessage(message){
var messageElm = document.createElement('div');
var now = new Date();
messageElm.innerText = now.getHours() + '時' + now.getMinutes() + '分' + now.getSeconds() +'秒' + message;
messageElm.classList = ['message'];
logElm.appendChild(messageElm);
}
options = options || {};
var color = options.color || 'lightblue';
var backgroundColor = options.backgroundColor || 'black';
var displayElm = document.getElementsByClassName('display')[0];
displayElm.style.color = color;
displayElm.style.backgroundColor = backgroundColor;
var logElm = document.querySelector('.log');
var startButton = document.getElementsByClassName('startButton')[0];
var timer = null;
startButton.addEventListener('click', function(){
if( timer === null){
var seconds = 0;
timer = setInterval(function(){
seconds++;
displayElm.innerText = seconds;
console.log(seconds);
}, 1000);
console.log('start : ' + timer);
addMessage('開始');
}
});
var stopButton = document.getElementsByClassName('stopButton')[0];
stopButton.addEventListener('click', function(){
if(timer !== null){
console.log('stop : ' + timer);
clearInterval(timer);
timer = null;
addMessage('終了');
}
});
}
var options ={
color: 'limegreen',
backgroundColor: '#333'
};
stopWatch(options);
main.css
.title{
text-align: center;
}
#stopWatchPanel{
margin: 0 auto;
width: 10em;
}
.display{
font-weight: bold;
text-align: right;
height: 1.5em;
margin-bottom: .2em;
padding: .5em;
color: lightblue;
background-color: black;
}
.actions{
text-align: center;
margin-bottom: 1em;
}
.message{
text-align: center;
border-bottom: 1px solid lightblue;
}
これらのコードで簡易なストップウォッチができます
最初の演習
1 操作履歴の最新のものが一番上に来るようにする
main.js
function stopWatch(options){
・
・
・
logElm.prepend(messageElm);
}
prepend メソッドで追加する子要素を最新のものにできました
参考にしたサイトは以下です
https://www.javadrive.jp/javascript/dom/index20.html#section1
2 初期状態及び停止状態のストップボタンと、カウントアップ状態のスタートボタンは無効なことをわかりやすくする。ボタンを押せなくさせる
button.disabled = true
でボタンが薄くなり
button.disabled = false
で再度見えるようになります
main.js
startButton.addEventListener('click', function(){
startButton.disabled = true;
stopButton.disabled = false;
`
`
`
});
stopButton.addEventListener('click', function(){
if(timer !== null){
startButton.disabled = false;
stopButton.disabled = true;
console.log('stop : ' + timer);
clearInterval(timer);
timer = null;
addMessage('終了');
}
});
stopButtonという変数を全体で使えるように
main.js
options = options.color || 'lightblue';
`
`
`
var startButton = document.getElementsByClassName('startButton')[0];
var timer = null;
var stopButton = document.getElementsByClassName('stopButton')[0];
という形にしています
3 180秒たったらアラート
これは簡単ですね
secondsが180になったらアラートをすればよいだけです
main.js
startButton.addEventListener('click', function(){
`
`
`
if (seconds == 180){
alert('カップラーメン出来上がり');
}
}, 1000);
console.log('start : ' + timer);
addMessage('開始');
}
});
最終的な回答は以下になります
main.js
function stopWatch(options){
function addMessage(message){
var messageElm = document.createElement('div');
var now = new Date();
messageElm.innerText = now.getHours() + '時' + now.getMinutes() + '分' + now.getSeconds() +'秒' + message;
messageElm.classList = ['message'];
logElm.prepend(messageElm);
}
options = options || {};
var color = options.color || 'lightblue';
var backgroundColor = options.backgroundColor || 'black';
var displayElm = document.getElementsByClassName('display')[0];
displayElm.style.color = color;
displayElm.style.backgroundColor = backgroundColor;
var logElm = document.querySelector('.log');
var startButton = document.getElementsByClassName('startButton')[0];
var timer = null;
var stopButton = document.getElementsByClassName('stopButton')[0];
startButton.addEventListener('click', function(){
if( timer === null){
startButton.disabled = true;
stopButton.disabled = false;
var seconds = 0;
timer = setInterval(function(){
seconds++;
displayElm.innerText = seconds;
console.log(seconds);
if (seconds == 180){
alert('カップラーメン出来上がり');
}
}, 1000);
console.log('start : ' + timer);
addMessage('開始');
}
});
stopButton.addEventListener('click', function(){
if(timer !== null){
startButton.disabled = false;
stopButton.disabled = true;
console.log('stop : ' + timer);
clearInterval(timer);
timer = null;
addMessage('終了');
}
});
}
var options ={
color: 'limegreen',
backgroundColor: '#333'
};
stopWatch(options);