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 をすばやく構成するための完全な手順

推薦する

XHTML の珍しいが便利なタグ

Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...

ローカルでビルドした Docker イメージを Dockerhub に公開する方法

今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明

目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...

同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ

テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...

MySql はコミットする必要がありますか?

MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...

Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]

1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...