hex_color_clock.zip
0.00MB

아주 기본적인 시계 만들기이다 new Date와 setIntervald을 활용해서 만들면 된다.

 

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hex Color Clock</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1 id="clock"></h1>
    <p id="hex-color"></p>
    <script src="app.js"></script>
  </body>
</html>

css

body {
    font-family: "Lato";
    text-align: center;
    margin-top: 400px;
    color: #fff;
}

#clock {
    font-weight: 300;
    font-size: 100px;
}

#hex-color {
    font-size: 20px;
    color: #fff;
}

js

const clock = document.querySelector("#clock");
const hextColor = document.querySelector("#hex-color");

function hexClock() {
  let time = new Date();
  let hours = time.getHours().toString() % 12;
  let minutes = time.getMinutes().toString();
  let seconds = time.getSeconds().toString();

  if (hours.length < 2) hours = "0" + hours;
  if (minutes.length < 2) minutes = "0" + minutes;
  if (seconds.length < 2) seconds = "0" + seconds;

  var clockStr = hours + " : " + minutes + " : " + seconds;
  var hexColorStr = "#" + hours + minutes + seconds;

  clock.textContent = clockStr;
  hextColor.textContent = hexColorStr;
  document.body.style.backgroundColor = hexColorStr;
}

setInterval(() => {
  hexClock();
}, 1000);

 

하나씩 정리해두면서 공부해야겠다.

'JavaScript > Vanilla JS' 카테고리의 다른 글

js 카운트다운  (0) 2020.10.22
js 스톱워치 만들기  (0) 2020.10.19
js es6 연습용 시계 만들기  (0) 2020.06.24
화살표 함수 arrow function 1  (0) 2020.05.05
Math.floor와 Math.random을 이용한 랜덤숫자 뽑기  (0) 2020.04.01

티스토리툴바