この記事では、カレンダー効果を素早く実現するための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=' '; // 今日のスタイルをクリア 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"><<</th> <!-- 年 月 --> <th id="title" colspan="5"></th> <!-- 右矢印 --> <th class="poin">>></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> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </テーブル> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux システムで HugePages をすばやく構成するための完全な手順
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
目次序文ブラウザにおけるオーディオとビデオに関する知識のまとめビデオエンコーディング包装形態オーディ...
html: 実際には、テーブルタグに従っていくつかの実線の円 div を正六角形に配置し、div コ...
目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...
この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...
序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...
目次1. Tomcat の概念–1、サーバー–2、ウェブサーバー–3、Tomcatサーバー次にTom...
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...