JavaScript制作日历

效果图JavaScript制作日历_第1张图片

代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
      
            margin: 0;
            padding: 0;

        }

        #calendar {
      
            background-color: #9900ff;
            color: #fff;
            border-radius: 5px;
            margin: 100px auto;
        }

        #title {
      
            font-size: 1.4em;
            padding: 4px 0.55em;
        }

        #days th {
      
            font-weight: bold;
            text-align: center;
            padding: 4px 0.55em;
        }

        #calendar td {
      
            text-align: center;
            padding: 4px 20px;
        }

        #today {
      
            color: #f00;
            font-weight: bold;
        }

        .poin {
      
            cursor: pointer;
            cursor: hand;
        }
    style>
    <script>
        window.onload=function(){
      
            var form = document.getElementById('calendar');
            // 通过日历对象去调用自身的init方法
            calendar.init(form);
        }
        var calendar = {
      
            year: null,
            month: null,
            //日的数组
            dayTable: null,
            //初始化函数
            init(form) {
      
                // 1获取日数组
               this.dayTable=form.getElementsByTagName('td');
               //2创建日历,传入当前时间
               this.createCalendar(form,new Date());
               var nextMon=form.getElementsByTagName('th')[2];
               var preMon=form.getElementsByTagName('th')[0];
               preMon.onclick=function(){
      
                calendar.clearCalendar(form)
                   var preDate=new Date(calendar.year,calendar.month-1,1);
                   calendar.createCalendar(form,preDate)
               }
               nextMon.onclick=function(){
      
                   calendar.clearCalendar(form)
                   var nextDate=new Date(calendar.year,calendar.month+1,1);
                   calendar.createCalendar(form,nextDate)
               }
            },
            //清除日历数据
            clearCalendar(form){
      
                var tds=form.getElementsByTagName('td');
                for (var i = 0; i < tds.length; i++) {
      
                    tds[i].innerHTML=' ';
                    // 清除今天的样式
                    tds[i].id='';
                }
            },
            // 3生成日历
            // from table表格  date要创建的日期
            createCalendar(form,date){
      
                //获取此时的年份
                  this.year=date.getFullYear(); 
                  //获取此时的月份
                  this.month=date.getMonth(); 

                  //年份月份写入日历
                  form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                  //获取本月的天数
                  var dataNum=this.getDateLen(this.year,this.month);
                  var fristDay = this.getFristDay(calendar.year,calendar.month);
                // 循环将每一天的天数写入到日历中
                // 让i表示日期。
                for (var i = 1; i <= dataNum; i++) {
      
                    this.dayTable[fristDay+i-1].innerHTML=i;
                    var nowDate =new Date();
                    if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
      
                        //    将当期元素的id设置为today
                        calendar.dayTable[i+fristDay-1].id = "today";
                   }
                }
            },
             // 获取本月份的天数
             getDateLen(year,month){
      
                //获取下个月的第一天
                var nextMonth=new Date(year,month+1,1);
                // 设置下月第一天的小时-1,也就是上个月最后一天的小时数,随便减去一个值不要超过24小时
                nextMonth.setHours(nextMonth.getHours()-1);
                //获取此时下个月的日期,就是上个月最后一天.
                return nextMonth.getDate();
             },
              // 获取本月第一天为星期几。
            getFristDay:function(year,month){
      
                var fristDay=new Date(year,month,1);
                return fristDay.getDay();
            }
        } 
    script>
head>

<body>
    <table id="calendar">
        <tr>
            
            <th class="poin"><<th>
            
            <th id="title" colspan="5">th>
            
            <th class="poin">>>th>
        tr>
        <tr id="days">
            <th>th>
            <th>th>

            <th>th>
            <th>th>
            <th>th>
            <th>th>
            <th>th>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
    table>

body>

html>

你可能感兴趣的:(前端入门案例,javascript)