シンプルなカレンダー効果を実現する JavaScript コード

この記事では、シンプルなカレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果は以下のとおりです。

コード：

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

<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <スタイル>
  * {
   マージン: 0;
   パディング: 0;
   ボックスのサイズ: 境界線ボックス;
  }
  
  ＃箱 {
   幅: 400ピクセル;
   高さ: 502px;
   境界線: 2px 実線オレンジ;
   マージン: 50px 自動;
   フォントサイズ: 48px;
   テキスト配置: 中央;
  }
  
  #ym{
   高さ: 100px;
   行の高さ: 100px;
  }
  
  #d {
   高さ: 200px;
   行の高さ: 200px;
   背景色: オレンジ;
   フォントサイズ: 72px;
  }
  
  #w {
   高さ: 100px;
   行の高さ: 100px;
  }
  
  #hms{
   高さ: 100px;
   行の高さ: 100px;
  }
 </スタイル>
</head>

<本文>
 <div id="ボックス">
  <div id="ym"></div>
  <div id="d"></div>
  <div id="w"></div>
  <div id="hms"></div>

 </div>
 <スクリプト>
  //getDateAndTime メソッドを呼び出します getDateAndTime();

  //タイマーを開始し、getDateAndTime メソッドを呼び出します。window.setInterval(getDateAndTime, 1000);

  関数 getDateAndTime() {


   //システムの現在の日付と時刻を取得します。var date = new Date();

   //日付と時刻の要素を抽出します var year = date.getFullYear();
   var 月 = date.getMonth() + 1;
   日付を取得する
   var week = date.getDay();
   var 時間 = date.getHours();
   var 分 = date.getMinutes();
   var 秒 = date.getSeconds();

   //週のフォーマットを処理する switch (week) {
    ケース0:
     week = '日曜日';
     壊す;
    ケース1:
     week = '月曜日';
     壊す;
    ケース2:
     week = '火曜日';
     壊す;
    ケース3:
     week = '水曜日';
     壊す;
    ケース4:
     week = '木曜日';
     壊す;
    ケース5:
     week = '金曜日';
     壊す;
    ケース6:
     week = '土曜日';
     壊す;


   }
   //時間、分、秒のフォーマットを処理する関数を定義します。function formatHMS(time) {
    (時間 < 10) の場合 {
     '0' + 時間を返します。
    } それ以外 {
     返却時間;
    }
   }

   //ページ要素を取得します var ym = document.getElementById('ym');
   var d = document.getElementById('d');
   var w = document.getElementById('w');
   var hms = document.getElementById('hms');
   // ページに日付と時刻を書き込みます ym.innerHTML = year + 'year' + month + 'month';
   d.innerHTML = 日;
   w.innerHTML = 週;
   hms.innerHTML = 時間 + '時間' + 分 + '分' + 秒 + '秒';

  }
 </スクリプト>

</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: