カレンダー効果を実現するJavaScript

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>カレンダーを作成する</title>
  <スタイル>
   本文{text-align:center;}
   .box{マージン:0 自動;幅:880px;}
   .title{背景: #ccc;}
   表{高さ:200px;幅:200px;フォントサイズ:12px;テキスト配置:center;フロート:left;マージン:10px;フォントファミリ:arial;}
  </スタイル>
  <script src="calendar.js"></script>
  <スクリプト>
   var year = parseInt(prompt('年を入力してください:','2019'));//ポップアップ ウィンドウを作成します document.write(calendar(year));//指定された年のカレンダーを生成する関数を呼び出します</script>
 </head>
 <本文>
 </本文>
</html>

カレンダー.js

関数カレンダー(y){
 //指定された年の 1 月 1 日の曜日を取得します。var w = new Date(y,0).getDay();
 var html = '<div class="box">';
 
 //各月のテーブルを連結します for(m=1;m<=12;m++){
  html += '<テーブル>';
  html += '<tr class="title"><th colspan="7">' + y + '年' + m+'月</th></tr>';
  html += '<tr><td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td></tr>'
  
  //各月の合計日数を取得します。var max = new Date(y,m,0).getDate();
  
  html += '<tr>'; // <tr> タグの開始 for (d=1;d<=max;d++){
   if(w && d== 1){//月の最初の日が日曜日でない場合は、空白を埋めます html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   if(w == 6 && d != max){//土曜日が月の最終日でない場合は、html += '</tr><tr>' で囲みます。
   }else if(d==max){//月の最終日、</tr> タグを閉じます html += '</tr>';
   }
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>';
 }
 html += '</div>';
 html を返します。
}

効果

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

以下もご興味があるかもしれません:
  • JS を使用して永久カレンダーを作成する方法
  • JS でタブ切り替え機能付きカレンダーを作成する
  • jsを使用してシンプルなカレンダーの完全な例を作成します

<<:  mysql-8.0.19-winx64 のインストール中に問題が発生しました: ディレクトリ 'xxxx\Database\' を作成できません

>>:  Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

推薦する

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

vue cli3は環境ごとにパッケージ化の手順を実装します

cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化...

docker の実行に必要な権限の分析

Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...

Windows7 での Mysql5.7 my.ini ファイルの読み込みパスとデータの場所の変更方法

更新: MySQL の公式 Web サイトにアクセスして MySQL インストーラーをインストールし...

Nginx http を https にアップグレードする手順を完了する

httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

mysql における mydumper と mysqldump の比較

いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

Vue はフォームデータ検証のサンプルコードを実装します

el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...

MySQL テーブルと列のコメントの概要

コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...