原生js万年历Calendar制作（date对象的运用）

最新推荐文章于 2024-05-26 09:57:51 发布

chujiang3269

最新推荐文章于 2024-05-26 09:57:51 发布

阅读量576

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/u/3256201/blog/835462

版权

毕竟还是前端菜鸟！代码写了就忘\ue411,写博客温故而知新还是比较重要的，今天回顾下之前写的万年历！

首先页面布局:

<body>
<div id="calendar">
    <div id="header">
        <select name="" id="select_1">
        </select>
        <select name="" id="select_2">
        </select>
    </div>
    <ul>
        <li>星期日</li>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
    </ul>
    <ul></ul>
</div>
</body>

运用li标签的浮动来形成。

接下来就是重点啦！JavaScript的编写；

首先引入获取当月的天数的方法：

var FebDays = new Date(2017,2,0).getDate();

确定当月在日历中排多少行：

function getRow(_year,_mouth) {
      var date =new Date(_year,_mouth-1,1);
      var week =date.getDay();
      var days = new Date(_year,_mouth,0).getDate();
      var row =Math.ceil((days+week)/7);
      return row;
  }
getRow(2017,2) //可以获取到二月份行数

确定当月1号是星期几根据规律算出行数：

var date =new Date(_year,_mouth-1,1);
var week =date.getDay();
//行数(天数与星期之间的关系)
var row = Math.ceil((days+week)/7);

用dom操作获取到所要操作的节点：

   var tb = document.getElementById('calendar');      //在外部的大盒子
   var header = document.getElementById('header');    // select 选择年月的盒子
   var ul = tb.getElementsByTagName('ul')[1];         // 放日期li的盒子
   var lis =ul.getElementsByTagName('li');            // 日期盒子
   var select_1 = document.getElementById('select_1');// 选择年份
   var select_2 = document.getElementById('select_2');// 选择月份
   var now =new Date();                               // 当前时间
   var nowYear =now.getFullYear();                    // 当前年份
   var nowMouth =now.getMonth()+1;                    // 当前月份

编写创建日历的函数：

function createCalender(_year,_mouth) {
       var date =new Date(_year,_mouth-1,1);
       var now = new Date();
       var nowdate = now.getDate();
       var row =getRow(_year,_mouth);
       var week =date.getDay();
       var days = new Date(_year,_mouth,0).getDate();
       for(var i=0;i<row;i++){
           for(var j = 0;j < 7;j++){
               var li = document.createElement('li');
                   //第一行会有空白替代，因为1号有可能不是星期天
                   if( j< week && i === 0){
                       li.innerHTML =' ';
                   }else{
                       if((i*7+j+1)-week<=days){
                       li.innerHTML =(i*7+j+1)-week;
                       }
                   }
                  //选中当天改变样式
               if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

                   li.style.backgroundColor = 'orange';
                   li.style.color = '#fff';
               }
                 //将创建的天数li盒子插入到ul父盒子
               ul.appendChild(li);
           }
       }
   }

年份和月份的下拉列表生成函数：

function createSelect() {
        var now =new Date();
        for(var i=1995;i<=2100;i++){
            var options_year = document.createElement('option');
            options_year.innerHTML = i;
            select_1.appendChild(options_year);
        }
        for(var j =1;j<=12;j++){
            var options_mouth = document.createElement('option');
            options_mouth.innerHTML = j+'月';
            select_2.appendChild(options_mouth);
        }
        select_1.value =now.getFullYear();
        select_2.value =now.getMonth()+1+'月';
    }

当下拉列表年月改变时的函数:

function changeValue() {
        createCalender(nowYear,nowMouth);
        var value;
        select_1.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(this.value,value);
        }
        select_2.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(select_1.value,value);

        }
    }
    function removeUlchild() {
        while(ul.hasChildNodes()){
            ul.removeChild(ul.lastChild);
        }
    }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
       #canlendar{
           width: 700px;
           border:1px solid #000;
           font-family: '楷体';
           margin:50px auto;
           overflow: hidden;
       }
        #canlendar ul{
            width: 100%;
        }
       #canlendar li{
           width: 100px;
           height: 80px;
           line-height:80px;
           text-align: center;
           border-radius: 50%;
           float: left;
       }
        #canlendar>#header{
            width: 100%;
            height: 25px;
            padding-top:25px;
        }
        #canlendar>#header>select{
            outline: none;
            width: 100px;
            border:0;
            padding-left: 25px;
        }

    </style>
</head>
<body>
<div id="canlendar">
    <div id="header">
        <select name="" id="select_1">
        </select>
        <select name="" id="select_2">
        </select>
    </div>
    <ul>
        <li>星期日</li>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
    </ul>
    <ul></ul>
</div>
</body>
</html>
<script>
 
   var tb = document.getElementById('canlendar');
   var header = document.getElementById('header');
   var ul = tb.getElementsByTagName('ul')[1];
   var lis =ul.getElementsByTagName('li');
   var select_1 = document.getElementById('select_1');
   var select_2 = document.getElementById('select_2');
   var now =new Date();
   var nowYear =now.getFullYear();
   var nowMouth =now.getMonth()+1;
    changeValue();
    createSelect();
    function createCalender(_year,_mouth) {
       var date =new Date(_year,_mouth-1,1);
       var now = new Date();
       var nowdate = now.getDate();
       var row =getRow(_year,_mouth);
       var week =date.getDay();
       var days = new Date(_year,_mouth,0).getDate();
       for(var i=0;i<row;i++){
           for(var j = 0;j < 7;j++){
               var li = document.createElement('li');

                   if( j< week && i === 0){
                       li.innerHTML =' ';
                   }else{
                       if((i*7+j+1)-week<=days){
                       li.innerHTML =(i*7+j+1)-week;
                       }
                   }
               if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

                   li.style.backgroundColor = 'orange';
                   li.style.color = '#fff';
               }
               ul.appendChild(li);
           }
       }
   }
  function getRow(_year,_mouth) {
      var date =new Date(_year,_mouth-1,1);
      var week =date.getDay();
      var days = new Date(_year,_mouth,0).getDate();
      var row =Math.ceil((days+week)/7);
      return row;
  }
    function createSelect() {
        var now =new Date();
        for(var i=1995;i<=2100;i++){
            var options_year = document.createElement('option');
            options_year.innerHTML = i;
            select_1.appendChild(options_year);
        }
        for(var j =1;j<=12;j++){
            var options_mouth = document.createElement('option');
            options_mouth.innerHTML = j+'月';
            select_2.appendChild(options_mouth);
        }
        select_1.value =now.getFullYear();
        select_2.value =now.getMonth()+1+'月';
    }
    function changeValue() {
        createCalender(nowYear,nowMouth);
        var value;
        select_1.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(this.value,value);
        }
        select_2.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(select_1.value,value);

        }
    }
    function removeUlchild() {
        while(ul.hasChildNodes()){
            ul.removeChild(ul.lastChild);
        }
    }
</script>

转载于:https://my.oschina.net/u/3256201/blog/835462

chujiang3269

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js万年历Calendar制作（date对象的运用）

毕竟还是前端菜鸟！代码写了就忘\ue411,写博客温故而知新还是比较重要的，今天回顾下之前写的万年历！首先页面布局: <body><div id="calendar"> <div id="header"> <select...
复制链接

扫一扫