HTML, CSS 및 Javascript를 사용한 아날로그 시계 디자인
4905 단어 csshtmlincoderjavascript
이번 디자인 [Analog Clock Desing]에는 위의 이미지에서 보시는 바와 같이 뉴모픽 디자인이 약간 들어간 시계가 있습니다. 시계는 기본적으로 "clockContainer"클래스가 있는 div입니다. 가장 작은 손이나 막대기는 1시간, 중간은 분, 마지막으로 가장 큰 것은 두 번째입니다. div "clockContainer"에는 배경 이미지가 있습니다.
다음을 좋아할 수 있습니다.
시계의 스틱이나 바늘을 회전시키는 자바스크립트 개념은 우선 1초의 간격을 설정합니다. 이는 코드가 간격 함수 내부에 작성되고 매초마다 실행된다는 것을 의미합니다. 우리가 얻는 간격 설정 함수에서 현재 시, 분, 초. 현재 시간을 얻은 후에는 시계의 막대나 바늘이 회전하는 정도를 찾아야 합니다.
내가 말하려는 내용을 이해하기 어렵다면 소스 코드를 확인하고 미리보기도 할 수 있습니다.
미리보기를 사용할 수 있습니다here.
HTML 코드
<!-- ----------------- Created by InCoder ----------------- -->
<!DOCTYPE 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">
<title>Analog Clock Design - InCoder</title>
<link rel="stylesheet" href="main.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="clockContainer">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>
CSS 코드
/* ----------------- Created by InCoder ----------------- */
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(47 53 77);
}
.clockContainer {
width: 25rem;
height: 25rem;
position: relative;
border-radius: 50%;
background: url('https://drive.google.com/uc?id=1CMGPzgNoLSAiZI738O2DNEMtxUTBfzLM&export=view') no-repeat center;
box-shadow: inset 0px 0px 8px rgb(204 204 204 / 20%), 0px 0px 20px rgb(204 204 204 / 20%);
}
.clockContainer::before {
content: "";
top: 50%;
left: 50%;
width: 5%;
height: 5%;
border-radius: 50%;
position: absolute;
background-color: #797979;
transform: translate(-50%, -50%);
}
.clockContainer :is(.hour,
.minute,
.second) {
position: absolute;
border-radius: 1rem;
transform-origin: bottom;
}
.hour {
top: 21%;
left: 49%;
width: 2%;
height: 28%;
background-color: #797979;
}
.minute {
top: 18%;
left: 49%;
width: 1.5%;
height: 32%;
background-color: #797979;
}
.second {
top: 12%;
left: 49.5%;
width: 1%;
height: 38%;
z-index: -1;
background-color: rgb(233 54 50);
}
자바스크립트 코드
let hourStick = document.querySelector('.hour')
minuteStick = document.querySelector('.minute')
secondStick = document.querySelector('.second');
window.addEventListener('load', () => {
setInterval(() => {
let date = new Date();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
let hDeg = 30 * hour + minute / 2;
let mDeg = 6 * minute;
let sDeg = 6 * second;
hourStick.style.transform = `rotate(${hDeg}deg)`;
minuteStick.style.transform = `rotate(${mDeg}deg)`;
secondStick.style.transform = `rotate(${sDeg}deg)`;
}, 1000);
});
Reference
이 문제에 관하여(HTML, CSS 및 Javascript를 사용한 아날로그 시계 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/analog-clock-desing-using-html-css-and-javascript-1me6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
