カレンダー効果を実現する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 のルート アカウントとパスワードを回復する方法
推薦する
モバイル ブラウザのビューポート パラメータ (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...