제발 함수에 return 좀 써라
<!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>타이머(스탑워치)만드는 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
var ms = 0, s =0, m=0, h=0;
var id;
$(function(){
$(document).on('click','.btn-start-pause',function(){
if($(this).text()=='중지'){
$(this).text('시작').css('color','black');
clearInterval(id);
}
else if($(this).text()=='시작'){
$(this).text('중지').css('color','red');
id = setInterval(function(){
ms++;
if(ms == 100){ms=0; s++;}
if(s == 60){s=0; m++; }
if(m == 60){m=0; h++;}
$('.time').text(timerForm(h,m,s,ms));
},10)
}
})
$(document).on('click','.btn-reset',function(){
h=0; m=0; s=0; ms=0;
$('.btn-start-pause').text('시작').css('color','black');
clearInterval(id);
$('.time').text(timerForm(h,m,s,ms));
$('.timeRecord').empty();
})
$(document).on('click','.btn-record',function(){
var recordForm = '<li>'+timerForm(h,m,s,ms)+'</li>'
$('.timeRecord').prepend(recordForm); //최근기록이 맨위로
})
})
function addZero(num){
return (num <10) ? '0'+num : ''+num; //제발 return쓰는 것좀 잊지마라
}
function timerForm(h,m,s,ms){
return addZero(h)+' : '+addZero(m)+' : '+addZero(s)+'.'+addZero(ms);
}
</script>
<style>
*{ margin: 0; padding: 0; color: black; list-style: none; text-decoration: none; box-sizing: border-box;}
.container{border: 1px solid black; padding: 20px; min-width: 400px;}
.time{ background-color: white; height: 100px; border: 1px solid black;
margin-bottom: 20px; font-size: 60px; text-align: center;}
.buttonBox{display: flex;}
.btn-reset{margin-left: 35px; margin-right: 35px;}
button{height: 50px; display: block; width: calc(100% / 3); cursor:pointer; font-weight: bolder;}
.timeRecord{border: 1px solid black; margin-top: 20px;}
.timeRecord li{text-align: center; font-size: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="time"></div>
<div class="buttonBox">
<button class="btn-start-pause">시작</button>
<button class="btn-reset">초기화</button>
<button class="btn-record">기록</button>
</div>
<ul class="timeRecord">
<!-- <li></li> -->
</ul>
</div>
</body>
</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>타이머(스탑워치)만드는 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
var ms = 0, s = 0, m = 0, h = 0;
var id;
$(function(){
$('#start-btn').click(function(){ //자동완성이 편해서 on 말고 click 썼음
if($(this).hasClass('stop')){
//중지버튼을 클릭하면 타이머를 중지
clearInterval(id);
$(this).text('시작');
}
else{
//시작 버튼이면 타이머 시작
id=setInterval(function(){
ms++;
if(ms == 100){ ms =0; s++; }
if(s==60){ s = 0; m++; }
if(m == 60){ m = 0; h++; }
$('.view-box').text(getTime(h,m,s,ms));
},10); //10ms마다 동작되는 기능
$(this).text('중지');
}
$(this).toggleClass('stop'); //해당클래스에 ()안이 있으면 넣고 없으면 빼고
})
$('#init-btn').click(function(){
h=0; m=0; s=0; ms=0;
$('.view-box').text(getTime(h,m,s,ms));
$('.stop').click(); //버튼이 중지상태에서 시작으로 만들어야해서 누르는거
$('.record-box').empty();
})
$('#record-btn').click(function(){
var str = ' <div class="record">'+getTime(h,m,s,ms)+'</div>'
$('.record-box').prepend(str);
})
})
//시, 분, 초, 밀리초가 주어지면 문자열로 만들어 주는 함수
function getTime(h,m,s,ms){
return addZero(h) +' : '+ addZero(m) +' : '+ addZero(s) +'.'+ addZero(ms);
}
//숫자가 10미만이면 앞에 0을 붙여서 문자열로 만들어주는 함수
function addZero(num){
if(num < 10){
return '0'+num;
}
return ''+num;
}
</script>
<style>
.container{
width: 500px; margin-top: 30px auto 0;
}
.view-box{
height: 50px; line-height: 50px; text-align: center; font-weight: bold;
border: 1px solid black; margin-bottom: 10px;
}
.btn-box::after{content: ''; clear: both; display: block;}
.btn-box>button{
height: 50px; box-sizing: border-box; width: 160px; border: 1px solid black;
text-align: center; line-height: 48px; margin-right: 10px; float: left;
}
.btn-box>button:last-child{
margin-right: 0;
}
.record-box{margin-top: 10px; padding: 10px; border: 1px solid black;
text-align: center; min-height: 21px;
}
</style>
</head>
<body>
<div class="container">
<div class="view-box">00:00:00.00</div>
<div class="btn-box">
<button id="start-btn">시작</button>
<button id="init-btn">초기화</button>
<button id="record-btn">기록</button>
</div>
<div class="record-box">
<!-- <div class="record">00:00:00.00</div>
<div class="record">00:00:00.00</div> -->
</div>
</div>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| e.preventDefault() (0) | 2021.08.20 |
|---|---|
| .trigger() 이벤트 (0) | 2021.08.20 |
| JQ_(네이버지식in)게시글목록보기타입에 따른 보기방식 (0) | 2021.07.03 |
| JQ_게시글에 댓글달기 기능예제 (0) | 2021.07.01 |
| JQ_정규표현식 예제 (0) | 2021.07.01 |