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;

    }

    #カレンダー{
      背景色: #9900ff;
      色: #fff;
      境界線の半径: 5px;
      マージン: 100px 自動;
    }

    ＃タイトル {
      フォントサイズ: 1.4em;
      パディング: 4px 0.55em;
    }

    #日 th {
      フォントの太さ: 太字;
      テキスト配置: 中央;
      パディング: 4px 0.55em;
    }

    #カレンダー td {
      テキスト配置: 中央;
      パディング: 4px 20px;
    }

    ＃今日 {
      色: #f00;
      フォントの太さ: 太字;
    }

    .ポイント{
      カーソル: ポインタ;
      カーソル: 手;
    }
  </スタイル>
  <スクリプト>
    window.onload = 関数(){
      var フォーム = document.getElementById('カレンダー');
      //カレンダー オブジェクト独自の init メソッドを呼び出します。calendar.init(form);
    }
    var カレンダー = {
      年: null、
      月: null、
      //日付配列 dayTable: null,
      // 初期化関数 init(form) {
        // 1 日の配列を取得します。this.dayTable=form.getElementsByTagName('td');
        //2 カレンダーを作成し、現在の時刻を渡します this.createCalendar(form,new Date());
        var nextMon=form.getElementsByTagName('th')[2];
        var preMon=form.getElementsByTagName('th')[0];
        preMon.onclick=関数(){
        カレンダー.clearCalendar(フォーム)
          var preDate = new Date (calendar.year,calendar.month-1,1);
          カレンダー.createCalendar(フォーム、preDate)
        }
        nextMon.onclick=関数(){
          カレンダー.clearCalendar(フォーム)
          var nextDate=新しい日付(calendar.year、calendar.month+1、1);
          カレンダー.createCalendar(フォーム、次の日付)
        }
      },
      // カレンダーデータをクリアする clearCalendar(form) {
        var tds = form.getElementsByTagName('td');
        (var i = 0; i < tds.length; i++) の場合 {
          tds[i].innerHTML='&nbsp';
          // 今日のスタイルをクリア tds[i].id='';
        }
      },
      // 3 カレンダーを生成する // テーブル date から作成する日付 createCalendar(form,date){
        //現在の年を取得します。this.year=date.getFullYear(); 
         //現在の月を取得します。this.month=date.getMonth();

         //カレンダーフォームに年と月を書き込みます。getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
         //今月の日数を取得します var dataNum=this.getDateLen(this.year,this.month);
         var firstDay = this.getFristDay(calendar.year,calendar.month);
        // ループして各日の数字をカレンダーに書き込みます // i で日付を表します。
        (var i = 1; i <= dataNum; i++) の場合 {
          this.dayTable[fristDay+i-1].innerHTML=i;
          var nowDate =新しい日付();
          if(i == nowDate.getDate() && calendar.month == nowDate.getMonth() && calendar.year == nowDate.getFullYear()){
            // 現在の要素の ID を今日に設定する
            calendar.dayTable[i+fristDay-1].id = "今日";
          }
        }
      },
       // 今月の日数を取得する getDateLen(year,month){
        //次の月の最初の日を取得します。var nextMonth=new Date(year,month+1,1);
        // 翌月の最初の日の時間を、前月の最終日の時間から 1 引いた値に設定します。24 時間を超えない値を減算します nextMonth.setHours(nextMonth.getHours()-1);
        //前月の最終日である翌月の日付を取得します。
        nextMonth.getDate() を返します。
       },
       // 月の最初の日を取得します。
      getFristDay:関数(年,月){
        var firstDay=新しい日付(年,月,1);
        firstDay.getDay() を返します。
      }
    } 
  </スクリプト>
</head>

<本文>
  <テーブル id="カレンダー">
    <tr>
      <!-- 左矢印 -->
      <th class="poin">&lt;&lt;</th>
      <!-- 年 月 -->
      <th id="title" colspan="5"></th>
      <!-- 右矢印 -->
      <th class="poin">&gt;&gt;</th>
    </tr>
    <tr id="日">
      <th>日</th>
      <th>一</th>

      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </テーブル>

</本文>

</html>

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

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