myy/myTimer.html

## myTimer.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>タイマー</title>
</head>
<body>
<h1>タイマー</h1>
<p>カップラーメンの時間をはかったり，パスタの茹で時間をはかったりできる</p>
<div style="font-size:128px">
<p ><span id="hours">0</span>時間<span id="minutes">0</span>分<span id="seconds">0</span>秒</p>
</div>
<p>
  時間を入力:<input type="text" name="hour" id="hour" value="0">時間<input type="text" name="minute" id="minute" value="0">分<input type="text" name="second" id="second" value="0">秒
  <input type="button" value="カップラーメン(3分)" onclick="setRamen()">
  <input type="button" value="パスタ(9分)" onclick="setPasta()">
</p>

<input type="button" value="スタート" onclick="start();">
<input type="button" value="リセット" onclick="reset();">
<script>
var hours;
var minutes;
var seconds;
var timerID

function setRamen() {
    //document.getElementById('minutes').innerHTML = "3";
    document.getElementById('minute').value = 3;
}

function setPasta() {
    //document.getElementById('minutes').innerHTML = "9";
    document.getElementById('minute').value = 9;
}

function start() {
    hours = document.getElementById('hour').value;
    minutes = document.getElementById('minute').value;
    seconds = document.getElementById('second').value;

    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = minutes;
    document.getElementById('seconds').innerHTML = seconds;

    timerID = setInterval("countdown()",1000);
}

function countdown() {

    var time = (hours*60*60) + (minutes*60) + (seconds-1);
    console.log(time);

    if(time <= 0) {
        reset();
        alert("時間だよ!");
    } else {
        hours = Math.floor(time/(3600));
        minutes = Math.floor((time%3600)/60);
        seconds = time % 60;
        document.getElementById('hours').innerHTML = hours;
        document.getElementById('minutes').innerHTML = minutes;
        document.getElementById('seconds').innerHTML = seconds;
    }

}

function reset() {
    document.getElementById('hours').innerHTML = "0";
    document.getElementById('hour').value = 0;
    document.getElementById('minutes').innerHTML = "0";
    document.getElementById('minute').value = 0;
    document.getElementById('seconds').innerHTML = "0";
    document.getElementById('second').value = 0;
    clearInterval(timerID);
}
</script>


</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>タイマー</title>
	</head>
	<body>
	<h1>タイマー</h1>
	<p>カップラーメンの時間をはかったり，パスタの茹で時間をはかったりできる</p>
	<div style="font-size:128px">
	<p ><span id="hours">0</span>時間<span id="minutes">0</span>分<span id="seconds">0</span>秒</p>
	</div>
	<p>
	時間を入力:<input type="text" name="hour" id="hour" value="0">時間<input type="text" name="minute" id="minute" value="0">分<input type="text" name="second" id="second" value="0">秒
	<input type="button" value="カップラーメン(3分)" onclick="setRamen()">
	<input type="button" value="パスタ(9分)" onclick="setPasta()">
	</p>

	<input type="button" value="スタート" onclick="start();">
	<input type="button" value="リセット" onclick="reset();">
	<script>
	var hours;
	var minutes;
	var seconds;
	var timerID

	function setRamen() {
	//document.getElementById('minutes').innerHTML = "3";
	document.getElementById('minute').value = 3;
	}

	function setPasta() {
	//document.getElementById('minutes').innerHTML = "9";
	document.getElementById('minute').value = 9;
	}

	function start() {
	hours = document.getElementById('hour').value;
	minutes = document.getElementById('minute').value;
	seconds = document.getElementById('second').value;

	document.getElementById('hours').innerHTML = hours;
	document.getElementById('minutes').innerHTML = minutes;
	document.getElementById('seconds').innerHTML = seconds;

	timerID = setInterval("countdown()",1000);
	}

	function countdown() {

	var time = (hours6060) + (minutes*60) + (seconds-1);
	console.log(time);

	if(time <= 0) {
	reset();
	alert("時間だよ!");
	} else {
	hours = Math.floor(time/(3600));
	minutes = Math.floor((time%3600)/60);
	seconds = time % 60;
	document.getElementById('hours').innerHTML = hours;
	document.getElementById('minutes').innerHTML = minutes;
	document.getElementById('seconds').innerHTML = seconds;
	}

	}

	function reset() {
	document.getElementById('hours').innerHTML = "0";
	document.getElementById('hour').value = 0;
	document.getElementById('minutes').innerHTML = "0";
	document.getElementById('minute').value = 0;
	document.getElementById('seconds').innerHTML = "0";
	document.getElementById('second').value = 0;
	clearInterval(timerID);
	}
	</script>


	</body>
	</html>