その日の簡単なカレンダー効果を記述するjs

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(&#39;<tr>&#39;);
  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(&#39;</tr>&#39;);
  }

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=&#39;0&#39;><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(&#39;<tr>&#39;);
  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 = &#39; &#39;: date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d ? document.write(&#39;<td class="today">&#39; + date + &#39;</td>&#39;) : document.write(&#39;<td>&#39; + date + &#39;</td>&#39;);  //高亮显示当天
  }
  document.write(&#39;</tr>&#39;);
  }
  document.write(&#39;</table>&#39;);
 </script>

css 部分は自由に再生できます。 現在時刻は 2016 年 5 月 2 日です。 レンダリングは次のとおりです。

上記の単純なカレンダー エフェクト [実装コード] js で書かれた日は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、Script House PHP Chinese をサポートしていただければ幸いです

その日の簡単なカレンダー効果の作成に関するその他の JS 関連の記事については、 PHP 中国語 Web サイトにご注意ください。