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

 <!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. weex 初始化

    文档教程 一. 已有项目集成weex, 有时候会报错, 因为sdk中用到了socket pod 'WeexSDK' pod 'SocketRocket' 二. 在app启动方法 -didFinish ...

  2. 论文阅读 | ExtremeNet：Bottom-up Object Detection by Grouping Extreme and Center Points

    相关链接 论文地址:https://arxiv.org/abs/1901.08043 论文代码:https://github.com/xingyizhou/ExtremeNet 概述 ExtremeN ...

  3. BellmanFord贝尔曼-福特算法

    import java.util.ArrayList; import java.util.Scanner; /** * 贝尔曼-福特算法 * * Bellman - ford算法是求含负权图的单源最短 ...

  4. 【python】Scrapy爬虫框架入门

    说明: 本文主要学习Scrapy框架入门,介绍如何使用Scrapy框架爬取页面信息. 项目案例:爬取腾讯招聘页面 https://hr.tencent.com/position.php?&st ...

  5. 利用JS获取本地时间和服务器时间

    <p id="labTime"> <script type="text/javascript"> //取客户端时间 setInterva ...

  6. fish shell version

    如果你使用 fish shell, 想要自己定义变量,或者函数,或者alias, 不要使用      version     这个名字, 因为,version 这个名字 被 fish 本身占了.... ...

  7. mysql 02

    CREATE TABLE emp(eid INT,ename VARCHAR(20),egender CHAR(2),ebirthday DATE,eemail CHAR(10),eramark VA ...

  8. Http请求响应模型

    主要用到以下四个部分: Client   API   DB   API 场景:登录 1.Client发起请求到API接口层 1.1用户在客户端输入登录信息,点击登录,发送请求 2.API接受用户发起的 ...

  9. TortoiseGit学习系列之TortoiseGit是什么？

    写该文章目的 肯定有人会遇到这样的问题: 最近换了一份新工作,新公司的源码管理都是使用GIT,习惯了之前的TFS和SVN进行项目源码管理和团队开发,第一次使用GIT进行团队开发和源码管理,颇有一些不习 ...

  10. php 内存共享shmop源码阅读

    多进程通信的时候,会涉及到共享内存.shmop_open()创建或打开一个内存块 PHP_FUNCTION(shmop_open) { long key, mode, size; struct php ...