はじめに
本記事の内容は学習の備忘録になります。
実装概要
- JSで日付+時間+曜日をリアルタイムで表示
demo
実装内容
表示用のdivタグを作成。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 時計 -->
<div id="time_text"></div>
<script src="main.js"></script>
</body>
</html>
JS側
function showClock() {
let nowTime = new Date();
let nowYear = nowTime.getFullYear();
let nowMonth = nowTime.getMonth() + 1;
let nowDate = nowTime.getDate();
let nowDay = nowTime.getDay();
let dayOfWeekStr = [ "(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)" ][nowDay] ;
let nowHour = ("0"+nowTime.getHours()).slice(-2);
let nowMin = ("0"+nowTime.getMinutes()).slice(-2);
let nowSec = nowTime.getSeconds();
let msg = nowYear+"/"+nowMonth+"/"+nowDate+" "+dayOfWeekStr+" "+nowHour + ":" + nowMin + ":" + nowSec;
day_tims=nowYear+"/"+nowMonth+"/"+nowDate+" "+nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("time_text").innerHTML = msg;
console.log(nowDay);
return day_tims;
}
setInterval('showClock1()',1000);