有些時候我們翻看別人的博客的時候，會發現有一個日歷面板，可以點擊左右按鈕查看上下個月的日歷，那么這是怎么實現的呢？其實并不難，主要就是用javascript的date()方法。

先看效果圖：

具體代碼：

html

<

/

>

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

css樣式

ul{list-style: none;margin: 0;padding: 0;overflow: hidden;}

ul li{float: left;width: 30px;height: 30px;line-height: 30px;margin: 5px;text-align: center;border-radius: 50%;}

ul .today{background: #FD6639;color: #FFF;}

.day li{font-size: 15px;}

.day li:hover{color: #00F;cursor: pointer;}

.box{width: 280px;border: 1px solid #DDD;}

.xq{background: #E7F1FD;}

.title{background: #7AB2ED;height: 40px;line-height: 40px;}

.title .last{float: left;width: 40px;text-align: center;cursor: pointer;}

.title .next{float: right;width: 40px;text-align: center;cursor: pointer;}

.title .current{text-align: center;width: 200px;float: left;color: #FFF;}

.title .last:hover{color: #FD6639;background: rgba(0,0,0,0.2);}

.title .next:hover{color: #FD6639;background: rgba(0,0,0,0.2);}

javascript

var date = new Date();

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

var month = date.getMonth();//月(0-11)

var currentY = year;

var currentM = month;

var currentD = date.getDate();

showDate(date);

var lastBtn = document.getElementById("showLastMonth");

var nextBtn = document.getElementById("showNextMonth");

lastBtn.onclick = function(){

if(month==0){

year-=1;

month=11;

}else{

month--;

}

showDate(new Date(year,month,1));

}

nextBtn.onclick = function(){

if(month==11){

year+=1;

month=0;

}else{

month++;

}

showDate(new Date(year,month,1));

}

function showDate(obj){

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

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

//var date = obj.getDate();//日

var sDay = new Date(year,month,1).getDay();//本月第一天星期幾

var days = new Date(year,month+1,0).getDate();//本月一共多少天

document.getElementById("showYear").innerHTML = year;

document.getElementById("showMonth").innerHTML = month+1;

var dayObj = document.getElementById("showDay");

var htmlStr = "";

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

htmlStr += "

";

}

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

if(currentY == year && currentM == month && i == currentD){

htmlStr += "

"+i+"";

}else{

htmlStr += "

"+i+"";

}

}

dayObj.innerHTML = htmlStr;

}

有些博客加入了這么一個功能：在有博文的日歷上做了一個標記，表示在當日有博文發表，那么這個我們可以用ajax來實現，再重繪日歷的時候獲取當月有文章的日期，然后加入樣式。

總結

以上是生活随笔為你收集整理的用html制作简单日历,用javascript实现一个简单的日历的全部內容，希望文章能夠幫你解決所遇到的問題。

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