カレンダー効果を実現する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 のルート アカウントとパスワードを回復する方法
推薦する
JavaScript 高度なカスタム例外
目次1. コンセプト1.1 エラーと例外とは何ですか? 1.2 異常の分類2. 例外処理2.1try...
クラウド サーバーを使用して CentOS システムに .NET 6.0 をインストールする
.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...
Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法
<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...
Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する
MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...
背景画像にテキストを表示するためのCSS
効果： <div class="imgs"> <!-- 背景画...
NexusはHTTPSプロトコルをサポートするためにnginxプロキシを使用します
背景すべての会社の Web サイトは HTTPS プロトコルをサポートする必要があります。Aliba...
JavaScript で円形カルーセルを実装する
この記事では、円形カルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...
MySQL マスタースレーブ遅延問題の解決方法
今日は、マスタースレーブ遅延が発生する理由とその対処方法について説明します。しっかり座って出発の準備...
Ubuntu 20.04 では、隠し録音ノイズ低減機能が有効になります (推奨)
最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...
HTML 選択タグにリンクを追加する 3 つの方法
最初のもの：コードをコピーコードは次のとおりです。 <html> <ヘッド>...
MySQL 数値型オーバーフローの処理方法
さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...
VueのkeepAliveコンポーネントの機能と使い方の詳細な説明
序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...
Apache クロスドメイン リソース アクセス エラーの解決策
多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...
MySQL を使用した分散ロックの実装
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
Vue プロジェクトのパッケージ化、マージ、圧縮により、Web ページの応答速度を最適化します。
目次序文1. リクエスト内容が大きすぎる解決： CDN の紹介リクエストリソースを圧縮する1. HT...