다크 테마 시계
폰트
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
날짜 시간 형식 라이브러리
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.5/dayjs.min.js"> </script>
HTML
<div class="card">
<div class="mobile_header">
<h4 class="dateDisplay"></h4>
<div class="battery_status">
<span>48%</span>
<img src="battery-status.png" />
</div>
</div>
<div class="clock">
<div class="wrap">
<span class="twelve">12</span>
<span class="six">6</span>
<span class="nine">9</span>
<span class="three">3</span>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
<span class="dot"></span>
</div>
</div>
<div class="timing">
<span>
<span class="hours"></span>:<span class="mins"></span>
</span>
<p class="dateDisplay"></p>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width:100%;
height:100vh;
display:flex;
align-items: center;
justify-content: center;
background-color:#212B36;
font-family: 'Poppins', sans-serif;
}
.card{
width:300px;
height:500px;
border-radius:20px;
position: relative;
display:flex;
flex-direction: column;
background: #212B36;
box-shadow: 20px 20px 60px #1c252e,
-20px -20px 60px #26313e;
}
.mobile_header{
display:flex;
align-items: center;
justify-content:space-between;
padding:10px 30px;
}
.mobile_header h4{
font-size:12px;
font-weight:400;
/* margin-bottom:15px; */
color:#C4CDD5;
text-transform: uppercase;
}
.battery_status{
display:flex;
align-items: center;
justify-content:center;
}
.battery_status span{
font-size:12px;
font-weight: 600;
margin-right: 3px;
color:#C4CDD5;
}
.battery_status img{
width:20px;
}
.clock{
width:300px;
height: 350px;
display:flex;
align-items: center;
justify-content:center;
}
.wrap{
width:200px;
height:200px;
position: relative;
overflow: hidden;
border-radius: 100%;
background: #212B36;
box-shadow: 20px 20px 60px #1c252e,
-20px -20px 60px #26313e;
}
.twelve,.six,.nine,.three{
font-size:18px;
font-weight: 400;
color:#C4CDD5;;
}
.twelve{
position:absolute;
top:20px;
left: 50%;
transform:translate(-50%,-50%)
}
.six{
position:absolute;
bottom: -5px;
left: 50%;
transform:translate(-50%,-50%)
}
.three{
position:absolute;
right: 10px;
top: 50%;
transform:translate(-50%,-50%)
}
.nine{
position:absolute;
left: 20px;
top: 50%;
transform:translate(-50%,-50%)
}
.hour,.minute{
position:absolute;
height:50px;
width:6px;
margin: auto;
top:-25%;
left: 0;
bottom:0;
right: 0;
background:rgb(79, 255, 132);
transform-origin: bottom center;
transform: rotate(0deg);
box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7);
z-index: 1;
border-radius: 100%;
}
.minute{
position:absolute;
height:60px;
width:4px;
top:-30%;
left:0;
transform: rotate(90deg);
}
.second{
position:absolute;
height:70px;
width:2px;
margin: auto;
top:-36%;
left: 0;
bottom:0;
right: 0;
background:#ff4B3E;
border-radius: 100%;
transform-origin: bottom center;
transform: rotate(180deg);
z-index: 1;
left:0;
box-shadow: 0 0 10px rgb(255, 75,62 ,0.6), 0 0 20px rgb(255, 75, 62 , 0.7);
}
.dot{
position:absolute;
height:12px;
width:12px;
margin: auto;
top:0;
left: 0;
bottom:0;
right: 0;
background:#ffffff;
border-radius:100px;
border: 2px solid #1b1b1b;
z-index: 1;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.timing{
text-align:center;
}
.timing span{
font-size:24px;
font-weight: 500;
color:rgb(79, 255 ,132);
filter: drop-shadow(0 0 5px rgb(79, 255 ,132 , 0.6));
/* box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7), 0 0 30px rgb(79, 255 ,132 , 0.8), 0 0 40px rgb(79, 255 ,132 , 0.9); */
}
.timing p{
font-size:14px;
text-transform: uppercase;
color:#C4CDD5;
}
자바스크립트
var inc=1000;
clock()
function clock(){
const date=new Date();
const hours = ((date.getHours()+11)%12+1);
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const hour=hours*30;
const minute=minutes*6;
const second=seconds*6;
const h=(hours < 10) ? "0"+hours : hours;
const m=(minutes < 10) ? "0"+minutes : minutes;
document.querySelector('.hours').innerHTML=h;
document.querySelector('.mins').innerHTML=m;
document.querySelector('.hour').style.transform=`rotate(${hour}deg)`;
document.querySelector('.minute').style.transform=`rotate(${minute}deg)`;
document.querySelector('.second').style.transform=`rotate(${second}deg)`;
}
document.querySelector('.timing >p').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
document.querySelector('.mobile_header >h4').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
setInterval(clock,inc);
데모 보기
https://darkthemeclock.netlify.app/
소스 코드 다운로드
https://github.com/vikramsu/dark_clock
Reference
이 문제에 관하여(다크 테마 시계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/vikramsu/dark-theme-clock-1b75
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width:100%;
height:100vh;
display:flex;
align-items: center;
justify-content: center;
background-color:#212B36;
font-family: 'Poppins', sans-serif;
}
.card{
width:300px;
height:500px;
border-radius:20px;
position: relative;
display:flex;
flex-direction: column;
background: #212B36;
box-shadow: 20px 20px 60px #1c252e,
-20px -20px 60px #26313e;
}
.mobile_header{
display:flex;
align-items: center;
justify-content:space-between;
padding:10px 30px;
}
.mobile_header h4{
font-size:12px;
font-weight:400;
/* margin-bottom:15px; */
color:#C4CDD5;
text-transform: uppercase;
}
.battery_status{
display:flex;
align-items: center;
justify-content:center;
}
.battery_status span{
font-size:12px;
font-weight: 600;
margin-right: 3px;
color:#C4CDD5;
}
.battery_status img{
width:20px;
}
.clock{
width:300px;
height: 350px;
display:flex;
align-items: center;
justify-content:center;
}
.wrap{
width:200px;
height:200px;
position: relative;
overflow: hidden;
border-radius: 100%;
background: #212B36;
box-shadow: 20px 20px 60px #1c252e,
-20px -20px 60px #26313e;
}
.twelve,.six,.nine,.three{
font-size:18px;
font-weight: 400;
color:#C4CDD5;;
}
.twelve{
position:absolute;
top:20px;
left: 50%;
transform:translate(-50%,-50%)
}
.six{
position:absolute;
bottom: -5px;
left: 50%;
transform:translate(-50%,-50%)
}
.three{
position:absolute;
right: 10px;
top: 50%;
transform:translate(-50%,-50%)
}
.nine{
position:absolute;
left: 20px;
top: 50%;
transform:translate(-50%,-50%)
}
.hour,.minute{
position:absolute;
height:50px;
width:6px;
margin: auto;
top:-25%;
left: 0;
bottom:0;
right: 0;
background:rgb(79, 255, 132);
transform-origin: bottom center;
transform: rotate(0deg);
box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7);
z-index: 1;
border-radius: 100%;
}
.minute{
position:absolute;
height:60px;
width:4px;
top:-30%;
left:0;
transform: rotate(90deg);
}
.second{
position:absolute;
height:70px;
width:2px;
margin: auto;
top:-36%;
left: 0;
bottom:0;
right: 0;
background:#ff4B3E;
border-radius: 100%;
transform-origin: bottom center;
transform: rotate(180deg);
z-index: 1;
left:0;
box-shadow: 0 0 10px rgb(255, 75,62 ,0.6), 0 0 20px rgb(255, 75, 62 , 0.7);
}
.dot{
position:absolute;
height:12px;
width:12px;
margin: auto;
top:0;
left: 0;
bottom:0;
right: 0;
background:#ffffff;
border-radius:100px;
border: 2px solid #1b1b1b;
z-index: 1;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.timing{
text-align:center;
}
.timing span{
font-size:24px;
font-weight: 500;
color:rgb(79, 255 ,132);
filter: drop-shadow(0 0 5px rgb(79, 255 ,132 , 0.6));
/* box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7), 0 0 30px rgb(79, 255 ,132 , 0.8), 0 0 40px rgb(79, 255 ,132 , 0.9); */
}
.timing p{
font-size:14px;
text-transform: uppercase;
color:#C4CDD5;
}
var inc=1000;
clock()
function clock(){
const date=new Date();
const hours = ((date.getHours()+11)%12+1);
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const hour=hours*30;
const minute=minutes*6;
const second=seconds*6;
const h=(hours < 10) ? "0"+hours : hours;
const m=(minutes < 10) ? "0"+minutes : minutes;
document.querySelector('.hours').innerHTML=h;
document.querySelector('.mins').innerHTML=m;
document.querySelector('.hour').style.transform=`rotate(${hour}deg)`;
document.querySelector('.minute').style.transform=`rotate(${minute}deg)`;
document.querySelector('.second').style.transform=`rotate(${second}deg)`;
}
document.querySelector('.timing >p').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
document.querySelector('.mobile_header >h4').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
setInterval(clock,inc);
Reference
이 문제에 관하여(다크 테마 시계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vikramsu/dark-theme-clock-1b75텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)