——【效果预览】

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

——【代码部分】

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. 线程池和lambda表达式

    线程池1.什么是线程池.一个用来创建和管理线程的容器;2.线程池的作用.提高线程的复用性,降低资源消耗提高线程的响应速度,提高线程的可管理性3.线程的核心思想;线程的复用 4.线程池的创建Execut ...

  2. 2019头条java面试总结 (包含面试题解析)

    2019滴滴java面试总结  (包含面试题) 本人8年开发经验.今年年初找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.滴滴等公司offer,岗位是Java后端开发. 面试了很多家公司,感觉大部分 ...

  3. unittest执行用例方法

    #coding=utf-8 from selenium import webdriver from time import sleep import unittest#导入unittest库 impo ...

  4. HOOK 技术

    在介绍 截获系统消息钩子 之前,这几个函数是密切相关的: SetWindowsHookEx() 介绍: 功能:将应用程序定义的挂钩过程安装到挂钩链中. 函数原型:HHOOK SetWindowsHoo ...

  5. Hydra爆破神器使用

    参数详解: -R 根据上一次进度继续破解-S 使用SSL协议连接-s 指定端口-l 指定用户名-L 指定用户名字典(文件)-p 指定密码破解-P 指定密码字典(文件)-e 空密码探测和指定用户密码探测 ...

  6. 图像处理笔记（二十一）：halcon在图像处理中的运用

    概要: 分水岭算法做图像分割 二维码识别 稍后将其他几篇笔记全都补充上概要方便查询. 分水岭算法做图像分割 使用距离变换结合分水岭算法实现图像分割,可以用来分割仅通过阈值分割还是有边缘连接在一起的情况 ...

  7. 1.在ubuntu中软件安装在哪里?

    ubuntu下安装软件有四种方式: 1.通过deb格式的离线软件包安装 sudo dpkg -i xxx.deb # 安装包,安装程序   -i: install sudo dpkg -r packa ...

  8. Spring Boot 2.X(十一)：全局异常处理

    前言 在 Java Web 系统开发中,不管是 Controller 层.Service 层还是 Dao 层,都有可能抛出异常.如果在每个方法中加上各种 try catch 的异常处理代码,那样会使代 ...

  9. CSS(1)---css语法、css选择器

    CSS(1)---css语法.css选择器 一.CSS语法 1.CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明. 属性 是您希望设置的 样式属性.每个属性有一个属性值.属性和属 ...

  10. APP打包设置程序版本号

    正确设置方式是: 注意,以下修改不会起作用<manifestxmlns:android="http://schemas.android.com/apk/res/android" ...