效果图：

 <html>

 <head>

 <script language="javascript">

 /*@ 解题思路：

     .计算本月有多少天（先要特殊处理2月，所以要先判断今年是平年还是闰年)

     .计算本月第一天是星期几。

     .计算本月日历的高度（即-需要几行显示，列是固定的7列)

 */

 function is_leap(year) { //闰年条件 能被4整除不能被100整除、或者能被400整除

    return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));

 } //是否为闰年，如果能被100整除再判断是否能被400整除（如果能被400整除则一定能被100整除），如果不能被100整除再判断是否能被4整除。

 var nstr=new Date(); //当前Date

 var ynow=nstr.getFullYear(); //年份

 var mnow=nstr.getMonth(); //月份

 var dnow=nstr.getDate(); //今日日期

 var n1str=new Date(ynow,mnow,1); //当今年本月的第一天Date

 var firstday=n1str.getDay(); //当月第一天星期几，getDay()返回一周中的某一天

 var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数

 var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数

 //打印表格第一行（有星期标志）

 document.write ("<table border='1' align='center' width='220' cellspacing='0'><thead><tr><th colspan='7'>"+"Today is "+ynow+'.'+(mnow+1)+'.'+dnow +"</th></tr></thead><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

 for(i=0;i<tr_str;i++) { //表格的行

    document.write("<tr>");

    for(k=0;k<7;k++) { //表格每行的单元格

       idx=i*7+k; //单元格自然序列号

       date_str=idx-firstday+1; //计算日期

       (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）

       //打印日期：今天底色为红

       date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>");

    }

    document.write("</tr>"); //表格的行结束

 }

 document.write("</table>"); //表格结束

 </script>

 </head>

 <body>

 </body>

 </html>

JavaScript 日历的更多相关文章

  1. 推荐一款JavaScript日历控件：kimsoft-jscalendar

    一.什么是 kimsoft-jscalendar     一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用 二.kimsoft-jscalendar 有什么 ...

  2. javascript日历插件

    原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...

  3. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  4. Javascript 日历插件

    1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点击下载    查看示例 2. DatePicker 这款日期插件支持单选.多选和 ...

  5. 12款优秀的 JavaScript 日历和时间选择控件

    这些插件能够帮助  Web 开发人员更快速的实现各种精美的日历和时间选择效果. 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点 ...

  6. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  7. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

  8. JavaScript日历控件开发

    概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...

  9. JavaScript日历（es5版本）

    近期在知乎上看到这么一个帖子,题主说自己JavaScript都学完了,结果老师留的作业还是不会写,就是写一个日历的插件,结果楼下一堆大牛出现了,百度的阿里的纷纷站出来发表自己的看法,有人认为简单,有人 ...

随机推荐

  1. java 时间操作

    设置获取时间日期格式 // 设置日期格式 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm"); // 为 ...

  2. 【日常笔记】java spring 注解读取文件

    获取后缀文件 <!-- 注解读取properties文件开始 @Value("#{configProperties['userPageSize']}")private Str ...

  3. ActiveMQ_Linux安装(一)

      一.下载:apache-activemq-5.14.0-bin.tar.gz http://activemq.apache.org/activemq-5140-release.html   二.安 ...

  4. Dubbo_创建Dubbo服务并在ZooKeeper注册，然后通过Jar包执行

    一.安装ZooKeeper(略) 二.创建Dubbo服务  1.DemoService 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. PyQt类库介绍

    安装完PyQt后我们去看看这个库里面有些什么cd /usr/lib/python3/dist-packages/PyQt5/  && ls都是些.so的动态链接库,这就是为什么我们在安 ...

  6. nutch-default.xml文件

    Nutch中的所有配置文件都放置在总目录下的conf子文件夹中,最基本的配置文件是conf/nutch-default.xml.这个文件中定义了 Nutch的所有必要设置以及一些默认值,它是不可以被修 ...

  7. C#-面向对象的三大特性——封装（封装成员变量、封装成员方法）

    封装: 封装就是将数据或函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 封装的意义在于保护或者防止代码(数据)被我们无意中破坏. 封装既可以封装成员变量,又可以封装成 ...

  8. Visual Studio 2015正式版/产品密钥

    Visual Studio 2015  发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio  2015 特性简 ...

  9. dede使用方法----调用列表页的分页功能

    分页的标签:<div class="dede_pages"> <ul class="pagelist"> {dede:pagelist ...

  10. perl push an array to hash

    #!/usr/bin/perl use strict; use warnings; use Data::Dumper; my @array=qw /fm1 fm2 fm3 fm4 fm5 fm6/; ...