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

 <!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. 海思hi35xx 开发学习(3):视频输入

    视频输入(VI)模块实现的功能:通过 MIPI Rx(含 MIPI 接口.LVDS 接口和 HISPI 接口),SLVS-EC,BT.1120,BT.656,BT.601,DC 等接口接收视频数据.V ...

  2. 虚拟立方体调用非共享维度的时候需要指定cubeName，否则Schema无效

    但是,即使把非共享维度放上去,会出现一种情况. 一旦放入资产负债的非公共维度进去后,报表的度量值只能出现资产负债的度量值,不能出现损益的度量值了!

  3. c++ 用 0x3f3f3f3f 设定最大int值的优点

    在许多算法中都要用到一个常量来表示最大值,例如:寻找一个最小数,就要先设定一个值a,如果比a小,a就等于这个数:再如,最短路径中基本的松弛操作: 0 在c++中可以用memset() 来初始化数组成最 ...

  4. Struts2和SpringMVC的action是单例还是原型的？

    struts2的acion单独使用的时候应是多例的,也就是原型(prototype). 因为它是基于类开发的,它的三种获取页面传参的方式都是通过成员变量的方式来接受的. 如果用struts2框架基于方 ...

  5. MVC返回数据流，ajax接受并保存文件

    js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  6. Docker部署Nginx应用（2）

    Docker部署Nginx应用(2) 1.拉取Nginx镜像 [root@localhost ~]# docker pull nginx Using default tag: latest lates ...

  7. 12.2.0.1 restart环境执行root.sh 报 CLSRSC-400 错误

    问题描述: 在LINUX 7.5 的环境上安装12.2.0.1 Restart Grid环境,执行root.sh  报 CLSRSC-400 错误 错误如下: 解决办法: 1. 参考(文档ID 136 ...

  8. tomcat各文件夹及作用

    1.bin目录:这个文件夹包含的是启动/关闭tomcat的脚本 2.conf目录:主要是用来存放一些Tomcat的配置文件,都是一些.xml部署文件,其中重要的有: server.xml:是Tomca ...

  9. 04-oracle时间函数

    add_months(sysdate,x)x月之后的日期:last_day(sysdate)指定日期所在月份的最后一天:next_day(sysdate,'星期x')当前日期后的下一个星期x: mon ...

  10. 剑指offer等算法总结归类

    从数据结构分 一.链表: 3.题目描述:输入一个链表,从尾到头打印链表每个节点的值(递归) 思路:递归调用,调一次,加一次到list中 14.题目描述:输入一个链表,输出该链表中倒数第k个结点 两个指 ...