工作的时候写了日历代码凑合用,如果有更好的办法欢迎建议_如果大家有更好的方法或是补充建议等欢迎-CSDN博客

本文链接：https://blog.csdn.net/w1158384189/article/details/50209215

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css" rel="stylesheet">
/*我的课表 start*/
ul li{
list-style:none;
}
a{
text-decoration:none;
}
.daycourse{
width:1098px;
height:465px;
background:#fff;
border-bottom:1px solid rgb(230,230,230);
border-left:1px solid rgb(230,230,230);
border-right:1px solid rgb(230,230,230);
/*display:none;*/
}
.daycoursetop{
width:1098px;
height:43px;
border-bottom:1px solid rgb(230,230,230);
line-height:43px;
}
.dirmonyear{
display:inline-block;
width:280px;
height:43px;
line-height:43px;
vertical-align:top;
border-right:1px solid rgb(230,230,230);
}
.dirmonyear a{
width:56px;
height:43px;
display:inline-block;
font-size: 20px;
text-align:center;
}
.dirmonyear input{
width:164px;
height:41px;
vertical-align: baseline;
font-size: 20px;
text-align:center;
border:none;
border-left:1px solid rgb(230,230,230);
border-right:1px solid rgb(230,230,230);
}
.weeks{
display:inline-block;
width:817px;
height:43px;
line-height:43px;
font-size: 20px
}
.weeks a{
display:inline-block;
width:100px;
height:43px;
text-align:center;
margin:0px 8px;
}
.daycoursecenter{
width:1098px;
height:365px;
}
.dayweek{
float:left;
width:280px;
height:365px;
border-bottom:1px solid rgb(230,230,230);
border-right:1px solid rgb(230,230,230);
}
.dayweek span.weekday{
display:inline-block;
width:280px;
height:95px;
background:rgb(248,248,248);
border-bottom:1px solid rgb(230,230,230);
text-align:center;
line-height:95px;
}
.dayweek span.weekday b{
font-size:50px;
}
.dayweek ul.weekdaylist{
width:278px;
height:208px;
border:1px solid #fff;
}
.dayweek ul.weekdaylist li{
width:278px;
height:44px;
overflow:auto;
margin: 2px 0px;
}
.dayweek ul.weekdaylist li i{
display:inline-block;
width:15px;
height:15px;
margin: 4px 6px 4px 6px;
vertical-align: bottom;
}
.dayweek ul.weekdaylist li p{
display:inline-block;
font-size:15px;
}
.dayweek ul.weekdaylist li span{
display:block;
font-size:12px;
text-indent:24px;
}

.everyday{
float:right;
width:850px;
height:365px;

border-bottom:1px solid rgb(230,230,230);
}
.everyday ul.everydaylist{
width:100%;
height:100%;
}
.everyday ul.everydaylist li{
width: 116px;
height:60px;
background:rgb(248,248,248);
border-bottom:1px solid rgb(230,230,230);
float:left;
text-align:center;

}
.everyday ul.everydaylist li a{
display: inline-block;
width: 80px;
height: 45px;
font-size: 22px;
line-height: 20px;
padding-top: 15px;
}
.everyday ul.everydaylist li a p {
display: inline-block;
width: 80px;
height: 10px;
line-height: 10px;
}
.everyday ul.everydaylist li a p i{
display:inline-block;
width:8px;
height:8px;
margin: 2px;
}

.everydayredcolor{
color:rgb(255,102,102);
}

.everyday ul.everydaylist li a:hover{
background:rgb(255,102,102);
color:#fff;
}

.daycoursebottom{
width:1098px;
height:57px;
line-height:57px;
text-align:right;
}
.daycoursebottom span{
display:inline-block;
margin:0px 18px;
font-size:15px;
}

.daycoursebottom span i{
display:inline-block;
width:15px;
height:15px;
margin: 4px 6px 4px 6px;
vertical-align: middle;
}
/*我的课表 end*/
</style>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="daycourse">
<div class="daycoursetop">

