JavaScriptでカレンダー効果を素早く実装

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • シンプルなカレンダーを実現するためのjs css+html
  • 軽量ネイティブ js カレンダー プラグイン、calendar.js の使用ガイド
  • シンプルなカレンダーコントロールを学ぶJS
  • JSカレンダーのおすすめ
  • Vue.js でカレンダー効果を作成する
  • Pure js シンプルなカレンダー実装コード
  • js は、その日のシンプルなカレンダー効果を書き込みます [実装コード]
  • js カレンダー コントロール (分単位の精度)
  • PHP+JavaScript カレンダーコントロール
  • シンプルな JS カレンダー コントロールのサンプル コード

<<:  MySQL での挿入効率のいくつかの例の比較

>>:  Linux システムで HugePages をすばやく構成するための完全な手順

推薦する

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

目次序文ブラウザにおけるオーディオとビデオに関する知識のまとめビデオエンコーディング包装形態オーディ...

CSS3 とテーブルタグを使用して円軌道アニメーションを実装するためのサンプルコード

html: 実際には、テーブルタグに従っていくつかの実線の円 div を正六角形に配置し、div コ...

Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例

目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...

Angularの親子コンポーネント通信の詳細な説明

目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...

優れたユーザー エクスペリエンス デザイナーが行うべき 5 つのこと (画像とテキスト)

この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...

MySQL 起動時に報告される ERROR:2002 の分析と解決方法

序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...

Tomcat サーバー入門の超詳細なチュートリアル

目次1. Tomcat の概念–1、サーバー–2、ウェブサーバー–3、Tomcatサーバー次にTom...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)

最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...