新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑

 <!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>无标题文档</title>

         <style>

             * {margin: 0;padding: 0}

             #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}

             #calendar h4 {text-align: center;margin-bottom: 10px}

             #calendar .a1 {position: absolute;top: 20px;left: 20px;}

             #calendar .a2 {position: absolute;top: 20px;right: 20px;}

             #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}

             #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}

             #calendar .dateList {overflow: hidden;clear: both}

             #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}

             #calendar .dateList .ccc {color: #ccc;}

             #calendar .dateList .red {background: #F90;color: #fff;}

             #calendar .dateList .sun {color: #f00;}

         </style>

         <script src="js/jquery-1.11.3.min.js"></script>

         <script>

             $(function() {

                 //必要的数据

                 //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？

                 var iNow=0;

                 function run(n) {

                     var oDate = new Date(); //定义时间

                     oDate.setMonth(oDate.getMonth()+n);//设置月份

                     var year = oDate.getFullYear(); //年

                     var month = oDate.getMonth(); //月

                     var today = oDate.getDate(); //日

                     //计算本月有多少天

                     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

                     //判断闰年

                     if(month == 1) {

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

                             allDay = 29;

                         }

                     }

                     //判断本月第一天是星期几

                     oDate.setDate(1); //时间调整到本月第一天

                     var week = oDate.getDay(); //读取本月第一天是星期几

                     //console.log(week);

                   $(".dateList").empty();//每次清空

                     //插入空白

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

                         $(".dateList").append("<li></li>");

                     }

                     //日期插入到dateList

                     for(var i = 1; i <= allDay; i++) {

                         $(".dateList").append("<li>" + i + "</li>")

                     }

                     //标记颜色=====================

                     $(".dateList li").each(function(i, elm){

                         //console.log(index,elm);

                         var val = $(this).text();

                         //console.log(val);

                         if (n==0) {

                             if(val<today){

                             $(this).addClass('ccc')

                         }else if(val==today){

                             $(this).addClass('red')

                         }else if(i%7==0  ||  i%7==6   ){

                             $(this).addClass('sun')

                         }

                         }else if(n<0){

                             $(this).addClass('ccc')

                         }else if(i%7==0  ||  i%7==6   ){

                             $(this).addClass('sun')

                         }

                     });

                     //定义标题日期

                     $("#calendar h4").text(year + "年" + (month + 1) + "月");

                 };

                 run(0);

                 $(".a1").click(function(){

                     iNow--;

                     run(iNow);

                 });

                 $(".a2").click(function(){

                     iNow++;

                     run(iNow);

                 })

             });

         </script>

     </head>

     <body>

         <div id="calendar">

             <h4>2013年10月</h4>

             <a href="##" class="a1">上月</a>

             <a href="##" class="a2">下月</a>

             <ul class="week">

                 <li>日</li>

                 <li>一</li>

                 <li>二</li>

                 <li>三</li>

                 <li>四</li>

                 <li>五</li>

                 <li>六</li>

             </ul>

             <ul class="dateList"></ul>

         </div>

     </body>

 </html>

