【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描述设计模式(15)：责任链模式
本文源码:GitHub·点这里 || GitEE·点这里一.生活场景描述 1.请假审批流程公司常见的请假审批流程:请假天数当 day<=3 天,项目经理审批当 3<day<= ...
Android WebSocket实现即时通讯功能
最近做这个功能,分享一下.即时通讯(Instant Messaging)最重要的毫无疑问就是即时,不能有明显的延迟,要实现IM的功能其实并不难,目前有很多第三方,比如极光的JMessage,都比较容易 ...
tinyxml2
网上下载tinyxml2:tinyxml2.h和tinyxml2.cpp 加载xml XMLDocument doc; doc.LoadFile("test.xml"); ...
Vulnhub靶场渗透练习(五) Lazysysadmin
第一步扫描ip nmap 192.168.18.* 获取ip 192.168.18.147 扫描端口 root@kali:~# masscan - --rate= Starting massc ...
Rsync服务常见问题
转---Rsync 故障排查整理 Rsync服务常见问题汇总讲解: 1. 客户端的错误现象:No route to host rsync服务端开启的iptables**防火墙** [root@nfs0 ...
vmware14安装centos7的步骤（图文详解）
一.centos的安装 centos分为桌面版和黑屏版(命令行版):在这里我使用的是命令行版. 这里选择安装程序光盘映像文件,文件就是centos7的iso文件. 虚拟机的名称和位置自行设置; 虚拟机 ...
不离开Emacs完成简单程序的编辑编译运行(windows或Linux)
(1)打开Emacs (2)建立一个新的程序文件. 执行 C-x C-f, 然后在屏幕的底部出现minibuffer,光标提示你输入文件名称, 文件名称要带上后缀名,如hello.cpp.回车,然后开 ...
虚拟机--python环境配置
1.安装VMware 2.安装Ubantu (1)打开VMware,打开编辑-->首选项,更改虚拟机存储的位置. (2)创建新的虚拟机(自定义): (3)编辑虚拟机--点击CD/VCD--更改成 ...
js控制进度条数据
<style> ...
jquery引用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

随机推荐

热门专题