triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
55 lines (47 loc) • 1.94 kB
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">
<link rel="stylesheet" href="./style.css">
<title>counter</title>
</head>
<body>
<div class="navbar">
<img id="logo" src="images/logo.png" width="157">
</div>
<div class="main">
<div class="container">
<!-- 만난지 며칠 -->
<h2>만난지 <span id="day-count">00</span>일째 지남</h2>
<h2>만난지 <span id="day-count2">00</span>일째 남음</h2>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="/dist/all.min.js"></script>
<script>
$(document).ready(function(){
const count = new tr.Daycounter({
startdate: '2020-01-01T24:00:00', // 사작하고자 하는 날짜 및 시간(필수 입력값)
});
const timeId1 = function() {
$('#day-count').html(`${count.statDayD()}일, ${count.startDayH()}시간, ${count.startDayM()}분, ${count.startDayS()}초`)
requestAnimationFrame(timeId1);
};
timeId1();
const count2 = new tr.Daycounter({
enddate : '2021-06-30T24:00:00' // 끝나고자 하는 날짜 및 시간(필수 입력값)
});
const timeId2 = function() {
if(count2.endDayM() < 0 && count2.endDayS() < 0){ //이렇게 조건을 사용해서 현재 시간이 지나면 시간을 멈출수 있습니다.
return false
}
$('#day-count2').html(`${count2.endDayD()}일, ${count2.endDayH()}시간, ${count2.endDayM()}분, ${count2.endDayS()}초`)
requestAnimationFrame(timeId2);
};
timeId2();
});
</script>
</body>
</html>