JavaScript 日历
效果图:
<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=" " : 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 日历的更多相关文章
- 推荐一款JavaScript日历控件:kimsoft-jscalendar
一.什么是 kimsoft-jscalendar 一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用 二.kimsoft-jscalendar 有什么 ...
- javascript日历插件
原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- Javascript 日历插件
1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点击下载 查看示例 2. DatePicker 这款日期插件支持单选.多选和 ...
- 12款优秀的 JavaScript 日历和时间选择控件
这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果. 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点 ...
- javascript日历控件——纯javascript版
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...
- javascript日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...
- JavaScript日历控件开发
概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...
- JavaScript日历(es5版本)
近期在知乎上看到这么一个帖子,题主说自己JavaScript都学完了,结果老师留的作业还是不会写,就是写一个日历的插件,结果楼下一堆大牛出现了,百度的阿里的纷纷站出来发表自己的看法,有人认为简单,有人 ...
随机推荐
- Java--剑指offer(5)
21.输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对 ...
- SimpleDateFormate的使用
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- [转]oracle设计数据库应选择正确的数据类型
原文地址:http://blog.sina.com.cn/s/blog_5014663501007n40.html 在设计数据库的时候,选择正确的数据类型,往往可以避免很多的问题,正确理解数据库的类型 ...
- 【BZOJ 3672】【UOJ #7】【NOI 2014】购票
http://www.lydsy.com/JudgeOnline/problem.php?id=3672 http://uoj.ac/problem/7 链上的情况可以用斜率优化dp.树上用斜率优化d ...
- HTML5文件系统API和资料整理
来着火狐开发网络的官方文档:点我打开 : W3C的官方文档: 点我打开 : 园友的博客: 点我打开: 浏览器兼容性, 好了就chrome支持, 我刚刚更新的火狐37也不支持, nice, 太nice ...
- C#-面向对象的三大特性——继承
继承 注意事项: 继承语法: 类名:父类名 父类也称之为 基类 ,子类也可以成为 xxx的派生类 或 超类. 父类可以有无限个子类,子类只能有一个父类(亲爹),可以有无限个接口(干爹) 子类并不是 ...
- shell中逻辑与的两种表示方法
bash中表示逻辑与的两种方法: (1)[ $state == "running" -a $name == "zone1" ] (2)[[ $state == ...
- CAlayer层的属性
iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...
- bounds的剖析
bounds的剖析: UIScrollView的常见属性: contentSize:滚动范围,内容的尺寸(CGSize) contentInset :内边距:内容的上左下右的边距(UIEdgeIn ...
- OneThink学习笔记02----数据字典(即OneThink项目数据库里的表及其字段)
action 字段 类型 注释 id int(11) unsigned 自增主键 name char(30) 行为唯一标识 title char(80) 行为说明 remark char(140) 行 ...