<a class="myl" href="javascript:void(0);">＜</a><input type="text" id="monthhyear" readonly="readonly" value=""><a class="myr" href="javascript:void(0);">＞</a>
<a href="javascript:void(0);">周一</a><a href="javascript:void(0);">周二</a><a href="javascript:void(0);">周三</a><a href="javascript:void(0);">周四</a><a href="javascript:void(0);">周五</a><a href="javascript:void(0);">周六</a><a href="javascript:void(0);">周日</a>
</div>
<div class="daycoursecenter">

<div class="everyday">
<ul class="everydaylist">

<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>

</ul>
</div>
</div>

</div>
<script type="text/javascript">
var currdate = new Date();
var year = currdate.getFullYear();// console.log(year);//年
var month = currdate.getMonth();//console.log(month);//月
var dates = currdate.getDate();
//dates=dates<10?dates="0"+dates:dates;console.log(dates);//日
var days = currdate.getDay(); //console.log(days);//星期
var dayNames = new Array("周一","周二","周三","周四","周五","周六","周日");//console.log(dayNames[funcdays(days)]);
monthplay(year,month);
$(".dirmonyear input").val(year+"年"+(month+1)+"月");
$(".dayweek span.weekday b").append(dates);
$(".dayweek span.weekday").append(dayNames[funcdays(days)]);
$(".dirmonyear a.myl").click(function(){

month--;
if(month==-1){ month=11;year-=1;}
//console.log("month="+month);
$("ul.everydaylist li").children("a").find("b").text("");
monthplay(year,month);

})
$(".dirmonyear a.myr").click(function(){
month++;
if(month==12){ month=0;year+=1;}
$("ul.everydaylist li").children("a").find("b").text("");
monthplay(year,month);
})
function monthplay(year,month){
//console.log(year,month);
var nowday = new Date(year,month); // console.log("nowday="+nowday);
var nowdaydays = nowday.getDay(); //周几//console.log("nowdaydays="+nowdaydays);
var renowdays = funcdays(nowdaydays); //返回值// console.log("renowdays="+renowdays);
var fundays = dayNames[renowdays]; //某天的周几 //console.log("fundays="+fundays);
var monthdays =monthDay(year,month+1); //这个月多少天
var curr = new Date();
var currmonth = curr.getMonth();//console.log(currmonth);//当前月
var currdates = curr.getDate();//当前日
$("#monthhyear").val(year+"年"+(month+1)+"月");
premonth(renowdays,month);
nextmonth(monthdays+renowdays,month);
for(var i=0,j=1;i<monthdays;i++,j++,renowdays++){
$("ul.everydaylist li").eq(renowdays).children("a").find("b").prepend(j=j<10?j="0"+j:j);
if((currmonth==month)&&(currdates==j)){
console.log(currmonth,month,currdates,j);
$("ul.everydaylist li").eq(renowdays).children("a").addClass("everydayredcolor");
}else{
$("ul.everydaylist li").eq(renowdays).children("a").removeClass("everydayredcolor");
}
}
}
//上个月多少天
function premonth(renowdays,month){
month--;
if(month==-1){ month=11; }
//console.log("month="+month);
var premonthdays =monthDay(year,month+1);//上个月天数
//console.log("premonthdays="+premonthdays);
for(var i=renowdays-1,j=premonthdays;i>=0;i--,j--){
$("ul.everydaylist li").eq(i).children("a").find("b").prepend(j=j<10?j="0"+j:j);//放入上个月的天数
}
}
//下个月多少天
function nextmonth(remonlen,month){
month++;
month%=12;
var ullen = $("ul.everydaylist li").length;//获取 li长度
for(var i=remonlen,j=1;i<ullen;i++,j++){
$("ul.everydaylist li").eq(i).children("a").find("b").prepend(j=j<10?j="0"+j:j);//放入下个月的天数
}
}

//返回数组下标 ---》星期几
function funcdays(funcday){
switch(funcday){
case 0:return 6;
case 1:return 0;
case 2:return 1;
case 3:return 2;
case 4:return 3;
case 5:return 4;
case 6:return 5;
}
}
// 判断一年中每个月的天数
// console.log(monthDay(year,month+1));
function monthDay(year,month){
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
break;
case 2:
if(year%4==0&&year%100!=0||year%400==0){
return 29;
}else{
return 28;
}
break;
default:
return 30;
}
}
</script>
</body>
</html>