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

 <!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. 主流服务器虚拟化技术简单使用——KVM（二）

    通过Linux工具管理KVM 主流服务器虚拟化技术简单使用——KVM(一)部署了一台KVM主机,提到KVM可以通过命令行工具(virt-install.virsh)和GUI工具(virt-manage ...

  2. 基础篇：3.1）规范化：3d草绘

    本章目的:3d草绘不同于cad工程图,但也有自己的规范要求.草绘要多多练习. 1.建模草图绘制 草图是大多数 3D 模型的基础.通常,创建模型的第一步是绘制草图,随后可以从草图生成特征.将一个或多个特 ...

  3. POJ_2886 Who Gets the Most Candies? 【二分+树状数组】

    一.题目 POJ2886 二.分析 这个题目吧,开始没读懂,做的时候也没懂,WA的时候懂了.假设是第p个出圈的人有一个对应的因子个数$F(p)$,那么,题目求的就是这个$F(p)$最大的对应的人. 1 ...

  4. springcloud(一)-初识

    springCloud简介 尽管springCloud带有“cloud”字样,但它并不是云计算解决方案,而是在SpringBoot基础上构建的,用于快速构建分布式系统的通用的工具集.从技术架构上降低了 ...

  5. Python爬虫常用之登录(一) 思想

    爬虫主要目的是获取数据,常见的数据可以直接访问网页或者抓包获取,然后再解析即可. 一些较为隐私的数据则不会让游客身份的访问者随便看到,这个时候便需要登录获取. 一般获取数据需要的是登录后的cookie ...

  6. Spring异常：Annotation-specified bean name.. for bean class ...

    Spring重命名问题.对照项目中的注解,查找@Service是否重重名.由于Spring是在注解下按配置扫描的方式去创建对象的,那么两个重名的注解也就不成立了. 备注,特别注意test包下有没有通过 ...

  7. Case When ELSE END语句

    一.简介.Case  When   ELSE   END共有两种用法: 说实话,这种就是数据库版的switch语句,但是只是形式上很像,实际上还是有差别的!!! Create Table Test6( ...

  8. 卸载oracle10g

    网上搜集的.暂时先用着完全卸载Oracle方法:软件环境: 1.Windows XP + Oracle 10g 2.Oracle安装路径为:d:\Oracle 1.如果数据库配置了自动存储管理(ASM ...

  9. 【ExtJS】FormPanel表单验证

    在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init();    //为组件提供 ...

  10. 前端emmet插件的一些常用用法

    以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...