javascript うるう年を判定する

2020.09.29
javascript
javascript

javascriptで、西暦から「うるう年」を判定するサンプルコードを記述してます。

1. 環境
2. 判定方法
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

判定方法

うるう年の条件は、

4で割り切れる
100で割り切れない
400で割り切れる

なので、以下の条件式で判定することが可能です。

var year = 2020;

if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
      console.log("閏年です");
}

var year = 2020;

if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {

console.log("閏年です");

}

サンプルコード

以下は、
「判定」ボタンをクリックして、フォームに入力されて年数が「うるう年」であるかを判定した結果を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 500px;
  }
</style>
<script>

  function hoge() {

    // 要素を取得
    var obj = document.getElementById("sample");
    
    // テキストを変更
    if (obj.textContent == "hello") {
      obj.textContent = "World!!";
    } else {
      obj.textContent = "hello";
    }

    // ボタンのテキストも変更
    var btn = document.getElementsByClassName("btn")[0];
    if (btn.textContent == "変更") {
      btn.textContent = "元に戻す";
    } else {
      btn.textContent = "変更";
    }

  }

</script>

<body>
  <div class="main">

    <h2><span id="sample" class="badge badge-primary">hello</span></h2>
    <button type="button" class="btn btn-raised btn-danger" onclick="hoge()">変更</button>

  </div>
</body>

</html>