效果图：

 <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. extJs学习基础

    显示和隐藏 所有的组件都是在show和hide方法中构造的.用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了: Ext.onReady(fun ...

  2. Jenkins_多项目构建(二)：使用Maven聚集关系

        一.假设有四个Maven项目 1.soa-dub-parent:父项目 1 2 3 4 5 <modules>         <module>../soa-dub-f ...

  3. 稻壳图文模块调不出html代码

    <?php doc_article('1',20,0,0,0,266,true,true,'id',0)?> 图文调用,倒数第三个参数,官方说是是否显示html代码,但是实测是没用的,不过 ...

  4. 51nod 1007 正整数分组

    将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个数N,N为正整数的数量 ...

  5. SpringMVC 部署项目静态资源文件访问问题

    问题:采用SpringMVC 部署项目后程序加载或用浏览器访问时出现类似的警告,2011-01-19 10:52:51,646 WARN [org.springframework.web.servle ...

  6. Android Loader使用详解

    1.CursorLoader使用Demo public class MainActivity extends Activity implements  LoaderManager.LoaderCall ...

  7. 怎么学习AOPR使用方法

    Advanced Office Password Recovery作为一款专业级别的Office密码破解工具,对十几种office文档的密码都可以有效的破解.一些用户朋友才开始接触Advanced O ...

  8. Web 安全：隐藏服务版本号

    前述 为了防止一些恶意用户对 apache.nginx.php 等显示出来的版本信息进行攻击,生产环境需要关闭 web 服务的版本信息: apache 隐藏版本号 修改 httpd.conf,添加如下 ...

  9. java的重写规则

    重写不能破坏父类的访问性和逻辑结构性.对于异常重写方法不能抛出新的异常或者比被重写方法声明的检查异常更广的检查异常.但是可以抛出更少,更有限或者不抛出异常. 重写规则之一:重写方法不能比被重写方法限制 ...

  10. jquery datatable

    <html><head></head> <script type="text/javascript"> $(document).re ...