반응형
자바스크립트를 이용하여 세계 시계를 만들수 있다. 시계는 moment.js 라는 곳에서 실시간으로 내려받아서 업데이트가 되는 방식이고 원하는 국가를 입력하면 가능하다. 대한민국, 뉴욕, 도쿄, 파리, 베트남의 시계를 만들어 보았다.
다음번에는 요일과 날짜 배열을 좀 바꿔볼까 한다. 디자인은 css로 설정했다.
HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
세계 시간
</title>
<style>
/* CSS 코드 생략 */
</style>
</head>
<body>
<h2>
세계 시간
</h2>
<div id="local-time">
</div>
<div id="new-york-time">
</div>
<div id="tokyo-time">
</div>
<div id="paris-time">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js">
</script>
<script>
function updateTime() { const now = moment(); const localTime = now.format("YYYY-MM-DD HH:mm:ss"); const newYorkTime = now.clone().tz("America/New_York").format("YYYY-MM-DD HH:mm:ss"); const tokyoTime = now.clone().tz("Asia/Tokyo").format("YYYY-MM-DD HH:mm:ss"); const parisTime = now.clone().tz("Europe/Paris").format("YYYY-MM-DD HH:mm:ss"); document.getElementById("local-time").innerText = `현재 시간: ${localTime}`; document.getElementById("new-york-time").innerText = `뉴욕 시간: ${newYorkTime}`; document.getElementById("tokyo-time").innerText = `도쿄 시간: ${tokyoTime}`; document.getElementById("paris-time").innerText = `파리 시간: ${parisTime}`; } updateTime(); setInterval(updateTime, 1000);
</script>
</body>
</html>
세계 시계
반응형
'컴퓨터, 엑셀' 카테고리의 다른 글
| 아이폰 인스타그램 해시태그 입력 엔터키 줄바꾸기 (6) | 2023.04.05 |
|---|---|
| 윈도우 화살표 특수문자 입력방법 및 복사 붙여넣기 (5) | 2023.04.05 |
| IFCOUNTIF를 이용한 엑셀 중복 데이터 검사 및 편집하는 방법 (0) | 2023.02.17 |
| 노션 사용법 - 노션을 써야하는 이유 5가지와 초보자를 위한 노션 후기 (0) | 2023.02.13 |
| 이메일 고정멘트 복사 붙여넣기 매크로 프로그램 (0) | 2023.02.08 |
