css+htmlでシンプルなカレンダーを実装
この記事では主にhtml、css、javascriptの組み合わせで実装されたシンプルなカレンダーを詳しく紹介していますので、興味のある方は参考にしてみてください
カレンダー表示はWebページなどでよく使われます。 . この記事では、html、css、javascriptを使用してシンプルなカレンダーを実装します。完了後はページ左側の効果と同様に前月と翌月を切り替えることができます。実際の状況に応じて拡張することも可能です。
html
html部分は比較的単純で、pを宣言し、具体的なhtmlはjavascriptで生成されます。全体的な内容はおおよそ次のとおりです:
<!doctype html> <html> <head> <meta charset='utf-8'> <link rel='stylesheet' href='外部的css文件路径' /> <title>demo</title> </head> <body> <p class='calendar' id='calendar'></p> <script type='text/javascript' src='外部的javascript文件路径'></script> </body> </html>
css
/* 整体设置 */
*{margin:0px;padding:0px;}
/**
* 设置日历的大小
*/
.calendar{
width: 240px;
height: 400px;
display: block;
}
/**
* 设置日历顶部盒子
*/
.calendar .calendar-title-box{
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
text-align:center;
border-bottom: 1px solid #ddd;
}
/**
* 设置上个月的按钮图标
*/
.calendar .prev-month {
position: absolute;
top: 12px;
left: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-left: 0px;
border-top: 6px solid transparent;
border-right: 8px solid #999;
border-bottom: 6px solid transparent;
cursor: pointer;
}
/**
* 设置下个月的按钮图标
*/
.calendar .next-month {
position: absolute;
top: 12px;
right: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-right: 0px;
border-top: 6px solid transparent;
border-left: 8px solid #999;
border-bottom: 6px solid transparent;
cursor: pointer;
}
/* 设置日历表格样式 */
.calendar-table{
width: 100%;
border-collapse: collapse;
text-align:center;
}
/* 表格行高 */
.calendar-table tr{
height: 30px;
line-height: 30px;
}
/* 当前天 颜色特殊显示 */
.currentDay {
color: red;
}
/* 本月 文字颜色 */
.currentMonth {
color: #999;
}
/* 其他月颜色 */
.otherMonth{
color: #ede;
}スタイルの設定については基本的に何も言うことはなく、いくつかの簡単な設定のみです。たとえば、「先月」と「来月」を表す特別なアイコンは、CSS の border 属性を使用して絶対的に配置され、スタイルが設定されます。
javascript Date オブジェクト
正式な JS コードを開始する前に、JS の Date オブジェクトを理解する必要があります。Date オブジェクトを通じて、年、月、日、時、分、秒、タイムスタンプなどの情報を取得できます。 .
var d1 = new Date(); // 获取当前系统时间 我现在的时间是 2016年4月25日 星期一 d1.getFullYear(); // 获取年信息， 2016 d1.getMonth(); // 获取月信息（从0开始 范围：0-11） 3 d1.getDate(); // 获取天信息 此处结果：25 d1.getDay(); // 获取星期信息 （0-6） 此处结果： 1
は、年、月、日の情報を直接設定する場合にも初期化できます
# 设置 2016年3月15日 var d2 = new Date(2016, 2, 15); // 月是从0开始计数， 需要减一 d2.getFullYear(); // 2016 d2.getMonth(); // 2 d2.getDate(); // 15 d2.toLocaleDateString(); // "2016/3/15" 证明设置正确
各月の日数などの問題が発生しますが、年、月、日の場合は非常に簡単です。たとえば、4 月が 30 日しかない場合、取得された Date タイプは自動的に 5 月 1 日として計算されます。が 5 月 0 日に設定されている場合、js は 4 月 30 日として処理し、次に 5 月 - 1 番目は 4 月 29 日です
var d3 = new Date(2016, 3, 30); d3.toLocaleDateString(); // "2016/4/30" var d4 = new Date(2016, 3, 31); d4.toLocaleDateString(); // "2016/5/1" var d5 = new Date(2016, 3, 33); d5.toLocaleDateString(); // "2016/5/3" var d6 = new Date(2016, 4, 1); d6.toLocaleDateString(); // "2016/5/1" var d7 = new Date(2016, 4, 0); d7.toLocaleDateString(); // "2016/4/30" var d8 = new Date(2016, 4, -3); d8.toLocaleDateString(); // "2016/4/27"
javascript
js での Date オブジェクトの基本的な使い方を理解したら、次のステップはコードの実装部分です。全体的な考え方は次のとおりです。グローバル dateObj 変数を定義して、表示する必要がある年と月の情報をテーブルに記録します。 タイトルの内容は dateObj から取得され、テーブル内の日付は dateObj から取得されます。年と月に対応する 1 番目の情報がすべて決定され、テーブルの最初の行の 1 番目の位置が決まります。先月を逆算して数日分のデータ、今月と来月のデータをプッシュしています。
具体的な手順:
1. dateObj 変数を宣言し、初期値を現在のシステム時刻に割り当てます
2. カレンダー p に HTML 要素をレンダリングします
3. dateObj を通じて月の 1 日の情報を取得し、これを使用しますテーブル内のすべての日付を走査します
4. 前月と翌月のアイコンにイベントをバインドします
(function(){
/*
* 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
*/
var dateObj = (function(){
var _date = new Date(); // 默认为当前系统时间
return {
getDate : function(){
return _date;
},
setDate : function(date) {
_date = date;
}
};
})();
// 设置calendar p中的html部分
renderHtml();
// 表格中显示日期
showCalendarData();
// 绑定事件
bindEvent();
/**
* 渲染html结构
*/
function renderHtml() {
var calendar = document.getElementById("calendar");
var titleBox = document.createElement("p"); // 标题盒子 设置上一月 下一月 标题
var bodyBox = document.createElement("p"); // 表格区 显示数据
// 设置标题盒子中的html
titleBox.className = 'calendar-title-box';
titleBox.innerHTML = "<span class='prev-month' id='prevMonth'></span>" +
"<span class='calendar-title' id='calendarTitle'></span>" +
"<span id='nextMonth' class='next-month'></span>";
calendar.appendChild(titleBox); // 添加到calendar p中
// 设置表格区的html结构
bodyBox.className = 'calendar-body-box';
var _headHtml = "<tr>" +
"<th>日</th>" +
"<th>一</th>" +
"<th>二</th>" +
"<th>三</th>" +
"<th>四</th>" +
"<th>五</th>" +
"<th>六</th>" +
"</tr>";
var _bodyHtml = "";
// 一个月最多31天，所以一个月最多占6行表格
for(var i = 0; i < 6; i++) {
_bodyHtml += "<tr>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"</tr>";
}
bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
_headHtml + _bodyHtml +
"</table>";
// 添加到calendar p中
calendar.appendChild(bodyBox);
}
/**
* 表格中显示数据，并设置类名
*/
function showCalendarData() {
var _year = dateObj.getDate().getFullYear();
var _month = dateObj.getDate().getMonth() + 1;
var _dateStr = getDateStr(dateObj.getDate());
// 设置顶部标题栏中的 年、月信息
var calendarTitle = document.getElementById("calendarTitle");
var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
calendarTitle.innerText = titleStr;
// 设置表格中的日期数据
var _table = document.getElementById("calendarTable");
var _tds = _table.getElementsByTagName("td");
var _firstDay = new Date(_year, _month - 1, 1); // 当前月第一天
for(var i = 0; i < _tds.length; i++) {
var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
var _thisDayStr = getDateStr(_thisDay);
_tds[i].innerText = _thisDay.getDate();
//_tds[i].data = _thisDayStr;
_tds[i].setAttribute('data', _thisDayStr);
if(_thisDayStr == getDateStr(new Date())) { // 当前天
_tds[i].className = 'currentDay';
}else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
_tds[i].className = 'currentMonth'; // 当前月
}else { // 其他月
_tds[i].className = 'otherMonth';
}
}
}
/**
* 绑定上个月下个月事件
*/
function bindEvent() {
var prevMonth = document.getElementById("prevMonth");
var nextMonth = document.getElementById("nextMonth");
addEvent(prevMonth, 'click', toPrevMonth);
addEvent(nextMonth, 'click', toNextMonth);
}
/**
* 绑定事件
*/
function addEvent(dom, eType, func) {
if(dom.addEventListener) { // DOM 2.0
dom.addEventListener(eType, function(e){
func(e);
});
} else if(dom.attachEvent){ // IE5+
dom.attachEvent('on' + eType, function(e){
func(e);
});
} else { // DOM 0
dom['on' + eType] = function(e) {
func(e);
}
}
}
/**
* 点击上个月图标触发
*/
function toPrevMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showCalendarData();
}
/**
* 点击下个月图标触发
*/
function toNextMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showCalendarData();
}
/**
* 日期转化为字符串， 4位年+2位月+2位日
*/
function getDateStr(date) {
var _year = date.getFullYear();
var _month = date.getMonth() + 1; // 月从0开始计数
var _d = date.getDate();
_month = (_month > 9) ? ("" + _month) : ("0" + _month);
_d = (_d > 9) ? ("" + _d) : ("0" + _d);
return _year + _month + _d;
}
})();この例では、テーブル内の日付がクリックされたときのイベントは追加されません。bindEvent に次のコードを追加できます。クリックされた日付の情報を取得する関数
var table = document.getElementById("calendarTable");
var tds = table.getElementsByTagName('td');
for(var i = 0; i < tds.length; i++) {
addEvent(tds[i], 'click', function(e){
console.log(e.target.getAttribute('data'));
});
}関連推奨事項:
javascript html5キャンバスはドラッグ可能な中国の省地図を実装します
以上がcss+htmlでシンプルなカレンダーを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
win11の二画面カレンダーがセカンドモニターに存在しない場合はどうすればよいですか?
Jun 12, 2024 pm 05:47 PM
Windows 11 で毎日の仕事やルーチンを整理するための重要なツールは、タスク バーの時刻と日付の表示です。この機能は通常、画面の右下隅にあり、時刻と日付に即座にアクセスできます。この領域をクリックするとカレンダーが表示され、別のアプリを開かなくても今後の予定や日付を簡単に確認できます。ただし、複数のモニターを使用している場合は、この機能で問題が発生する可能性があります。具体的には、接続されているすべてのモニターのタスクバーに時計と日付が表示されますが、2 番目のモニターで日付と時刻をクリックしてカレンダーを表示する機能は利用できません。現時点では、この機能はメイン ディスプレイでのみ機能します。Windows 10 とは異なり、任意のディスプレイをクリックすると機能します。
Win10のカレンダーには週番号が表示される
Jan 04, 2024 am 08:41 AM
多くのユーザーは、Win10 カレンダー ツールを使用して現在の日数を確認したいと考えていますが、カレンダーにはこの機能が自動的に表示されません。実際には、簡単な設定を行うだけで、今年の累積週数が表示されます ~ Win10 カレンダー表示週 デジタル設定チュートリアル: 1. デスクトップの左下隅にある検索にカレンダーと入力し、アプリケーションを開きます。 2. 開いたカレンダー アプリケーションで、左下隅の「歯車」アイコンをクリックすると、右側に設定がポップアップ表示されます。「カレンダー設定」をクリックします。 3. 開いたカレンダー設定で続行し、「週番号」を見つけます。そして週を変更します。数値オプションを「年の最初の日」に調整するだけです。 4. 上記の設定が完了したら、「週」をクリックすると、今年の週番号の統計が表示されます。
Outlook カレンダーが同期していません。
Mar 26, 2024 am 09:36 AM
Outlook カレンダーが Google カレンダー、Teams、iPhone、Android、Zoom、Office アカウントなどと同期できない場合は、次の手順に従って問題を解決してください。カレンダー アプリは、Google カレンダー、iPhone、Android、Microsoft Office 365 などの他のカレンダー サービスと接続でき、自動的に同期できるので非常に便利です。しかし、OutlookCalendar がサードパーティの予定表と同期できない場合はどうすればよいでしょうか? 考えられる理由としては、同期に間違った予定表を選択した、予定表が表示されない、バックグラウンド アプリケーションの干渉、古い Outlook アプリケーションまたは予定表アプリケーションなどが考えられます。 Outlook カレンダーが同期しない場合の暫定的な修正
win10で右下のカレンダーが開けません
Dec 26, 2023 pm 05:07 PM
win0 システムを使用している友人の中には、win10 カレンダーが開けないという状況に遭遇した人もいます。これは単なるコンピュータの通常の不具合です。win10 システムのプライバシー設定で解決できます。今日、編集者が詳細な解決策を提供しました。以下、見てみましょう。 win10の右下でカレンダーが開けない問題の解決策 1. win10システムで「スタート」をクリック → 上のプログラムリストボタンをクリック → ピンイン(中国語) Rを検索 → カレンダー 2. 初めて使用する場合, 新しいイベントが開かない場合があります (マウスを傾けると紺色が選択されなくなります), プライバシーに設定できます。デスクトップの左上隅にある 3 本のバーのアイコンをクリックすると、下部に設定メニューが表示されます; 3. ポップアップ インターフェイスで [プライバシー] をクリックします; 4. 以前に設定を使用したことがある場合は、左
Win10 でカレンダー イベントのポップアップ リマインダーが表示されない場合はどうすればよいですか? Win10 でカレンダー イベントのリマインダーが表示されなくなった場合はどうすればよいですか?
Jun 09, 2024 pm 02:52 PM
カレンダーは、ユーザーがスケジュールを記録したり、リマインダーを設定したりするのに役立ちますが、多くのユーザーは、Windows 10 でカレンダー イベントのリマインダーが表示されない場合はどうすればよいかを尋ねています。ユーザーはまず Windows の更新ステータスを確認するか、Windows App Store のキャッシュをクリアして操作を実行できます。このサイトでは、Win10 カレンダーのイベントリマインダーが表示されない問題の分析をユーザーに丁寧に紹介します。カレンダーイベントを追加するには、システムメニューの「カレンダー」プログラムをクリックします。カレンダー内の日付をマウスの左ボタンでクリックします。編集画面でイベント名とリマインダー時刻を入力し、「保存」ボタンをクリックするとイベントが追加されます。 Win10のカレンダーイベントリマインダーが表示されない問題を解決する
生理不順のない購入局：カレンダーと誕生日シリーズの周辺機器が新登場！
Feb 29, 2024 pm 12:00 PM
「失われた購買オフィスは 2 月 28 日午前 11 時に更新されることが確認されています。プレイヤーは淘宝網にアクセスして購買オフィスを検索し、購入するストア カテゴリを選択できます。今回は MBCC 誕生日パーティー シリーズと 2024 卓上カレンダー周辺機器をお届けします。」ぜひ、今回は商品詳細をご覧ください。生理不順のない購入局：カレンダーと誕生日シリーズの周辺機器が新登場！遺失物調達室に新たな出来事が！ - 先行販売時間: 2024年2月28日 11:00 - 2024年3月13日 23:59 購入アドレス: 淘宝網検索[予期せぬ紛失購入局] [ストア]カテゴリを選択して購入ストアに入り、周辺機器の紹介: 新しい周辺機器今回発売されるのはMBCCバースデーパーティーシリーズと2024年卓上カレンダー周辺機器です 詳細は長い画像をクリックしてください。購買オフィスが新しい周辺機器を導入 - MBCC の学生
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
win11の時間が常に不正確である問題を解決するにはどうすればよいですか? Win11 時間調整チュートリアルは、不正確な時間の問題をすぐに解決します
Apr 19, 2024 am 09:31 AM
Windows 11 コンピューターで間違った時間が表示されると、多くの問題が発生し、インターネットに接続できなくなる可能性があります。実際、システムが間違った日付と時刻を表示すると、一部のアプリケーションを開いたり実行したりすることを拒否します。では、この問題をどうやって解決すればいいのでしょうか？以下を見てみましょう！方法 1: 1. まず、下のタスク バーの空白スペースを右クリックし、[タスク バーの設定] を選択します。 2. タスク バーの設定で右側にある taskbarcorneroverflow3 を見つけて、その上にある時計または時計を見つけて、オンにすることを選択します。方法 2: 1. キーボード ショートカット win+r を押して「ファイル名を指定して実行」を呼び出し、「regedit」と入力して Enter キーを押して確認します。 2. レジストリ エディタを開き、その中で HKEY を見つけます。
