——【效果预览】

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

——【代码部分】

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. CS184.1X 计算机图形学导论 第3讲L3V1

    二维空间的变换 L3V1这一课主要讲了二维空间的变换,包括平移.错切和旋转. 缩放 缩放矩阵 使用矩阵的乘法来完成缩放 缩放矩阵是一个对角矩阵,对角线上的值对应缩放倍数 错切(shear) 错切可以将 ...

  2. Java总结---继承（不断完善ing..）

    java三大特性:封装.继承.多态 继承 一.目的:实现代码的复用 二.简单例子(A继承了C): public class A extends C { //检测哪些可以在子类里使用 public vo ...

  3. Linux提权中常见命令大全

    在拿到一个 webshell 之后,大家首先会想到去把自己的权限提升到最高,windows 我们会提升到 SYSTEM 权限,而 Linux 我们会提升到 root 权限,拿在进行 Linux 提权的 ...

  4. WCF 入门调用实例教程

    WCF的相关概念信息就不在此赘述了,网上一搜一大把. 现在让我们动手搭建我们的第一个wcf程序吧,具体流程如下: 1. 新建立空白解决方案,并在解决方案中新建项目,项目类型为:WCF服务应用程序. 2 ...

  5. python-函数相关

    一.函数: 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print(). 但你也可以自 ...

  6. Tensorflow从开始到放弃（技术篇）

    在gpu中运行 tf.device("/gpu:1") 有时候这个是会出问题的,即便你在有名称为1的gpu时.有的操作是不能支持gpu的,应该为session添加一些配置: pyt ...

  7. java学习6-java基础类库

    1.与用户互动 2.系统相关 3.常用类 4.日期.时间类

  8. webpack中如何使用图标字体

    1.webpack安装相关依赖 $ npm install font-awesome-webpack less less-loader css-loader style-loader file-loa ...

  9. 如何在sprintf函数中输出百分号(%)等特殊符号

    php中的sprinf可以格式化字符串的数据类型.今天遇到了想在其中输出%,可难倒我了. $query =  sprintf("select * from books where %s li ...

  10. Emacs 学习之旅

    **Emacs 的使用过程,就像是程序员的生涯一样--路漫漫其修远兮,吾将上下而求索.** ## 万物始于 Emacs 最早知道 _Emacs_ 是从编辑器的圣战开始的,即编辑器之神--Vi,和神的编 ...