실시간 시각 표시 전세계 나라별 지역별 도시별 실시간 시각을 확인 할 수 있습니다.
현재 🇰🇷 서울 시각: 12:41:43
도시 선택
12:41:43
2024년 6월 25일 화요일
코드 상세(JS) 👇
<div style="font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; margin: 0; background-color: #000; color: #ff8c00;">
<div id="seoulTime" style="font-family: 'Orbitron', sans-serif; text-align: center; margin: 10px 0; color: #fff;">
<h3 id="seoulTimeDisplay" style="font-size: 1.5rem;">현재 🇰🇷 서울 시각: 12:41:43</h3>
</div>
<div class="dropdown-container" style="margin-bottom: 20px;">
<label for="timezoneSelect">도시 선택: </label>
<select id="timezoneSelect" style="padding: 5px;">
<!-- 옵션이 동적으로 추가됩니다 -->
</select>
</div>
<div id="selectedCity" style="font-family: 'Orbitron', sans-serif; text-align: center; margin: 10px 0;">
<div id="currentCity" style="font-size: 2rem; padding-top: 10px;">도시 선택</div>
<div id="currentTime" style="font-size: 3rem;">12:41:43</div>
<div id="currentDate" style="font-size: 1.5rem;">2024년 6월 25일 화요일</div>
</div>
<div class="clock-container" id="clockContainer" style="display: flex; flex-wrap: wrap; justify-content: center;">
<!-- 시계가 여기에 추가됩니다 -->
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
.clock {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 5px;
padding: 10px;
text-align: center;
width: 80px;
cursor: pointer;
}
.clock h2 {
margin: 0;
font-size: 12px;
color: #000;
}
.clock .time {
font-size: 10px;
margin: 5px 0;
color: #000;
}
.clock.selected {
background-color: #000;
color: #ff8c00;
border: 2px solid #ff8c00; /* 오렌지색 테두리 */
font-weight: bold;
}
.clock.selected h2, .clock.selected .time {
color: #ff8c00;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const timezones = {
"Pacific/Auckland": "🇳🇿 오클랜드",
"Australia/Sydney": "🇦🇺 시드니",
"Asia/Tokyo": "🇯🇵 도쿄",
"Asia/Hong_Kong": "🇭🇰 홍콩",
"Asia/Bangkok": "🇹🇭 방콕",
"Asia/Kolkata": "🇮🇳 콜카타",
"Asia/Dubai": "🇦🇪 두바이",
"Europe/Moscow": "🇷🇺 모스크바",
"Europe/Istanbul": "🇹🇷 이스탄불",
"Europe/Athens": "🇬🇷 아테네",
"Europe/Paris": "🇫🇷 파리",
"Europe/Berlin": "🇩🇪 베를린",
"Europe/London": "🇬🇧 런던",
"Africa/Lagos": "🇳🇬 라고스",
"America/Sao_Paulo": "🇧🇷 상파울로",
"America/New_York": "🇺🇸 뉴욕",
"America/Chicago": "🇺🇸 시카고",
"America/Denver": "🇺🇸 덴버",
"America/Los_Angeles": "🇺🇸 로스앤젤레스",
"America/Anchorage": "🇺🇸 앵커리지",
"Asia/Shanghai": "🇨🇳 상하이",
"Asia/Singapore": "🇸🇬 싱가포르",
"Asia/Jakarta": "🇮🇩 자카르타",
"Asia/Manila": "🇵🇭 마닐라",
"Asia/Kuala_Lumpur": "🇲🇾 쿠알라룸푸르",
"Asia/Taipei": "🇹🇼 타이베이",
"Asia/Ho_Chi_Minh": "🇻🇳 호치민",
"Asia/Phnom_Penh": "🇰🇭 프놈펜",
"Asia/Vientiane": "🇱🇦 비엔티안",
"Asia/Thimphu": "🇧🇹 팀부",
"Asia/Colombo": "🇱🇰 콜롬보",
"Asia/Kathmandu": "🇳🇵 카트만두",
"Asia/Dhaka": "🇧🇩 다카",
"Asia/Almaty": "🇰🇿 알마티",
"Asia/Bishkek": "🇰🇬 비슈케크",
"Asia/Dushanbe": "🇹🇯 두샨베",
"Asia/Ashgabat": "🇹🇲 아슈하바트",
"Asia/Tashkent": "🇺🇿 타슈켄트",
"Europe/Amsterdam": "🇳🇱 암스테르담",
"Europe/Brussels": "🇧🇪 브뤼셀",
"Europe/Zurich": "🇨🇭 취리히",
"Europe/Vienna": "🇦🇹 비엔나",
"Europe/Stockholm": "🇸🇪 스톡홀름",
"Europe/Copenhagen": "🇩🇰 코펜하겐",
"Europe/Madrid": "🇪🇸 마드리드",
"Europe/Rome": "🇮🇹 로마",
"Europe/Budapest": "🇭🇺 부다페스트",
"Europe/Prague": "🇨🇿 프라하",
"Europe/Warsaw": "🇵🇱 바르샤바",
"Europe/Helsinki": "🇫🇮 헬싱키",
"Europe/Oslo": "🇳🇴 오슬로",
"Europe/Dublin": "🇮🇪 더블린",
"Europe/Lisbon": "🇵🇹 리스본"
};
const initialTimezones = Object.keys(timezones).filter(zone => zone !== "Asia/Seoul"); // 모든 시간대를 초기 시계 목록에 포함, 서울 제외
const clockContainer = document.getElementById("clockContainer");
const timezoneSelect = document.getElementById("timezoneSelect");
const currentTime = document.getElementById("currentTime");
const currentDate = document.getElementById("currentDate");
const currentCity = document.getElementById("currentCity");
const seoulTimeDisplay = document.getElementById("seoulTimeDisplay");
let selectedClockElement = null;
// 드롭다운 메뉴 채우기
for (const [zone, city] of Object.entries(timezones)) {
if (zone !== "Asia/Seoul") {
const option = document.createElement("option");
option.value = zone;
option.textContent = city;
timezoneSelect.appendChild(option);
}
}
function createClockElement(zone, name) {
const clockElement = document.createElement("div");
clockElement.className = "clock";
clockElement.innerHTML = `
<h2>${name}</h2>
<div class="time" id="${zone.replace("/", "-")}-time"></div>
`;
clockElement.addEventListener("click", () => {
timezoneSelect.value = zone;
updateClocks();
if (selectedClockElement) {
selectedClockElement.classList.remove("selected");
}
clockElement.classList.add("selected");
selectedClockElement = clockElement;
});
clockContainer.appendChild(clockElement);
}
function calculateTimeDifference(seoulTime, selectedTime) {
const diffInMs = selectedTime - seoulTime;
const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));
return diffInHours;
}
function updateClocks() {
const now = new Date();
initialTimezones.forEach(zone => {
const formatter = new Intl.DateTimeFormat("ko-KR", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZone: zone,
hour12: false
});
const formattedTime = formatter.format(now);
const timeElement = document.getElementById(`${zone.replace("/", "-")}-time`);
if (timeElement) {
timeElement.textContent = formattedTime;
}
});
// 서울 시간 업데이트
const seoulFormatter = new Intl.DateTimeFormat("ko-KR", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZone: "Asia/Seoul",
hour12: false
});
const seoulFormattedTime = seoulFormatter.format(now);
seoulTimeDisplay.textContent = `현재 🇰🇷 서울 시각: ${seoulFormattedTime}`;
// 선택된 도시 업데이트
const selectedTimezone = timezoneSelect.value;
if (selectedTimezone) {
const formatter = new Intl.DateTimeFormat("ko-KR", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZone: selectedTimezone,
hour12: false
});
const formattedTime = formatter.format(now);
const seoulTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
const selectedTime = new Date(now.toLocaleString("en-US", { timeZone: selectedTimezone }));
const timeDiff = calculateTimeDifference(seoulTime, selectedTime);
const timeDiffText = timeDiff >= 0 ? `(+${timeDiff}시간)` : `(${timeDiff}시간)`;
currentTime.textContent = `${formattedTime} ${timeDiffText}`;
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
currentDate.textContent = now.toLocaleDateString('ko-KR', options);
currentCity.textContent = timezones[selectedTimezone];
}
}
// 초기 시계로 시작
initialTimezones.forEach(zone => {
createClockElement(zone, timezones[zone]);
});
updateClocks();
setInterval(updateClocks, 1000);
timezoneSelect.addEventListener("change", () => {
updateClocks();
if (selectedClockElement) {
selectedClockElement.classList.remove("selected");
}
const selectedOption = timezoneSelect.value;
selectedClockElement = document.querySelector(`.clock .time[id="${selectedOption.replace("/", "-")}-time"]`).parentElement;
selectedClockElement.classList.add("selected");
});
});
</script>
</div>
👇
🔎 함께 보면 좋은 글
오늘 금 은 백금 18k 14k 순금 시세 실시간 확인하기