——【效果预览】

实现了日历最基础的功能，当前日期红色显示，可通过上方的左右按钮查看上一月或下一月的日期。

——【代码部分】

1. HTML

 <body>

    <div class="cldBody">

        <table>

           <thead>

                <tr>

                    <td colspan="7">

                        <div class="top">

                            <span id="left">&lt;</span>

                            <span id="topDate"></span>

                            <span id="right">&gt;</span>

                        </div>

                    </td>

                </tr>

                <tr id="week" >

                    <td>日</td>

                    <td>一</td>

                    <td>二</td>

                    <td>三</td>

                    <td>四</td>

                    <td>五</td>

                    <td>六</td>

                </tr>

            </thead>

            <tbody id="tbody" ></tbody>

        </table>

   </div>

</body>

2. CSS

 <style type="text/css">

       .cldBody{background:#f7f7f7;width: 420px;margin: 10px auto;}

       .cldBody .top{height: 60px;line-height: 60px;text-align: center;position: relative;}

       #topDate{font-size: 24px;}

       #week td{font-size: 15px;}

       td{width: 60px; height: 60px;line-height: 60px;text-align: center;font-size: 20px;}

       #tbody td:hover{background: #ededed;cursor: pointer;}

       .curDate{color: red;font-weight: bold;}

       #left,#right{width: 60px;height: 60px;position: absolute;cursor: pointer;}

       #left{left: 0;}

       #right{right: 0;}

       #left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2);}

   </style>

【效果图】：

3.JS部分【博主引用了jq框架】

——1. 引入jq

  <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

——2. 添加月份到顶部

 var date = new Date();

 var year = date.getFullYear();

 var nowyear = date.getFullYear();

 var month = date.getMonth()+1;

 var nowmonth = date.getMonth()+1;

 var dateday = date.getDate();

 var todateHtml = year + '年'+ month + '月';

 $('#topDate').text(todateHtml)

——3. 添加日历函数

 function showcld(){

   var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];  // 创建数组存放每个月有多少天 ,默认2月为28天

   // 判断闰年

   if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){

       monthDay[1] = 29;

   }

   // 计算每个月的天数

   var days = monthDay[month-1];

   // 判断每月第一天为周几

   date.setYear(year);        //某年

   date.setMonth(month-1);   //某年的某月

   date.setDate(1);   // 某月的某天

   var weekday = date.getDay();  // 判断某天是周几

   // 补齐一号前的空格

   var tbodyHtml = '<tr>';

   for(var i = 0; i<weekday; i++){

       tbodyHtml += "<td></td>";

   }

   // 补齐每月的日期

   var changLine = weekday;

   var tagClass = '';

   for(i=1; i<=days; i++){//每一个日期的填充

       if(year == nowyear && month == nowmonth && i == dateday) {

                tagClass = "curDate";//当前日期对应格子

                 }else{

                     tagClass = "isDate";

                 }

       tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";

       changLine = (changLine+1)%7;

       if(changLine == 0 && i != days){//是否换行填充的判断

           tbodyHtml += "</tr><tr>";

       }

     }

   $('#tbody').empty();   // 清空原有的内容

   $('#tbody').append(tbodyHtml);   //添加当前月份的日期内容

}

——4.添加点击按钮事件

 // 设置按钮点击事件

 $('#left').click(function(){

     month = month-1;

     if(month < 1){

             month = 12;

             year--;

     }

     var todateHtml = year + '年'+ month + '月';

     $('#topDate').text(todateHtml);

     showcld();

 });

 $('#right').click(function(){

     month = month+1;

     if(month > 12){

             month = 1;

             year++;

     }

     var todateHtml = year + '年'+ month + '月';

     $('#topDate').text(todateHtml);

     showcld();

 })

  showcld();  //页面加载后执行函数

【html css js】实现一个简易日历的更多相关文章

  1. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  2. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

  3. 使用 js 实现一个简易版的动画库

    使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...

  4. 使用 js 实现一个简易版的模版引擎

    使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...

  5. 使用 js 实现一个简易版的 drag & drop 库

    使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...

  6. 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序

    使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...

  7. 使用 js 实现一个简易版的 async 库

    使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...

  8. 使用 js 实现一个简易版的 vue 框架

    使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...

  9. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. PHP 数组转json格式，key的保存问题

    <?php $arr = [ 2, 3, ]; echo print_r($arr,true); echo json_encode($arr); echo "\n\n"; $ ...

  2. [JZOJ5817] 【NOIP提高A组模拟2018.8.15】 抄代码

    Description J 君是机房的红太阳,每次模拟她总是 AK 虐场.然而在 NOIP2117 中,居然出现了另一位 AK 的选手 C 君! 这引起了组委会的怀疑,组委会认为 C 君有抄袭 J 君 ...

  3. cmake::helloworld

    ubuntu16. cmake安装 apt-get install cmake 1.创建 CMakeLists.txt , main.cpp 2.cmake . 生成 makefile 3.遇到错误c ...

  4. 3.如何理解开多线程可以充分利用CPU?

    如何理解开多线程可以充分利用CPU? <1>操作系统采用时间片轮转调度算法分配的时间片给每个进程中的线程 <2>操作系统的时间片轮转调度算法分配的时间片 在别的进程中都没有准备 ...

  5. MFC中如何分割CString类型的数据

    [才疏学浅,难免有纰漏,若有不正确的地方,欢迎指教] MFC中有一个库函数 Tokenize(); 函数原型:CStringT Tokenize( PCXSTR pszTokens , int& ...

  6. 阿里云 centos7.X mysql数据库安装、配置

    前言 1024阿里云搞活动,ecs云服务新用户促销活动,活动连接就不贴了,买了之后暂时不知道要做啥,想着先安装mysql数据库. 步骤 root用户登录进来 1.配置mysql的yum源,yum lo ...

  7. ElasticSearch安装及使用

    ElasticSearch安装及使用 ELK由Elasticsearch.Logstash和Kibana三部分组件组成. Elasticsearch 是个开源分布式搜索引擎,它的特点有:分布式,零配置 ...

  8. Node.js事件的正确使用方法

    前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...

  9. iOS cocoapods导入项目 出现 "___gxx_personality_v0", referenced from: 或者 clang: error: linker command failed with exit code 1 (use -v to see invocation) 错误

    今天想导入PNChart 编译的时候出现了  "___gxx_personality_v0", referenced from:  和 clang: error: linker c ...

  10. 如何利用Fiddler4进行Android APP / IOS APP抓包

    Fiddler抓包 1.Fiddler介绍 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据. F ...