esctabcapslock/간격타이머.html

## 간격타이머.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>간격타이머</title>
    <style>
        #기록목록>tr>td{
            padding-right: 30px;
        }
    </style>
    <script>
       var stime=0;
        var 정지시각=0;
        var 재생 = false;
        var 현재시간=0;
        var 직전기록시간=0;
        var 기록행번호=0;

        var 문제시작번호=1;
        var 문제간격=1;

        function 시간문자열(x){
            var 분=  Math.round(x/60-0.5)
            var 초=Math.round((x%60)*10)/10;
            if (초<10) 초='0'+초.toString();
            if (분<10) 분='0'+분.toString();
            if (! 초.toString().includes('.')) 초=초.toString()+'.0';
            return 분+':'+초;
        }

        window.onload=function(){
            document.body.addEventListener("keydown",(e)=>{
                //console.log(e.key);
                if(e.key==" ")멈춤(),e.returnValue=false,scroll(0,0);
                else if(!e.ctrlKey){
                    if(e.key=="c"||e.key=="C")초기화();
                    else if(e.key=="a"||e.key=="A") document.getElementById('기록목록').innerHTML="",기록행번호=0;
                    else if(e.key=="r"||e.key=="R"||e.key=="K"||e.key=="k"||e.key=="l"||e.key=="L"||e.key=="Enter")기록();
                    else if(e.key=="p"||e.key=="P")팝업();
                }
            });

            var 시간표시 = document.getElementById("ttime");
            setInterval(function(){
               현재시간 = Number(new Date()) - stime;
                if(재생) 시간표시.innerHTML=시간문자열((현재시간)/1000);
            },1);

        }

        var 초기화=function(){
            재생=false;
            stime=0;
            현재시간=0;
            직전기록시간=0;
            정지시각=0;
            document.getElementById("ttime").innerHTML=0;
        }

        var 멈춤=function(){
            재생=!재생;
            if (재생){
                if (stime==0) stime=Number(new Date());
                else stime+=(Number(new Date())-정지시각);
            }
            else 정지시각=Number(new Date());
        }

        var 기록=function(){
            var 시간='<tr>'//document.createElement('tr');
            var 시간값=재생 ? 현재시간/1000 : (정지시각-stime)/1000;
            if(!시간값)return;
            /*시간.innerHTML=*/시간+=`<td contenteditable>${기록행번호+=문제간격}</td><td>${시간문자열(시간값)}</td><td >${시간문자열(시간값-직전기록시간)}</td>`;
            직전기록시간=시간값;
            시간+='</tr>'//시간.className="기록목록값";
            /*document.getElementById('기록목록').appendChild(시간);*/document.getElementById('기록목록').innerHTML=시간.toString()+document.getElementById('기록목록').innerHTML.toString();
        }

        var 팝업=function(){
            open(location,'간격타이머', "width=150, height=30, top=100, left=200, location=no, menubar=no, toolbar=no, directories=no, status=no, resizable=no")
                // toolbar = 상단 도구창 출력 여부
                // menubar = 상단 메뉴 출력 여부
                // location = 메뉴아이콘 출력 여부
                // directories = 제목 표시줄 출력 여부
                // status = 하단의 상태바 출력 여부
                // scrollbars = 스크롤바 사용 여부
                // resizable = 팝업창의 사이즈 변경 가능 여부
        }

    </script>
