溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關js+html如何制作簡單日歷，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
新手一枚，不會寫什么高大上的博文，一些平時做的小練習，獻丑
代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
* {margin: 0;padding: 0}
#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
#calendar h5 {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;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(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("<li></li>");
}
//日期插入到dateList
for(var i = 1; i <= allDay; i++) {
$(".dateList").append("<li>" + i + "</li>")
}
//標記顏色=====================
$(".dateList li").each(function(i, elm){
//console.log(index,elm);
var val = $(this).text();
//console.log(val);
if (n==0) {
if(val<today){
$(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 h5").text(year + "年" + (month + 1) + "月");
};
run(0);
$(".a1").click(function(){
iNow--;
run(iNow);
});
$(".a2").click(function(){
iNow++;
run(iNow);
})
});
</script>
</head>
<body>
<div id="calendar">
<h5>2013年10月</h5>
<a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
<a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList"></ul>
</div>
</body>
</html>關于“js+html如何制作簡單日歷”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
