【html css js】实现一个简易日历

——【效果预览】

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

——【代码部分】

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】实现一个简易日历的更多相关文章

avalon.js实现一个简易日历
使用MVVM框架avalon.js实现一个简易日历最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...
使用MVVM框架avalon.js实现一个简易日历
最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...
使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
使用 js 实现一个简易版的 async 库
使用 js 实现一个简易版的 async 库具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...
使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

Java工程师学习指南（初级篇）
Java工程师学习指南初级篇最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
走进JavaWeb技术世界1：JavaWeb的由来和基础知识
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
数据挖掘：关联规则的apriori算法在weka的源码分析
相对于机器学习,关联规则的apriori算法更偏向于数据挖掘. 1) 测试文档中调用weka的关联规则apriori算法,如下 try { File file = new File("F:\ ...
muduo Library
muduo是由陈硕(http://www.cnblogs.com/Solstice)开发的一个Linux多线程网络库,采用了很多新的Linux特性(例如eventfd.timerfd)和GCC内置函数 ...
浅谈Mysql索引
文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 我们都知道,数据库索引可以帮助我们更加快速的找出符合的数据,但是如果不使用索引,Mysql则会从第一条开始查询 ...
Apache常见配置
一.yum安装与配置 1.1安装: [root@apache ~]# yum install http\* -y [root@apache ~]# echo "test01" ...
.Net Core3.0依赖注入DI
构建ASP.NET Core应用程序的时候,依赖注入已成为了.NET Core的核心,这篇文章,我们理一理依赖注入的使用方法. 不使用依赖注入首先,我们创建一个ASP.NET Core Mvc项目, ...
KMP算法关键
Knuth-Morris-Pratt Algorithm 当初写这个博客之后一年多,再次看发现当初并不是完全弄明白了.这里为了“避免重复制造轮子”,引用大神博客. http://blog.csdn.n ...
如何在vue里引入Bootstrap
一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack ...
Windows许可证即将过期怎么办？
最近在使用电脑的时候,一开机就会弹窗出现:Windows 许可证即将过期.我勒个去,windows还会过期啊. 我搜遍全网,发现了一个很棒的 Windows10 永久激活的工具,而且没有广告什么乱七八 ...

【html css js】实现一个简易日历

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

随机推荐

热门专题