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 翻訳ツール: 多言語ウェブサイトを素早く実装

推薦する

ウェブ標準学習リソースの素晴らしいコレクション

これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

MySQL binlog ログを開く方法

binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...

Dockerイントラネット侵入FRP展開の実装プロセスの分析

1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...

Discuz! フォーラムに設定オプションを追加する方法

Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...

Linux 仮想マシンの IP アドレスを変更し、ゲートウェイを確認し、ネットワーク環境を構成する方法に関するチュートリアル

仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

jQueryは要素を追加した後に元のイベントが実行されない問題を解決します

まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...

Vueがビデオアップロード機能を実装

この記事では、参考までに、ビデオアップロード機能を実現するためのVueの具体的なコードを紹介します。...

Ubuntu 上の Apache で SSL (https 証明書) を設定する正しい方法の詳細な説明

まず、Alibaba Cloud の公式チュートリアルをご覧ください。ファイルの説明: 1. 証明書...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

最もよく使用されるJavaScriptイベントについて詳しく学ぶ

目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...

Sqoop エクスポート マップ 100% 削減 0% さまざまな理由と解決策でスタック

私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...