先看看效果图，效果比较简单：
具体代码：
<html>
<head>
<title>javaScript日历</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.calendar{
width:300px;
margin:100px auto;
text-align:center;
font-size:12px;
}
.calendar .wrap{
width:100%;
height:36px;
line-height:36px;
}
.calendar .wrap .theYear{
}
.calendar .wrap .theMonth{
color:#666;
}
.calendar .wrap span{
font-size:24px;
color: #DDD;
cursor:pointer;
font-family: Georgia, "Times New Roman", Times, serif;
}
.calendar .wrap span b:hover{
color: #777;
}
.calendar .wrap .span{
float:left;
}
.calendar .wrap .prev_year{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .next_year{
float:right;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .prev_month{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_month{
float:right;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_year:hover,.calendar .wrap .prev_year:hover,
.calendar .wrap .next_month:hover,.calendar .wrap .prev_month:hover{
color:#999;
}
.calendar table{
width:100%;
border-collapse:collapse;
}
.calendar .header{
background-color:#EEE;
font-family:"Microsoft YaHei";
}
.calendar .header td{
cursor:default;
}
.calendar td{
border:1px solid #CCC;
line-height:36px;
cursor:pointer;
}
.calendar td:hover{
background-color:#EEE;
}
.calendar .empty{
cursor:default;
}
.calendar .empty:hover{
background-color:#FFF;
}
.calendar .today{
background-color:#66BE8C;
color:#FFF;
}
.calendar .today:hover{
background-color:#66BE8C;
color:#FFF;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.8.2.js">
JavaScript代码
// 判断是否为闰年
function IsLeapYear(year){
if((year%400==0)||(year%4==0 && year%100!=0)){
return true;
}
return false;
}
// 日历
function createCalendar(year,month,date){
var d=new Date();
if(!year || year<=0){
cur_year=d.getFullYear(); // 年份
}else{
cur_year=year;
}
if(!month || month<=0){
cur_mon=d.getMonth(); // 日期
}else{
cur_mon=month-1;
}
if(!date || date<=0){
cur_date=d.getDate(); // 日期
}else{
cur_date=date;
}
month_days=new Array(31,28+IsLeapYear(d.getFullYear()),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
month_firstday_date=new Date(cur_year,cur_mon,1);
monthDays=month_days[cur_mon];
monthFirstday=month_firstday_date.getDay(); // 月份的第一天是星期几
lines=Math.ceil((monthDays+monthFirstday)/7); // 表格所需行数
var calendarBody="";
for(var i=0;i<lines;i++){
calendarBody+="<tr class='line'>";
for(var j=0;j<7;j++){
idx=i*7+j; // 单元格自然序列号
if(i==0 && idx<monthFirstday){
calendarBody+="<td class='empty'></td>";
}else if(idx<monthDays+monthFirstday){
var date=idx+1-monthFirstday;
if(date==cur_date && cur_mon==d.getMonth() && cur_year==d.getFullYear()){
calendarBody+="<td class='today'>"+date+"</td>";
}else{
calendarBody+="<td>"+date+"</td>";
}
}else{
calendarBody+="<td class='empty'></td>";
}
}
calendarBody+="</tr>";
}
return calendarBody;
}
标签：
javascript,日历
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“javascript实现2016新年版日历”评论...