JavaScript カスタム カレンダー効果

JavaScript カスタム カレンダー効果

この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装のアイデア:各月の最初の日に曜日を取得し、前の日を空白として入力し、各月の日数を取得し、ループに入力し、現在の時間を判断して別のスタイルを追加し、前の月と次の月をクリックしたときに月を変更します。

現在の月の最初の日を取得します。戻り値は 0 (日曜日) から 6 (土曜日) までの整数です。

var date = 新しい Date();
var y = date.getFullYear();
var m = date.getMonth();
新しい Date(y,m,1).getDay();

現在の月の日数を取得します

var date = 新しい Date();
var y = date.getFullYear();
var m = date.getMonth();
新しい日付(y,m+1,-1)。getDate()+1;

最後に、前の月または次の月をクリックして 1 を加算または減算し、カプセル化されたカレンダー機能を実行します。

完全なコード:

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        体 {
            背景: #2c3e50;
        }

        .カレンダー{
            幅: 400ピクセル;
            マージン: 50px 自動;
        }

        .カレンダーヒント{
            フォントサイズ: 16px;
            テキスト配置: 中央;
            色: #fff;
        }

        .前へ {
            フロート: 左;
            カーソル: ポインタ;
        }

        。次 {
            フロート: 右;
            カーソル: ポインタ;
        }

        .calendar-month {
            テキスト配置: 中央;
            マージン: 10px 0;
            色: #fff;
        }

        ul {
            リストスタイル: なし;
            ディスプレイ: フレックス;
        }

        li {
            幅: 57px;
            テキスト配置: 中央;
            高さ: 55px;
            行の高さ: 55px;
            フォントサイズ: 16px;
            色: #fff;
        }

        .カレンダー日{
            ディスプレイ: フレックス;
        }

        .calendar-day の範囲 {
            フレックス: 1;
            色: #fff;
            テキスト配置: 中央;
            高さ: 40px;
            行の高さ: 40px;

        }

        .カレンダーデータ{
            ディスプレイ: フレックス;
            flex-wrap: ラップ;
        }

        li {
            幅: 57px;
            カーソル: ポインタ;
        }

        li:ホバー{
            背景: #2d3436;
        }

        .カレンダーデータ.on {
            色: #d63031;
        }
    </スタイル>
</head>

<本文>
    <div class="カレンダー">
        <div class="カレンダーヒント">
            <span class="prev">前月</span>
            2022年
            <span class="next">来月</span>
        </div>
        <div class="calendar-month">5月</div>
        <div class="カレンダー日">
            <span>日</span>
            <span>一</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
        <ul class="カレンダーデータ">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <スクリプト>
        var date = 新しい Date();
        var year = document.querySelector("#year");
        var 月 = document.querySelector(".calendar-month");
        var カレンダーデータ = document.querySelector(".カレンダーデータ");
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var monthArr = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
        var y,m,day,d,html,今日;
        カレンダー();

        関数カレンダー() {
            y = date.getFullYear();
            year.innerHTML = y + "年";

            m = date.getMonth();
            month.innerHTML = monthArr[m];
            day = new Date(y, m, 1).getDay(); //各月の最初の日を取得します d = new Date(y, m + 1, -1).getDate() + 1; //日数を取得します html = "";

            //各月の初日より前の時間を空に入力します for (var i = 0; i < day; i++) {
                html += "<li> </li>";
            }

            (var j = 1; j <= d; j++) の場合 {
                if (y==新しい日付().getFullYear() && m==新しい日付().getMonth() && j==日付.getDate()) {
                    html += "<li class='on'>" + j + "</li>";
                } それ以外 {
                    html += "<li>" + j + "</li>";
                }

            }
            カレンダーデータ.innerHTML = html;
        }

        prev.onclick = 関数(){
            date.setMonth(date.getMonth() - 1);
            カレンダー();
        }

        next.onclick = 関数(){
            date.setMonth(date.getMonth() + 1);
            カレンダー();
        }
    </スクリプト>
</本文>

</html>

効果:

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

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

<<:  Zenコーディングリソース更新機能強化

>>:  Google 翻訳ツール: 多言語ウェブサイトを素早く実装

推薦する

Nginx 構成の実装 https

目次1: https証明書を準備する2: nginx sslモジュールを準備する3: SSL証明書を...

HTMLはテキスト行のインターセプトの実装原理とコードを超えています

複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。 HTML:コー...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...

CentOSはexpectを使用してスクリプトやコマンドをバッチでリモート実行します

サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

CSS3 は本当に SCSS に取って代わるのでしょうか?

Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...

Docker Machineの詳細な説明

Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...

MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック

MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...