자정 24시간 타이머(카운트다운-남은시간) 정보
자정 24시간 타이머(카운트다운-남은시간)본문
day = math.floor
1000*60*60*24이렇게 쓰기 귀찮아서
그냥..짜봤어요..누군가 필요할 수도 있을거란 생각에 공유드립니다
https://codepen.io/derrickmckeown/pen/KLDhk?css-preprocessor=sass
위 코드펜 참고해서 만들엇는데 시와 분이 반올림이 안되어있어서
수정해놨어요
마크업도 별도로해놨으니..CSS는 꾸미시면 되실거라..
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:100,400);
#the-final-countdown {
background: #333;
font-family: 'Lato', sans-serif;
text-align: center;
color: #eee;
text-shadow: 1px 1px 5px black;
padding: 1rem 0;
font-size: 3rem;
border: 1px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="the-final-countdown">
<p></p>
</div>
<script>
setInterval(function time(){
//시간 초기화
var d = new Date();
var hours = 24 - d.getHours();
var min = 60 - d.getMinutes();
var sec = 60 - d.getSeconds();
//분이 있으면 시 반올림
if(min =='00'){
hours = 24 - d.getHours();
}else{
hours = 23 - d.getHours();
}
//초가 있으면 분 반올림
if(sec =='00'){
min = 60 - d.getMinutes();
}else{
min = 59 - d.getMinutes();
}
//1자리수라면 0을 붙혀라
if((hours + '').length == 1){
hours = '0' + hours;
}
if((min + '').length == 1){
min = '0' + min;
}
if((sec + '').length == 1){
sec = '0' + sec;
}
//날짜를 표기하고 딜레이는 1초(1000)마다 바뀌겠금
jQuery('#the-final-countdown p').html
('<span class="t_hour">'+hours+'</span>'+
'<span class="t_colon">:</span>'+
'<span class="t_min">'+min+'</span>'+
'<span class="t_colon">:</span>'+
'<span class="t_sec">'+sec+'</span>')
}, 1000);
</script>
추천
11
11
댓글 10개
감사합니다
라토폰트 괜찮더라구요. 수고하셨습니다.
유용한 팁 올려주셔서 감사합니다.
감사합니다.
한번 적용해 봐야 겠네요
잘 쓰겠습니다.^^
타이머 기능을, 그누외에 타 사이트에 적용하는 방법도 같을까요??
@풀먹는여우 네네
이거 0시 기준이 서버 시간인가요?
만약 그렇다면 출석부 게시판 상단에 붙이면 좋을것 같아서요.
윈도우 표준시랑 연동되는거 같아 질문 남깁니다.
만약 그렇다면 출석부 게시판 상단에 붙이면 좋을것 같아서요.
윈도우 표준시랑 연동되는거 같아 질문 남깁니다.