728x90
728x90
바닐라자바스크립트로 만드는 30일 프로젝트, JavaScript 30 프로젝트의 두 번째, JS and CSS Clock 입니다. 주어진 예제에서 디자인을 바꿔보았고, 기존 예제인 아날로그 시계 말고 디지털 시계도 만들어보았습니다.
자바스크립트 아날로그 시계 만들기 (코드원본)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<style>
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
</style>
<script>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
</script>
</body>
</html>
자바스크립트 디지털 시계 만들기 (응용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>
<div id="clock">
<p class="date"></p>
<p class="time"></p>
<p class="text">DIGITAL CLOCK with CodingRestaurant</p>
</div>
<style>
html,body {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
}
.time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
.date {
letter-spacing: 0.1em;
font-size: 24px;
}
.text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
</style>
<script>
const date = document.querySelector('.date');
const time = document.querySelector('.time');
function setDate() {
const now = new Date();
const dayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
const day = dayNames[now.getDay()];
let second = now.getSeconds();
let minute = now.getMinutes();
let hour = now.getHours();
let month = now.getMonth() + 1;
let today = now.getDate();
hour = hour < 10 ? '0' + hour : hour;
today = today < 10 ? '0' + today : today;
month = month < 10 ? '0' + month : month;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
date.innerText = now.getFullYear()+ "-" + month + "-" + today + " " + day;
time.innerText = hour + ":" + minute + ":" + second;
}
setInterval(setDate, 1000);
setDate();
</script>
</body>
</html>
참고하면 좋을 시계 디자인 css
바닐라자바스크립트로 만드는 30일 프로젝트, JavaScript 30 프로젝트의 두 번째, JS and CSS Clock 을 만들어보았습니다. 디자인 수정 시 추가 참고해보면 좋을 css 작업물들 걸어드리면서 포스팅 마무리하겠습니다.
https://codepen.io/kylewetton/pen/QJbOjw
Minimalist Clock, Pure CSS with current time
CSS only, minimalist clock...
codepen.io
https://codepen.io/Wujek_Greg/pen/KRXYpg
Pure CSS watch animation
...
codepen.io
728x90
728x90
'Project > Web' 카테고리의 다른 글
| 전자정부 규격 코드 검사 (일부 JS 파일 체크) (0) | 2020.10.27 |
|---|---|
| 호스팅 후 워드프레스 admin 비밀번호 재설정 (0) | 2020.07.16 |
| JavaScript 30 으로 30일간 매일 하나씩 만들어보기 (6) | 2020.01.01 |
| 워드프레스로 제작했던 웹사이트 (0) | 2019.10.22 |
| [프로젝트] 타일을 이용한 스프링 STS3 MVC 쇼핑몰 (1) 환경설정, 설치 (0) | 2019.10.06 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
