javascript实现2016新年版日历

网络编程 2024/11/19 佚名

3 2 1

先看看效果图，效果比较简单：

具体代码：

<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,日历

标签：

javascript,日历

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“javascript实现2016新年版日历”

javascript实现2016新年版日历

暂无“javascript实现2016新年版日历”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

javascript实现2016新年版日历

javascript,日历

Bootstrap树形组件jqTree的简单封装

基于javascript实现图片左右切换效果

评论“javascript实现2016新年版日历”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接