Skip to content

Instantly share code, notes, and snippets.

@esctabcapslock
Created November 24, 2021 01:14
Show Gist options
  • Save esctabcapslock/d76c9b0a0dd67c1c44ae3a2d317dded8 to your computer and use it in GitHub Desktop.
Save esctabcapslock/d76c9b0a0dd67c1c44ae3a2d317dded8 to your computer and use it in GitHub Desktop.
간격을 팝업으로 간단하게
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment