jsでその日の簡単なカレンダー効果を書く【実装コード】_javascriptスキル

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 カレンダー コードを添付します

CSS 部分を自由にいじってみてください。現在の時刻は 2016 年 5 月 2 日です。レンダリングは次のとおりです。

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 &#63; (year % 100 != 0 &#63; 1 : (year % 400 == 0 &#63; 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]) &#63; date = ' ': date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d &#63; document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');  //高亮显示当天
  }
  document.write('</tr>');
  }
  document.write('</table>');
 </script>

上記のその日のシンプルなカレンダー効果を書くjs [実装コード] は、エディターによって共有されたすべての内容です。参考になれば幸いです。また、Script Home をサポートしていただければ幸いです。