关注前端 | 前端博客
当前位置: JavaScript > 原生js仿博客园日历

原生js仿博客园日历

2018-07-25 分类:JavaScript 作者:管理员 阅读(847)

仿博客园日历 - 先上一张效果图

仿博客园日历

* 该日历用table布局
* 实现了上一月和下一月的点击渲染效果
* 实现了当前日期的高亮
* 实现了显示月份所有日期高亮
*兼容IOS和Android

* 用到了日期格式化方法dateFormat()
* 跟据日期获取星期方法getWeek()
* 获取加减月数后的日期方法getBeAfDateByMonth()
* 根据日期获取日期所在月的总共天数getMaxDayOfDate()

* 难点:
* 本月日期
* 上一月日期
* 下一月日期

全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仿博客园日历</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
</head>
<style>
  body,h4{
    margin: 0;
    padding: 0;
  }
  body{
    position: relative;
  }
  html,body{
    height: 100%;
  }
  #wrap{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
  }
  #wrap h4{
    padding-bottom: 10px;
  }
  a{
    text-decoration: none;
    color: red;
  }
  td,th{
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
  }
 
  h4{
    text-align: center;
  }
  #tableBox{
    width: 210px;
    border: 1px solid #777;
    margin: 0 auto;
  }
  table{
    border-collapse: collapse;
  }
  #tableHead>tbody tr:not(:nth-child(2)) td{
    font-size: 14px;
    color: #000;
  }
  #tableHead tbody tr:last-child{
    border-top: 1px solid #e2e2e2;
  }
  #tableConetent>tbody tr td{
    font-size: 14px;
  }
  #tableConetent>tbody tr td:hover{
    background-color: #eaeaea;
      color: #333;
      cursor: pointer;
  }
  #prev,#next{
    cursor: pointer;
  }
  #prev:hover,#next:hover{
    color: red!important;
  }
  .active{
    background:#73d661;
    color:#fff!important;
  }
</style>
<body>
  <div id="wrap">
    <h4>仿博客园日历</h4>
    <div id="tableBox">
      <table id="tableHead">
        <tbody>
          <tr>
            <td id="prev"><</td>
            <td colspan="5" align="center" id="details" ></td>
            <td id="next">></td>
          </tr>
          <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
          </tr>
        </tbody>
      </table>
      <table id="tableConetent">
        <tbody></tbody>
      </table>
    </div>
  </div>
</body>
<script>
"use strict;"
  var prev=document.querySelector('#prev');
  var next=document.querySelector('#next');
  var details=document.querySelector('#details');
  var tbody=document.querySelector('#tableConetent tbody');
  var tdStr = '';
  for(let i =0;i<6;i++){
    tdStr += `<tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>`
  }
  tbody.innerHTML = tdStr;
  var aTb=document.querySelectorAll('#tableConetent tbody td');
  prev.onclick = function(){calendar(-1)}
  next.onclick = function(){calendar(1)}
  calendar(0)
  function calendar(status){
    if(status==0){
      details.innerHTML = dateFormat('yyyy年M月');
      var curDate=getWeek(dateFormat('yyyy-MM-')+'01');
      var n=curDate=='日'?7:curDate=='六'?6:curDate=='五'?5:curDate=='四'?4:curDate=='三'?3:curDate=='二'?2:1;
      var arr=[]
      //上一月多少天
      var prveMonth=getMaxDayOfDate(getBeAfDateByMonth(-1));
      //本月多少天
      var currMonth=getMaxDayOfDate();
    }else if(status==1){
      //获取原来的日期
      var currYearMonth=details.innerHTML;
      //原来的日期转化到格式化日期
      var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
      var dt=new Date(curDate)
      details.innerHTML = getBeAfDateByMonth(1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(1,dt).split('-',2)[1]-0)+'月';
      var currentDate=getWeek(getBeAfDateByMonth(1,dt));
      var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
      var arr=[]
      //上一月多少天
      var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(0,curDate)));
      //本月多少天
      var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(1,dt)));
    }else if(status==-1){
      //获取原来的日期
      var currYearMonth=details.innerHTML;
      //原来的日期转化到格式化日期
      var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
      var dt=new Date(curDate)
      details.innerHTML = getBeAfDateByMonth(-1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(-1,dt).split('-',2)[1]-0)+'月';
      var currentDate=getWeek(getBeAfDateByMonth(-1,dt));
      var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
      var arr=[]
      //上一月多少天
      var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-2,curDate)));
      //本月多少天
      var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-1,dt)));
    }
    var init=details.innerHTML;
    for(var i=prveMonth;i>prveMonth-n;i--){arr.unshift(i)}
    for(var j=1;j<currMonth+1;j++){arr.push(j)}
    var len=43-arr.length;
    for(var k=1;k<len;k++){arr.push(k)}

    for(var t=0;t<42;t++){
      if(t>=n&&t<=n+currMonth-1){
        aTb[t].removeAttribute('class');
        if(getDatePart('日')==arr[t]&&dateFormat('yyyy年M月')==init){
          aTb[t].className='active';
        }else{
          aTb[t].style.color='#333';
        }
      }else{

        aTb[t].removeAttribute('style');
        aTb[t].style.color='#d2d2d2';
      }
      aTb[t].innerHTML = arr[t]
    }
  }
//获取日期加减n月后的日期  
function getBeAfDateByMonth(n){
    var dt =arguments[1]?new Date(arguments[1]): new Date();
    dt.setMonth(dt.getMonth() + n);
    return dt.getFullYear()+'-'+(dt.getMonth()+1<10?'0'+(dt.getMonth()+1):(dt.getMonth()+1))+'-'+(dt.getDate()<10?'0'+dt.getDate():dt.getDate())
}
//获取星期
function getWeek(){
    var i=arguments[0]?new Date(arguments[0]).getDay():new Date().getDay()
    return ['日','一','二','三','四','五','六'][i]
}
//获取日期部分具体信息
function getDatePart(typeName){
    var t=arguments[1]?new Date(arguments[1]):new Date();
    switch(typeName) {
        case '年':
        return t.getFullYear();
        break;
        case '月':
        return t.getMonth()+1;
        break;
        case '日':
        return t.getDate();
        break;
        case '时':
        return t.getHours();
        break;
        case '分':
        return t.getMinutes();
        break;
        case '秒':
        return t.getSeconds();
        break;
        default:
        return '';
    }
}
//获取日期所在的月份有多少天
function getMaxDayOfDate(){
    var dt=arguments[0]?new Date(arguments[0]):new Date()
    dt.setMonth(dt.getMonth() + 1)
    dt.setDate(1)
    dt.setDate(dt.getDate() -1)
    return dt.getDate()
}
//日期格式化
function dateFormat(format){
    var d=new Date();
    var t=arguments[1]?new Date(arguments[1]):d;
    var date = {
      "M+": t.getMonth() + 1,
      "d+": t.getDate(),
      "h+": t.getHours(),
      "m+": t.getMinutes(),
      "s+": t.getSeconds(),
      "q+": Math.floor((t.getMonth() + 3) / 3),
      "S+": t.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
        }
    }
    return format;
}
</script>
</html>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(4) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
4

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 原生js仿博客园日历

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线