Newer
Older
Teatime / book-js / answer / 4-02_12hour / step2 / index.html
@KAOKA Daisuke KAOKA Daisuke on 29 Jan 2022 1 KB add file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>4-02_12hour</title>
<link href="../../_common/images/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
<link href="../../_common/css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>わかりやすく日時を表示する</h1>
<h2>12時間時計にしてみよう</h2>
</div><!-- /.container -->
</header>
<main>
<div class="container">
<section>
    <p>最終アクセス日時:<span id="time"></span></p>
</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
<p>JavaScript Samples</p>
</div><!-- /.container -->
</footer>
<script>
'use strict';

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
let ampm = '';
if(hour < 12) {
    ampm = 'a.m.';
} else {
    ampm = 'p.m.';
}

const output = `${year}/${month + 1}/${date} ${hour % 12}:${min}${ampm}`;
document.getElementById('time').textContent = output;
</script>
</body>
</html>