triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
45 lines (41 loc) • 1.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="set" data-dark="false"> <!-- data-dark의 상태를 나타내는곳 -->
<div class="content">
<div class="content_inner">
<a href="#0"><img class="thumb" src="./images/pop1.png" alt="popup"/></a>
<div class="txt">
</div>
</div>
</div>
</div>
<script src="/dist/Counter.min.js"></script>
<script>
(function(){
console.log(tr)
const txt = document.querySelector('.txt');
const set = document.querySelector('.set');
const myc01 = new tr.Timecounter({
targets: '.set',
endTargets: '.txt',
dataKey: 'dark',
startTime: '09:00', // 시작하는 시간
endTime: '15:00', // 끝나는 시간
template: function(state){
if(state){
return `<p>지금은 다크모드</p>`
} else {
return `<p>지금은 라이트모드</p>`
}
}
});
})();
</script>
</body>
</html>