效果图：

 <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. 【CodeVS 5032】【省队集训2016 Day5 T1】Play with array

    一开始我用分块大法,分成$\sqrt{n}$块,每个块上维护一个Splay,然后balabala维护一下,时间复杂度是$O(n\sqrt{n}logn)$.后来对拍的时候发现比$O(n^2)$的暴力跑 ...

  2. Java类加载器总结

    1.类的加载过程   JVM将类加载过程分为三个步骤:装载(Load),链接(Link)和初始化(Initialize)链接又分为三个步骤,如下图所示: 1) 装载:查找并加载类的二进制数据: 2)链 ...

  3. asp.net mvc 数据查询赋值到文本框中

    大家做了很多文本框查询并且赋值回来 1.先是把数据对象查询结果后台,然后把对象赋值给对象在赋值回来前台页面 2.使用@html helerper 数据查询,使用 ViewContext.RouteDa ...

  4. NPOI导出模板样式

    /// <summary> /// 导出多种车辆统计表格 /// </summary> /// <returns></returns> [ActionN ...

  5. for循环 打印菱形 空 和 实

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><?ph ...

  6. 简进祥--iOS开发基础知识

    1:App跳转至系统Settings 跳转在IOS8以上跟以下是有区别的,如果是IOS8以上可以如下设置: NSURL *url = [NSURL URLWithString:UIApplicatio ...

  7. url 字符串中的参数信息

    /// <summary>        /// 分析 url 字符串中的参数信息        /// </summary>        /// <param nam ...

  8. Pycharm设置

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...

  9. Hive 窗口函数、分析函数

    1 分析函数:用于等级.百分点.n分片等 Ntile 是Hive很强大的一个分析函数. 可以看成是:它把有序的数据集合 平均分配 到 指定的数量(num)个桶中, 将桶号分配给每一行.如果不能平均分配 ...

  10. 【BZOJ-1507】Editor 块状链表

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 3397  Solved: 1360[Submit][Stat ...