カレンダー効果を実現する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 のルート アカウントとパスワードを回復する方法
推薦する
vue+tp5はシンプルなログイン機能を実現
この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...
JSONオブジェクトのキーを置き換える最良の方法
JSON (JavaScript Object Notation、JS Object Notatio...
タブ切り替えを実装するための HTML サンプル コード
タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...
HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 2)
上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...
MySQL 8.0はJSONを扱えるようになりました
目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文：長い...
MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則
mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...
VMware ESXi サーバー仮想化クラスター
目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...
Linuxシステムのログの詳細な紹介
目次1. ログ関連サービス2. システム内の共通ログファイル1. ログ関連サービスCentOS 6....
MySQL 5.6 での table_open_cache パラメータの最適化と適切な構成の詳細な説明
1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...
CSSフィルターにはどんな魔法の用途があるか
背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...
MySQL接続クエリの原理と応用
概要MySQL の最も強力な機能の 1 つは、データ取得を実行しながらテーブルを結合できることです。...
WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明
WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...
Vue フロントエンドで PDF を生成してダウンロードする方法
目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...
Dockerで複数のSpringbootを実行するための詳細なチュートリアル
Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...
jQuery ステップ進行軸プラグインの実装コード
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...