[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 16장 연습문제

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 16장 연습문제 2개

Dec 25, 2023

Contents

quiz-1.html


<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시각은?</title>
  <style>
    p {
      margin-top: 20px;
      font-size: 1.2em;
      text-align: center;
    }

    .display {
      font-size: 1.5em;
      font-weight: bold;
      color: blue;
    }
  </style>
</head>

<body>
  <p>현재 시각 <span id="current" class="display"></span></p>
  <script>
    var now = new Date();
    var currentTime = now.toLocaleTimeString();
    document.querySelector('#current').innerHTML = currentTime;
    // 창 열자마자 딜레이 없이 시간 표시

    function displayNow() {
      var now = new Date();
      var currentTime = now.toLocaleTimeString();
      document.querySelector('#current').innerHTML = currentTime;
    }

    setInterval(displayNow, 1000);   
  </script>
</body>

</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시간 보기</title>
  <style>
    #container {
      width: 200px;
      margin: 50px auto;
    }

    button {
      border: 1px solid #ccc;
      background: #fff;
      padding: 20px 30px;
    }
  </style>
</head>

<body>
  <div id="container">
    <button id="bttn">현재 시간 보기</button>
  </div>

  <script>
    document.getElementById('bttn').onclick = displayTime;  // 버튼 클릭하면 displayTime 함수 실행

    function displayTime() {

      // window.open() 메서드를 사용해서 current.html 파일을 팝업 창으로 표시하세요.
      // 팝업 창은 화면 중앙에 표시합니다.

      var left = (window.innerWidth - 400) / 2;
      var top = (window.innerHeight - 200) / 2;
      var opt = "left=" + left + ",top=" + top + ",width=" + 400 + ",height=" + 200;

      window.open("date2.html", "pop", opt);

    }

  </script>
</body>

</html>

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 16장 연습문제

quiz-1.html

result

quiz-2.html

result

More articles

｢JUST 쇼핑몰｣ 웹사이트 개선을 위한 메인페이지 제작 실습

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 17장 연습문제

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 11장 연습문제

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 10장 연습문제