<head>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
</head>

<body>
  <div class="inner">
    <p id="date">ここに今日の日付が入ります</p>
  </div>
</body>
body{
  background: #03a9f3;
}

#date{
  font-family: "Noto Sans Japanese";
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  color: #f1f1f1;
}
function timer() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const date = now.getDate();
  const hour = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();
  
  //10秒の場合に実行する
  if ((sec % 10) === 0) {
    body_color();    
  }


  const output = `${year} 年 ${month} 月 ${date} 日 ${hour} 時 ${min} 分 ${sec} 秒`;
  const $date = document.getElementById('date');
  $date.textContent = output;
}

function body_color() {
  let color = ['#ffad60', '#28cbab', '#f71e35', '#a1a499', '#128b8e', '#2d4160', '#f9cc49', '#585d37', '#ff7473'];
  const index = Math.floor(Math.random() * color.length);
  document.body.style.backgroundColor = color[index];
}

//1000ミリ秒毎に繰り返し実行する
setInterval(function(){
  timer();
},1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.