JSFiddle - React, Tailwind, and code Playground

by ha ha

HTML

<ul>
  <li>덴버</li>
  <li>헬싱키</li>
  <li>리우</li>
  <li>나이로비</li>
  <li>모스크바</li>
  <li>오슬로</li>
  <li>도쿄</li>
  <li>서울</li>
</ul>

<button id="btn">시간</button>
<h3 id="clock">00:00:00</h3>
<p id="toNow"></p>
<p id="toMin"></p>
<p id="toHour"></p>
<p id="toGmt"></p>

JavaScript

var clockTarget = document.getElementById('clock');

function clock(){
	
  var date = new Date();
	var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  
  clockTarget.innerText = `${hours < 10 ? `0${hours}`: hours}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds < 10 ? `0${seconds}`: seconds}`;
}

function gmt(){
	 // 기본 시간 구하기
  var toTime = new Date();
  document.getElementById("toNow").innerHTML = toTime.toString();
  
  // KST와 UTC의 차이 - 분
  var min = toTime.getTimezoneOffset();
  document.getElementById("toMin").innerHTML = min;

  // KST와 UTC의 차이 - 시간
  var hour = toTime.getTimezoneOffset() / 60;
  document.getElementById("toHour").innerHTML = hour;
  
	var calGmt = toTime.setHours(toTime.getHours() + hour);
  var calGmt = new Date(calGmt);
  document.getElementById("toGmt").innerHTML = calGmt.toUTCString();
}

function init(){
	clock();
  gmt();
  setInterval(clock,1000);
}

init();