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

 <!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. XMPP Authentication

      From: http://www.ietf.org/rfc/rfc2831.txt 2 Authentication The following sections describe how to ...

  2. 1.Bootstrap简介

    Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...

  3. SD与SE的关系，以及异常值

    很多刚进入实验室的同学对实验数据的标准差(SD)与标准误(SE)的含义搞不清,不知道自己的数据报告到底该用SD还是SE.这里对这两个概念进行一些介绍. 标准差(SD)强调raw data的Variat ...

  4. js高级程序设计 笔记 --- 错误处理、json和ajax

    1,错误处理 1,try-catch语句 try{可能导致错误的代码} catch(error) {在错误发生时该怎么处理} error.message是所有浏览器都支持的属性. finally语句是 ...

  5. eAccelerator 配置参数详解

    eAccelerator配置参数如下: [eaccelerator]extension=eaccelerator.soeaccelerator.shm_size="64"eacce ...

  6. 使用python requests库写接口自动化测试--记录学习过程中遇到的坑（1）

    一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...

  7. Linux-文件目录类命令

    l 文件目录类 pwd 指令 基本语法 pwd (功能描述:显示当前工作目录的绝对路径) 应用实例 案例:显示当前工作目录的绝对路径 ls指令 基本语法 ls [选项] [目录或是文件] 常用选项 - ...

  8. Junit处理异常

    当一个被测类中有异常时,如何处理? 如:一个原始的被测类; public class UserExceptionDemo { public int age; public String name; p ...

  9. 【debian】给用户添加sudo权限

    新装的debian系统默认是没有sudo功能的. 于是,在root用户权限下: apt-get install sudo 然后再修改文件 /etc/sudoers : chmod +w /etc/su ...

  10. 带有权重的服务器SLB的实现

    1)参考了网络上的算法,但是那个算法仅仅是用于展示“权重轮循”的意图,在真正的网络下,因为是并行的,所以不可能单纯一个简单的循环可以解决问题. 2)用lock的话性能显然有损失. 3)想了一阵,结合C ...