HTML 简单日历制作方法的更多相关文章

  1. 简单介绍RPM包制作方法

    RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,是一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中.它生成具有.RPM扩展名的文件.使用r ...

  2. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  3. 《奥威Power-BI智能分析报告制作方法 》精彩回顾

     上次课我们简单介绍了奥威Power-BI的智能分析报告,并展示了报告与图表相结合的应用场景.图文分析报表的意义不只在于美观,更重要的是固定框架下的灵活性和追根究底的动态分析,有着很强的实用性.上节课 ...

  4. 《奥威Power-BI智能分析报表制作方法》精彩回顾

    年的最后一个月,一年又快过去.工作和学习都不能耽误,本周三奥威公开课又如约与大家见面咯!不知老师教的图文报表在课后你们都有练习吗?趁热打铁,我们现在再次来温习一下吧. 本期分享的内容:<奥威Po ...

  5. 11月30日《奥威Power-BI智能分析报表制作方法》腾讯课堂开课啦

    这么快一周就过去了,奥威公开课又要与大家见面咯,上节课老师教的三种报表集成方法你们都掌握了吗?大家都知道,学习的结果在于实际应用,想要熟练掌握新内容的要点就在于去应用它.正是基于这一要点,每一期的课程 ...

  6. Xcode6.1标准Framework静态库制作方法。工程转Framework，静态库加xib和图片。完美解决方案。

    http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加x ...

  7. USB移动硬盘WinPE启动盘的制作方法

    USB移动硬盘WinPE启动盘的制作方法 软件:老九WinPE 老毛桃终于撒手无论版 发行时间:2007年9月11日 制作发行:老毛桃 作用:当系统坏了,无法进入时,用来做系统维护,备份文件.轻巧稳定 ...

  8. RFID标签天线的三种制作方法

    在RFID标签中,天线层是主要的功能层,其目标是传输最大的能量进出标签芯片.RFID天线是按照射频识别所要求的功能而设计的电子线路,将导电银浆或导电碳浆网印在PVC.PC或PET上,再与面层.保护层和 ...

  9. Webcast / 技术小视频制作方法——自己动手录制video轻松搞定

    Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...

随机推荐

  1. 使用Avd 调试慢的解决方案

         AVD 太慢了,不仅启动,而且运行慢.以致于要用手机去调.你觉得这样方便吗?     如果没有一个简单快速的开发调试环境,把时间都浪费在启动,调试及等待上,那是对生命的浪费.   必要条件: ...

  2. Idea中更改主题后xml配置文件局部黄色背景颜色去除

    相信很多小伙伴和我一样一样的,喜欢更换Idea的主题,但是细心的小伙伴就发现了,每次更改主题后xml配置文件就会局部产生黄色背景颜色,对于强迫症患者真的是够了,网上也有部分文章,但是不够详细,也跟Id ...

  3. P2472 [SCOI2007]蜥蜴

    传送门 求无法逃离的蜥蜴总数的最小值就是求最多逃离的蜥蜴总数 所以显然考虑最大流,一个流量的路径就相当于一只蜥蜴逃离的路径 发现每个位置有一个最大经过次数,所以把每个位置拆成两个点$x,y$,$x$ ...

  4. php引擎文件php.ini优化参数

    无论是Apache环境还是nginx环境,php.ini都适合,php-fpm.conf适合nginx+fcgi的配置. 生产环境php.ini(php.ini-production) php.ini ...

  5. Oracle SQL Developer 查询时间格式

    工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:MI:SS

  6. Docker - 故障排查指南

    这阵子开始捣鼓 Docker,遇到过不少问题,下面记录下问题以及解决方案 一.Docker 报 Failed to start Docker Application Container Engine ...

  7. Ubuntu中screen命令的使用

    参考GNU's Screen 官网:GNU's Scree screen的安装 sudo apt install screen 新建窗口1)可直接通过命令screen新建一个窗口,并进入窗口.但通过这 ...

  8. 仔细说明CLOSE_WAIT状态的原因

    CLOSE_WAIT状态!!! 服务器收到客户端FIN报文后  服务器端口回复了ack,没有回复FIN报文. 1 说明客户端后面不会再向服务器发送用户层的数据了, 2 客户端 没有回复FIN 报文嘛 ...

  9. Python+Selenium之cannot focus element 解决方法

    有时候刚进入页面输入第一个值时脚本会报错:cannot focus element 贴下我的脚本和解决办法供大家参考 我原本的脚本是: WebDriverWait(driver,15,0.5).unt ...

  10. Java基础29-子父类中的成员变量

    /* 成员: 1.成员变量 2.函数 3.构造函数 变量: this 代表当前对象的引用 this.变量 首先在本类中找所需要的变量,如果没有找到再父类中找. super 用于访问当前对象的父类成员, ...