</head>
<body>
    <div style="display: none;">
        <button onclick="멈춤()">정지/재셍(' ')</button><button onclick="초기화()">초기화(c)</button><button onclick="기록()">기록(r)</button>
        <div id="설정창">
            <input id="번호" value="1" onkeyup="if(Number(this.value))기록행번호=Number(this.value)-문제간격"><input id="간격"  value="1" onkeyup="if(Number(this.value)) 문제간격=Number(this.value)">
        </div>
        <button id='popup' onclick="팝업()">팝업</button>
    </div>
    <h1 id="ttime">0</h1>
    <div >
        <table><tbody id="기록목록"></tbody></table>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title>간격타이머</title>
	<style>
	#기록목록>tr>td{
	padding-right: 30px;
	}
	</style>
	<script>
	var stime=0;
	var 정지시각=0;
	var 재생 = false;
	var 현재시간=0;
	var 직전기록시간=0;
	var 기록행번호=0;

	var 문제시작번호=1;
	var 문제간격=1;

	function 시간문자열(x){
	var 분= Math.round(x/60-0.5)
	var 초=Math.round((x%60)*10)/10;
	if (초<10) 초='0'+초.toString();
	if (분<10) 분='0'+분.toString();
	if (! 초.toString().includes('.')) 초=초.toString()+'.0';
	return 분+':'+초;
	}

	window.onload=function(){
	document.body.addEventListener("keydown",(e)=>{
	//console.log(e.key);
	if(e.key==" ")멈춤(),e.returnValue=false,scroll(0,0);
	else if(!e.ctrlKey){
	if(e.key=="c"\|\|e.key=="C")초기화();
	else if(e.key=="a"\|\|e.key=="A") document.getElementById('기록목록').innerHTML="",기록행번호=0;
	else if(e.key=="r"\|\|e.key=="R"\|\|e.key=="K"\|\|e.key=="k"\|\|e.key=="l"\|\|e.key=="L"\|\|e.key=="Enter")기록();
	else if(e.key=="p"\|\|e.key=="P")팝업();
	}
	});

	var 시간표시 = document.getElementById("ttime");
	setInterval(function(){
	현재시간 = Number(new Date()) - stime;
	if(재생) 시간표시.innerHTML=시간문자열((현재시간)/1000);
	},1);

	}

	var 초기화=function(){
	재생=false;
	stime=0;
	현재시간=0;
	직전기록시간=0;
	정지시각=0;
	document.getElementById("ttime").innerHTML=0;
	}

	var 멈춤=function(){
	재생=!재생;
	if (재생){
	if (stime==0) stime=Number(new Date());
	else stime+=(Number(new Date())-정지시각);
	}
	else 정지시각=Number(new Date());
	}

	var 기록=function(){
	var 시간='<tr>'//document.createElement('tr');
	var 시간값=재생 ? 현재시간/1000 : (정지시각-stime)/1000;
	if(!시간값)return;
	/시간.innerHTML=/시간+=`<td contenteditable>${기록행번호+=문제간격}</td><td>${시간문자열(시간값)}</td><td >${시간문자열(시간값-직전기록시간)}</td>`;
	직전기록시간=시간값;
	시간+='</tr>'//시간.className="기록목록값";
	/document.getElementById('기록목록').appendChild(시간);/document.getElementById('기록목록').innerHTML=시간.toString()+document.getElementById('기록목록').innerHTML.toString();
	}

	var 팝업=function(){
	open(location,'간격타이머', "width=150, height=30, top=100, left=200, location=no, menubar=no, toolbar=no, directories=no, status=no, resizable=no")
	// toolbar = 상단 도구창 출력 여부
	// menubar = 상단 메뉴 출력 여부
	// location = 메뉴아이콘 출력 여부
	// directories = 제목 표시줄 출력 여부
	// status = 하단의 상태바 출력 여부
	// scrollbars = 스크롤바 사용 여부
	// resizable = 팝업창의 사이즈 변경 가능 여부
	}

	</script>
	</head>
	<body>
	<div style="display: none;">
	<button onclick="멈춤()">정지/재셍(' ')</button><button onclick="초기화()">초기화(c)</button><button onclick="기록()">기록(r)</button>
	<div id="설정창">
	<input id="번호" value="1" onkeyup="if(Number(this.value))기록행번호=Number(this.value)-문제간격"><input id="간격" value="1" onkeyup="if(Number(this.value)) 문제간격=Number(this.value)">
	</div>
	<button id='popup' onclick="팝업()">팝업</button>
	</div>
	<h1 id="ttime">0</h1>
	<div >
	<table><tbody id="기록목록"></tbody></table>
	</div>
	</body>
	</html>