效果图：

 <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. 开发错误11：Configuration with name ‘default’ not found

    开发错误11:Configuration with name 'default' not found 今天在导入一个sdkdemoapp3.0项目时,发现project build.gradle 与m ...

  2. 在chrome下-webkit-box布局的一个bug

    chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-we ...

  3. 数据库开发基础-SQl Server 聚合函数、数学函数、字符串函数、时间日期函数

    SQL 拥有很多可用于计数和计算的内建函数. 函数的语法 内建 SQL 函数的语法是: SELECT function(列) FROM 表 函数的类型 在 SQL 中,基本的函数类型和种类有若干种.函 ...

  4. bzoj4204: 取球游戏

    好神啊.. 首先递推随便yy一下就行了 然后发现可以用矩阵优化,不过显然是n^3logk的,不资磁 于是就有了性质,这个转移矩阵显然是一个循环矩阵(并不知道) 循环矩阵乘循环矩阵还是循环矩阵 然后就可 ...

  5. Hadoop版本变迁

    内容来自<Hadoop技术内幕:深入解析YARN架构设计与实现原理>第2章:http://book.51cto.com/art/201312/422022.htm Hadoop版本变迁 当 ...

  6. Leetcode 131. Palindrome Partitioning

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  7. 【poj3422】 Kaka's Matrix Travels

    http://poj.org/problem?id=3422 (题目链接) 题意 N*N的方格,每个格子中有一个数,寻找从(1,1)走到(N,N)的K条路径,使得取到的数的和最大. Solution ...

  8. 【poj3615】 Cow Hurdles

    http://poj.org/problem?id=3615 (题目链接) 题意 给出一张有向图,求从u到v最大边最小的路径的最大边.→_→不会说话了.. Solution 好久没写Floyd了,水一 ...

  9. eclipse安装插件的方法（简单、ERMaster插件安装）

    ERMaster插件:https://sourceforge.net/projects/ermaster/ 链接:http://pan.baidu.com/s/1o7UWLMa 密码:wkax 可以编 ...

  10. HDU 1754 I Hate It

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...