新手一枚，不會寫什么高大上的博文，一些平時做的小練習，獻丑

代碼：

無標題文檔

* {margin: 0;padding: 0}

#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}

#calendar h4 {text-align: center;margin-bottom: 10px}

#calendar .a1 {position: absolute;top: 20px;left: 20px;}

#calendar .a2 {position: absolute;top: 20px;right: 20px;}

#calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}

#calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}

#calendar .dateList {overflow: hidden;clear: both}

#calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}

#calendar .dateList .ccc {color: #ccc;}

#calendar .dateList .red {background: #F90;color: #fff;}

#calendar .dateList .sun {color: #f00;}

$(function() {

//必要的數據

//今天的年 月 日 ；本月的總天數；本月第一天是周幾？？？

var iNow=0;

function run(n) {

var oDate = new Date(); //定義時間

oDate.setMonth(oDate.getMonth()+n);//設置月份

var year = oDate.getFullYear(); //年

var month = oDate.getMonth(); //月

var today = oDate.getDate(); //日

//計算本月有多少天

var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

//判斷閏年

if(month == 1) {

if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {

allDay = 29;

}

}

//判斷本月第一天是星期幾

oDate.setDate(1); //時間調整到本月第一天

var week = oDate.getDay(); //讀取本月第一天是星期幾

//console.log(week);

$(".dateList").empty();//每次清空

//插入空白

for(var i = 0; i < week; i++) {

$(".dateList").append("

");

}

//日期插入到dateList

for(var i = 1; i <= allDay; i++) {

$(".dateList").append("

" + i + "")

}

//標記顏色=====================

$(".dateList li").each(function(i, elm){

//console.log(index,elm);

var val = $(this).text();

//console.log(val);

if (n==0) {

if(val

$(this).addClass('ccc')

}else if(val==today){

$(this).addClass('red')

}else if(i%7==0 || i%7==6 ){

$(this).addClass('sun')

}

}else if(n<0){

$(this).addClass('ccc')

}else if(i%7==0 || i%7==6 ){

$(this).addClass('sun')

}

});

//定義標題日期

$("#calendar h4").text(year + "年" + (month + 1) + "月");

};

run(0);

$(".a1").click(function(){

iNow--;

run(iNow);

});

$(".a2").click(function(){

iNow++;

run(iNow);

})

});

2013年10月

上月

下月

• 日
• 一
• 二
• 三
• 四
• 五
• 六

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的如何制作简单的日历html5,js+html制作简单日历的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。