純jsはwindowsシステムのカレンダーをまねます。
ネットで何編かのカレンダー作成に関するjs教程を見ました。自分も一つの考えを整理しました。みなさん、何かアドバイスがありますか？
まずこのプロジェクトの中で自分が思っているいくつかの困難点：
1、毎月の最初の日の位置はどう定義しますか？
毎月の初日は決まった曜日ではないので、初日の出力は対応の曜日に頭を使う必要があります。
2、毎月の最後の日は行数が足りなくて出力できない場合がありますが、どうすればいいですか？
以下に答えがあります。
考え方:
1、毎月の日付の日数を定義する
2、現在のシステム日付初期化データを取得する
3、カレンダーを出力する
2.1、現在の月の最初の日を取得するのは何曜日ですか？（この点はカレンダーのレイアウトと重要です！）
2.2、現在の月の取得日数
2.3、現在の月を取得して何週間がありますか？つまり何行を出力したいですか？ここで予約します。
2.4、現在の年と月を取得して表示する
以下は完全なコードです。
まずこのプロジェクトの中で自分が思っているいくつかの困難点：
1、毎月の最初の日の位置はどう定義しますか？
毎月の初日は決まった曜日ではないので、初日の出力は対応の曜日に頭を使う必要があります。
2、毎月の最後の日は行数が足りなくて出力できない場合がありますが、どうすればいいですか？
以下に答えがあります。
考え方:
1、毎月の日付の日数を定義する
2、現在のシステム日付初期化データを取得する
3、カレンダーを出力する
2.1、現在の月の最初の日を取得するのは何曜日ですか？（この点はカレンダーのレイアウトと重要です！）
2.2、現在の月の取得日数
2.3、現在の月を取得して何週間がありますか？つまり何行を出力したいですか？ここで予約します。
2.4、現在の年と月を取得して表示する
以下は完全なコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js </title>
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
font-family: " ";
}
a{
text-decoration: none;
color: #000;
}
li{
list-style-type: none;
}
.calendar_wrap{
width: 350px;
margin: 0 auto;
padding: 0;
border: 1px solid #000;
}
.calendar_list{
width: 100%;
margin-top: 10px;
}
.calendar_list tr{
width: 100%;
}
.calendar_list tr td{
text-align: center;
height: 45px;
}
.control_bar{
word-spacing: -6px;
}
.control_bar span,.control_bar b{
display: inline-block;
text-align: center;
word-spacing: 0px;
}
.left-bt,.right-bt{
width: 50px;
}
#reduce_bt,#add_bt{
width: 50%;
height: 25px;
border-radius: 50%;
}
#reduce_bt:focus{
outline: none;
}
#add_bt:focus{
outline: none;
}
#current_date{
width: 250px;
}
#resetBt{
display: block;
text-align: center;
color: #fff;
cursor: pointer;
width: 120px;
line-height: 40px;
background-color: #FF7F27;
margin: 0 auto;
}
#date_list tr td:hover{
background-color: #ccc;
cursor: default;
}
</style>
</head>
<body>
<div class="calendar_wrap">
<div class="control_bar">
<span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
<b id="current_date">2017-02</b>
<span class="right-bt"><input type="button" id="add_bt" value=">"></span>
</div>
<table class="calendar_list" cellspacing="0">
<thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody id="date_list"></tbody>
</table>
</div>
<span id="resetBt"> </span>
<script type="text/javascript">
var dateScreen = document.getElementById('current_date');// div
var reduceBt = document.getElementById('reduce_bt');//
var addBt = document.getElementById('add_bt');//
var dateList = document.getElementById('date_list');//
var resetBt = document.getElementById('resetBt');//
// js
var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
var add_date = 1;//
//
//
var now_date = new Date();
var nowFullYear = now_date.getFullYear();
var nowMonth = now_date.getMonth();
//
printCalendar();
//-----------------------------------
//
reduceBt.onclick = function(){
nowMonth = nowMonth - 1;
if (nowMonth == -1) {
nowFullYear = nowFullYear - 1;
nowMonth = 11;
}
clearRows();
printCalendar();
}
//
addBt.onclick = function(){
nowMonth+= 1;
if (nowMonth == 12) {
nowFullYear+= 1;
nowMonth = 0;
}
clearRows();
printCalendar();
}
//
resetBt.onclick = function(){
var resetDate = new Date();
nowFullYear = resetDate.getFullYear();
nowMonth = resetDate.getMonth();
clearRows();
printCalendar();
}
function printCalendar(){
var printDate = new cur_date(nowFullYear,nowMonth);// cur_date
var printFirstDay = printDate.firstDay;//
var printTotalDate = printDate.totalDate;//
var printMonth = printDate.cur_month;//
(printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
//
var printYear = printDate.cur_year;//
var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;
//
// 7 5
// 6 1
//
//
dateScreen.innerText = printYear + "-" + printMonth;
//
for (var i = 0; i < totalRows; i++) {
dateList.insertRow(i);
for (var j = 0; j < 7; j++) {
//
if (add_date > printTotalDate) {
break;
}
dateList.rows[i].insertCell(j);
//
if (j == 0) {
dateList.rows[i].cells[j].style.color = "red";
dateList.rows[i].cells[j].style.fontWeight = "bold";
}else if(j == 6){
dateList.rows[i].cells[j].style.color = "green";
dateList.rows[i].cells[j].style.fontWeight = "bold";
}
if (i == 0 && j >= printFirstDay) {
//
dateList.rows[i].cells[j].innerText = add_date;
add_date++;
}else if(i > 0){
//
dateList.rows[i].cells[j].innerText = add_date;
add_date++;
}
}
}
add_date = 1;// 1
}
// 、 、 、
function cur_date(curYear,curMonth){
this.cur_firstDate = new Date(curYear,curMonth,1);//
this.cur_year = curYear;//
this.cur_month = curMonth;//
this.totalDate = is_leapYear(curYear,curMonth);//
this.firstDay = this.cur_firstDate.getDay()//
}
//
function is_leapYear(target_year,target_month){
if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
// 2
return 29;
}else{
//
return overall_date[target_month];
}
}
function clearRows(){
var rowsNum = dateList.rows.length;
while(rowsNum > 0){
dateList.deleteRow(rowsNum - 1);
rowsNum--;
}
}
</script>
</body>
</html>