akirayou/stopwatch5.html

## stopwatch5.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
    <style>
        :root {
            margin: 0;
            padding: 0;
            font-size: 1vw;
        }


        textarea {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 0;
            padding: 0;
        }

        #st_ctrl_button {
            margin-top: 20px;
        }

        #time {
            text-align: center;
            font-size: 10rem;
        }

        .c_bt {
            margin: 0;
            height: 20vh;
            font-size: 5rem;
        }

        .b_start {
            width: 70vw;
        }

        .b_clear {
            width: 26vw;
        }


        #b1 {
            color: black;
            background: #ffaaaa;
        }

        #b2 {
            color: black;
            background: #aaaaff;
        }

        #b3 {
            color: black;
            background: #aaffaa;
        }

        #b4 {
            color: black;
            background: #ffffaa;
        }

        #b5 {
            color: white;
            background: #222;
        }

        #st_buttons {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            margin: 0px 0px;
        }

        .bt_cont {
            display: flex;
            flex-flow: column;
            margin: 0;
            width: 100%;
        }

        .bt {
            margin: 0;
            padding: 0;
            font-size: 5rem;
            width: 100%;
            height: 20vh;
        }

        .log {
            resize: none;
            width: 100%;
            font-size: 1rem;
            height: 5rem;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="time">Ready</div>
        <div id="st_buttons">
            <div class="bt_cont">
                <button id="b1" class="bt">---</button>
                <textarea id="l1" class="log" readonly></textarea>
            </div>
            <div class="bt_cont">
                <button id="b2" class="bt">---</button><br>
                <textarea id="l2" class="log" readonly></textarea>
            </div>
            <div class="bt_cont">
                <button id="b3" class="bt">---</button><br>
                <textarea id="l3" class="log" readonly></textarea>
            </div>
            <div class="bt_cont">
                <button id="b4" class="bt">---</button><br>
                <textarea id="l4" class="log" readonly></textarea>
            </div>
            <div class="bt_cont">
                <button id="b5" class="bt">---</button><br>
                <textarea id="l5" class="log" readonly></textarea>
            </div><!--
            <div class="bt_cont">
                <button id="b6" class="bt">---</button><br>
                <textarea id="l6" class="log" readonly></textarea>
            </div>-->
        </div>

        <div id="st_ctrl_button">
            <button id="start" class="c_bt b_start">start(s)</button>
            <button id="clear" class="c_bt b_clear">clear(c)</button>
        </div>
    </div>
    <script>
        function getTimestamp() {
            const date = new Date();
            const h = ("00" + date.getHours()).slice(-2);
            const m = ("00" + date.getMinutes()).slice(-2);
            const s = ("00" + date.getSeconds()).slice(-2);
            return  h +":"+ m+":" + s;
        }
        function push(id) {
            const bt_el = document.getElementById("b" + id);
            const log_el = document.getElementById("l" + id);
            const t = theTime();
            bt_el.innerHTML = t;
            log_el.value = getTimestamp()+"   "+t + "sec\n" + log_el.value;

        }
        let start_time = null;
        function start() {
            if (start_time !== null) return;
            start_time = performance.now();
            tick();
        }
        function clear() {
            document.querySelectorAll(".bt").forEach(el => {
                el.innerHTML = "---";
            });
            document.getElementById('time').innerHTML = 'Ready';
            start_time = null;
        }
        function theTime() {
            if (start_time === null) return '---';
            return ((performance.now() - start_time) / 1000).toFixed(1);
        }
        function tick() {
            if (start_time === null) return;

            document.getElementById('time').innerHTML = theTime();
            window.requestAnimationFrame(tick);
        }
        window.onload = function () {
            let start_time = null;
            document.querySelectorAll(".bt").forEach(el => {
                console.log(el);
                el.addEventListener("click", function () { push(el.id.slice(1)); })
            });
            document.getElementById("start").addEventListener('click', start);
            document.getElementById("clear").addEventListener('click', clear);

            document.addEventListener("keypress", function (e) {
                if (e.key == "1" || e.key == "1") push(1);
                if (e.key == "3" || e.key == "3") push(2);
                if (e.key == "5" || e.key == "5") push(3);
                if (e.key == "7" || e.key == "7") push(4);
                if (e.key == "9" || e.key == "9") push(5);
                if (e.key == "9" || e.key == "-") push(6);
                if (e.key == "s") start();
                if (e.key == "c") clear();

            });
        }

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Stopwatch</title>
	<style>
	:root {
	margin: 0;
	padding: 0;
	font-size: 1vw;
	}


	textarea {
	margin: 0;
	padding: 0;
	}

	div {
	margin: 0;
	padding: 0;
	}

	#st_ctrl_button {
	margin-top: 20px;
	}

	#time {
	text-align: center;
	font-size: 10rem;
	}

	.c_bt {
	margin: 0;
	height: 20vh;
	font-size: 5rem;
	}

	.b_start {
	width: 70vw;
	}

	.b_clear {
	width: 26vw;
	}



	#b1 {
	color: black;
	background: #ffaaaa;
	}

	#b2 {
	color: black;
	background: #aaaaff;
	}

	#b3 {
	color: black;
	background: #aaffaa;
	}

	#b4 {
	color: black;
	background: #ffffaa;
	}

	#b5 {
	color: white;
	background: #222;
	}

	#st_buttons {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	margin: 0px 0px;
	}

	.bt_cont {
	display: flex;
	flex-flow: column;
	margin: 0;
	width: 100%;
	}

	.bt {
	margin: 0;
	padding: 0;
	font-size: 5rem;
	width: 100%;
	height: 20vh;
	}

	.log {
	resize: none;
	width: 100%;
	font-size: 1rem;
	height: 5rem;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<div id="time">Ready</div>
	<div id="st_buttons">
	<div class="bt_cont">
	<button id="b1" class="bt">---</button>
	<textarea id="l1" class="log" readonly></textarea>
	</div>
	<div class="bt_cont">
	<button id="b2" class="bt">---</button><br>
	<textarea id="l2" class="log" readonly></textarea>
	</div>
	<div class="bt_cont">
	<button id="b3" class="bt">---</button><br>
	<textarea id="l3" class="log" readonly></textarea>
	</div>
	<div class="bt_cont">
	<button id="b4" class="bt">---</button><br>
	<textarea id="l4" class="log" readonly></textarea>
	</div>
	<div class="bt_cont">
	<button id="b5" class="bt">---</button><br>
	<textarea id="l5" class="log" readonly></textarea>
	</div><!--
	<div class="bt_cont">
	<button id="b6" class="bt">---</button><br>
	<textarea id="l6" class="log" readonly></textarea>
	</div>-->
	</div>

	<div id="st_ctrl_button">
	<button id="start" class="c_bt b_start">start(s)</button>
	<button id="clear" class="c_bt b_clear">clear(c)</button>
	</div>
	</div>
	<script>
	function getTimestamp() {
	const date = new Date();
	const h = ("00" + date.getHours()).slice(-2);
	const m = ("00" + date.getMinutes()).slice(-2);
	const s = ("00" + date.getSeconds()).slice(-2);
	return h +":"+ m+":" + s;
	}
	function push(id) {
	const bt_el = document.getElementById("b" + id);
	const log_el = document.getElementById("l" + id);
	const t = theTime();
	bt_el.innerHTML = t;
	log_el.value = getTimestamp()+" "+t + "sec\n" + log_el.value;

	}
	let start_time = null;
	function start() {
	if (start_time !== null) return;
	start_time = performance.now();
	tick();
	}
	function clear() {
	document.querySelectorAll(".bt").forEach(el => {
	el.innerHTML = "---";
	});
	document.getElementById('time').innerHTML = 'Ready';
	start_time = null;
	}
	function theTime() {
	if (start_time === null) return '---';
	return ((performance.now() - start_time) / 1000).toFixed(1);
	}
	function tick() {
	if (start_time === null) return;

	document.getElementById('time').innerHTML = theTime();
	window.requestAnimationFrame(tick);
	}
	window.onload = function () {
	let start_time = null;
	document.querySelectorAll(".bt").forEach(el => {
	console.log(el);
	el.addEventListener("click", function () { push(el.id.slice(1)); })
	});
	document.getElementById("start").addEventListener('click', start);
	document.getElementById("clear").addEventListener('click', clear);

	document.addEventListener("keypress", function (e) {
	if (e.key == "1" \|\| e.key == "1") push(1);
	if (e.key == "3" \|\| e.key == "3") push(2);
	if (e.key == "5" \|\| e.key == "5") push(3);
	if (e.key == "7" \|\| e.key == "7") push(4);
	if (e.key == "9" \|\| e.key == "9") push(5);
	if (e.key == "9" \|\| e.key == "-") push(6);
	if (e.key == "s") start();
	if (e.key == "c") clear();

	});
	}

	</script>
	</body>

	</html>