溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網上看了幾篇關于生成日歷的js 教程于是自己也整理了一個想法思路 大家有什么建議歡迎提出
首先這個項目里面本人認為的幾個難點：
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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
