カレンダー効果を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql-8.0.19-winx64 のインストール中に問題が発生しました: ディレクトリ 'xxxx\Database\' を作成できません
>>: Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法
推薦する
HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール
RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...
nginx を使用してブルーグリーン デプロイメントをシミュレートする方法
この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...
Linux カーネルの copy_{to, from}_user() に関する考察
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
Dockerfileの指示と基本構造の説明
Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...
MySQLでルートユーザーのパスワードを変更する方法
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
JavaScript ES6 分割演算子の理解と応用
目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...
dl、dt、dd はいつ使用するのが適切ですか?
dl：定義一覧定義リストdt：定義タイトルタイトルを定義するdd：定義説明定義の説明dt は情報のタ...
Jenkins でユーザー ロールの権限を設定する方法
Jenkinsのユーザーロール権限の設定には、ロール戦略プラグインのインストールが必要です。 1.ロ...
Vueフィルターの使い方
目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1（ロー...
CSS+JS で水滴の波紋アニメーション ボタン効果を実装するサンプル コード
コードは次のようになります。 <!DOCTYPE html> <html lang...
Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する
Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...
Docker での WSL の構成と変更の問題について
https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...
Vue はシームレスなカルーセル効果を実現
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを参考までに紹介します...
Linux lsof コマンドの使用方法の詳細な説明
lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...