JavaScriptを使ってカレンダーを書きたいとずっと思っていましたが、良いアイデアが全く思い浮かばず、まだ試していません。最近、JavaScript で書かれた簡単なカレンダーの例をインターネットで見かけました。コード量はそれほど多くありませんが、js カレンダーの実装原理をよく説明していると思います。私も実際に試してみて、基本的な実装原理をマスターした後は、さらに機能を追加したい場合に自由に使用できます。興味があれば、まず試してみてください。
1. テーブルの行数の問題
日付テーブルを表示したいので、まず日曜日（最初の列）からテーブルの行数と列数が決定されている必要があります。カレンダー上は日曜日）から土曜日まで、合計7つのリストです。行番号の問題を解決する前に、まず今月の最初の日が何曜日であるかを知る必要があります。各月の最初の日は、カレンダー上では必ずしも日曜日から始まるわけではありません。最初の日は金曜日または土曜日である可能性があります。不確かなので、No. 1 の左側の部分を空のフォームに置き換える必要があります。では、空のテーブルをいくつ使用すればよいでしょうか? ここでは getDay() メソッドを使用する必要があります。このメソッドは、配列 [0-6] で数値を返します。つまり、0 は日曜日、1 は月曜日、2 は火曜日を表します。の上。 。したがって、月の 1 日が金曜日の場合、左側に 5 つの空のテーブルが必要になります。次に、月が 31 日ある場合、テーブルの最終行数は次のようになります:
var tr_nums = Math.ceil((5 + 31)/7); もちろん、すべての月に 31 日があるわけではありません。 12 か月を含む配列を作成するには、各要素が各月の日数を表します。しかし、2月は特別で、閏年の2月は29日ありますが、通常の2月は28日しかありません。したがって、配列を作成する前に、閏年を決定する関数を作成する必要があります:
//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}次に、月の配列を作成します:
var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
こうすることで、正しい日数が取り出されるようにすることができます。通常の年であっても閏年であっても、次のコードは今日の関連情報を取得するために:
var today = new Date(), //获取当前日期 y = today.getFullYear(), //获取日期中的年份 m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1) d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天) firstday = new Date(y, m, 1), //获取当月的第一天 dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
を使用します。したがって、最終的にその月に必要なテーブルの行数を取得できます:
var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
2.カレンダーテーブルを印刷します
テーブル自体は 2 次元配列なので、for マスターを出させます。 2 つのループを実行するだけで完了です。 コードは次のとおりです:
for (i = 0; i < str_nums; i += 1) { //第一层for循环创建tr标签
document.write('<tr>');
for (k = 0; k < 7; k++) { //第二层for循环创建td标签
var idx = 7 * i + k; //为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
//do something else
}
document.write('</tr>');
}3. 完成したものを添付します。 js カレンダー コード
<script>
//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
var i, k,
today = new Date(), //获取当前日期
y = today.getFullYear(), //获取日期中的年份
m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)
firstday = new Date(y, m, 1), //获取当月的第一天
dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
document.write("<table cellspacing='0'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
for (i = 0; i < str_nums; i += 1) { //二维数组创建日期表格
document.write('<tr>');
for (k = 0; k < 7; k++) {
var idx = 7 * i + k; //为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天
}
document.write('</tr>');
}
document.write('</table>');
</script>
css 部分は自由に再生できます。 現在時刻は 2016 年 5 月 2 日です。 レンダリングは次のとおりです。
上記の単純なカレンダー エフェクト [実装コード] js で書かれた日は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、Script House PHP Chinese をサポートしていただければ幸いです
その日の簡単なカレンダー効果の作成に関するその他の JS 関連の記事については、 PHP 中国語 Web サイトにご注意ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
