js编写当天简单日历效果【实现代码】
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇js编写当天简单日历效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
之前一直很想用javascript写一个日历，但是因为完全没有好的思路， 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子，代码量虽然不大， 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下，收获蛮大，掌握了基本的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！
一.表格行数问题
既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定，所以1号的左边部分，就得用空表格代替了。那么用多少个空表格代替呢，这里就得用到getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。所以如果一个月的1号是星期五的话，那么刚好左边需要5个空表格代替。然后，假如一个月有31天，最后求出的表格行数就是：
var tr_nums = Math.ceil((5 + 31)/7);&
当然，并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天。所以，在创建数组之前，得自己创建一个判断闰年的函数:
//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
然后我们创建一个月份数组:
var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
&这样就能保证无论是平年还是闰年都会取出正确的天数，下面的代码用于获取今天的相关信息:
var today = new Date(),
//获取当前日期
y = today.getFullYear(),
//获取日期中的年份
m = today.getMonth(),
//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
d = today.getDate(),
//获取日期中的日(方便在建立日期表格时高亮显示当天)
firstday = new Date(y, m, 1),
//获取当月的第一天
dayOfWeek = firstday.getDay(),
//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
所以最后就可以获取当月所需表格的行数:
var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
二.打印日历表格
& &表格本身是一个二维数组，所以让for大师出来跑两个循环就搞定啦，代码如下:
for (i = 0; i & str_ i += 1) {
//第一层for循环创建tr标签
document.write('&tr&');
for (k = 0; k & 7; k++) {
//第二层for循环创建td标签
var idx = 7 * i +
//为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1;
//将当月的1号与星期进行匹配
//do something else
document.write('&/tr&');
& 三.附上完整的js日历代码
//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
today = new Date(),
//获取当前日期
y = today.getFullYear(),
//获取日期中的年份
m = today.getMonth(),
//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
d = today.getDate(),
//获取日期中的日(方便在建立日期表格时高亮显示当天)
firstday = new Date(y, m, 1),
//获取当月的第一天
dayOfWeek = firstday.getDay(),
//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
//创建月份数组
str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);
//确定日期表格所需的行数
document.write("&table cellspacing='0'&&tr&&th&日&/th&&th&一&/th&&th&二&/th&&th&三&/th&&th&四&/th&&th&五&/th&&th&六&/th&&/tr&"); //打印表格第一行(显示星期)
for (i = 0; i & str_ i += 1) {
//二维数组创建日期表格
document.write('&tr&');
for (k = 0; k & 7; k++) {
var idx = 7 * i +
//为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1;
//将当月的1号与星期进行匹配
(date &= 0 || date & days_per_month[m]) ? date = '&': date = idx - dayOfWeek + 1;
//索引小于等于0或者大于月份最大值就用空表格代替
date == d ? document.write('&td class="today"&' + date + '&/td&') : document.write('&td&' + date + '&/td&');
//高亮显示当天
document.write('&/tr&');
document.write('&/table&');
css部分大家就自由发挥吧，当前时间是号，效果图如下:
以上这篇js编写当天简单日历效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具第四课 如何开发一个万年历－－－上篇 - yusoohay的专栏 - CSDN博客
第四课 如何开发一个万年历－－－上篇
Python教程
第四课 如何开发一个万年历－－－－上篇
& & & & 万年历程序是个有效的体验项目，它包含了程序开发所需要的技术和方法，甚至体现了很多软件工程的内容，项目要求输入某年、某月的整型数字，输出那年那月的月历，例如输入 2015 年 5月，项目应该打印正确的包含星期的月历。
& & & & &万年历项目包括了开发程序的所有基本语法内容（除了自定义数据），这对掌握基本语法很有益，另外重要的是万年历项目的开发方法，见过许多人学和用这个例程，但是用明白的不多，嘿嘿，招式可以学，吐纳呼吸的方法没人讲那是不容易学得会的呀。还有一个项目和万年历一样，但稍微高阶一些，本节课的后面会稍微讲解一下关键，然后让大家自己实践，那就是一个扑克游戏“二十一点”。是否掌握了在一个操作系统上编程的方法或者是否掌握了一门语言，那么尝试写一个万年历和一个二十一点游戏吧。
本项目涉及的知识有：
1、变量定义
2、输入与格式化输出
4、关系运算逻辑运算
5、集合：列表
6、程序流程：分支与循环
7、多文件机制
& & & & 编程只有目标没有思路，这句话是我说的，但是漫漫开发路上总要给自己设立几个路标，就如同有个著名马拉松运动员说的那样，把漫漫长路分成几个可以达到的目标很有助于树立信心。
& & & &&编程如雕塑，不象书法，“一蹴而就”基本不可能，开发就是设立一个大体目标，分解成阶段目标，然后修修补补，咋看起来，如何开发万年历程序是个“不摸门”的事，但是还是有几个可以达到的目标的：万年历程序开发的过程大约设定为5步，
第一阶段：形式月历,目标是输出一个“死的”月历
第二阶段：输入年月，确定每月应该输出多少天？
第三阶段：确定月历中的一号是星期几，然后输出月历
第四阶段：打印当年的任意月历（年历）
第五阶段：由你完成万年历
& & & &&第一阶段是项目完成的大致形式，但是没有任何逻辑，全部用打印完成，所以比较容易。以后每阶段都在以前的基础上前进了一小步，但每一阶段都是完整的，每一阶段都有一个另开发者感兴趣的结果。这就是软件开发中的“迭代增量”。开发这个项目时千万不要找个完整的万年历程序试图“读懂”，根本没有意义，一定要尝试并体会项目“生长”的过程。
& & & & 下面就来开发第一阶段，你会发现，即使是一个阶段目标，也会有两三次迭代
第一阶段：形式月历,目标是输出一个“死的”月历，如下图
& & & &&我想先打印这样一个“样子”不难吧：关键在于需要将所有输出内容组成一个“字符串”
& & & &&于是就先写了个这个例程1-1：
out_str= && SUN& & MON& & TUE& & WEN& & THU& & FRI& & SAT& &
for i in range(1,31):
out_str=out_str+`i`
print out_str
结果打印成这样：
& & & &&所有30天的数字挤在一起了，想一想，应该插入一些空格，然后逢7插入一个“回车”，这里的难点是利用好第一个被整除的数字：“0”
于是程序变成了这样，例程1-2：
out_str= && SUN& & MON& & TUE& & WEN& & THU& & FRI& & SAT& &
for i in range(32):
& & if i%7==0:
& & & & out_str=out_str+'\n & '+`i+1`
& & & & out_str=out_str +& & &+`i+1`
print out_str
运行发现，输出变成了这样：
& & & &&很接近目标了，只是输出无法对齐，
& & & &&依靠程序中字符串加入的空格是很难“对齐”的，这时候就用上“字符串的格式化输出了”，代码如例程1-3:
out_str= && SUN& & MON& & TUE& & WEN& & THU& & FRI& & SAT& &
for i in range(31):
& & if i%7==0:
& & & & out_str=out_str+'\n{:^7d}'.format(i+1)
& & & & out_str=out_str +'{:^7d}'.format(i+1)
print out_str
运行结果如下图
字符串的格式化输出需要了解的要点
1）格式：字符串.format( 表达式 )
2）字符串中加如形如｛:^nd｝的格式控制符，用以控制format中表达式的输出形式
3）常用格式控制符有：｛:^m.nd｝用来输出整形，n代表输出所占字符列数；｛:^m.nf｝用来输出浮点型，m代表输出所占字符列数，n代表小数点部分的位数。
4）若指定输出的字符列数大于实际输出，则输出空格占位；若实际输出字符数大于指定，则按实际输出。
至此，第一阶段完成了！
& & & &&第二阶段：输入年月，确定每月应该输出多少天？
每月输出多少天是由年和月共同决定的，比如闰年的2月就该输出29天
所以第二阶段的第一步比较简单，把原来循环里那个固定值“31”变成一个变量，所以程序变成了例程2-1的样子：
例程2-1源文件和运行的结果
& & & &&在例程2-1的第5行，增加了变量days_i_m，在第7行它代替31控制了“打印天数”，那么，只要控制days_i_m就能控制“打印天数”了，在实际用应用中这个”打印天数“应该和月关联。于是，代码变成了例程2-2所示：
& & & & 注意例程2-2的 12到17行 利用一系列的if elif和else 确定了输入的month和打印天数的关系，但是这个结构不够巧妙，资深程序员的经常考虑的问题就是减少程序中的if，特别是象“排比”一样的if使人眼晕。
& & & && 有一句名言：程序＝算法＋数据结构，这句话固然说明了程序由算法和数据结构组成，另外更关键的含义是算法和数据结构之间是“和的关系”，这意味着：数据结构恰当，算法就可以简单一些。所以我们可以把每个月的天数组织起来放入一个元组（数据不可变的列表）中：
days_month=(0,31,28,31,30,31,30,31,31,30,31,30,31)，由于元组的下标从0开始，而月份从1开始，所以在元组的0元素位置使用0占个位置，这样打印天数就简单地变为：
days_month[month]了，省略了一大堆if，其实只要计算得当，内存充裕，任何一个程序的任何一个if都是可以被优化的（为什么和if有那么大“仇恨”？那是因为if占用资源较多）。
例程2-2还有一个不妥之处，那就是对“闰年2月”没做处理，另外如果能把一些判断和求值都“工具画”就好了，于是想写两个函数，一个判断是否是闰年is_leap_year，另一个求输入的月份有多少天 days_in_month，为了使源文件结构更清晰，应该把工具性的函数都放到另一个新的源文件中去，这样还可以利于今后的复用，于是例程2-3的两个源文件如下：
& & & & 例程2-3包含两个函数的工具包文件： can_2_3_tool.py，这个文件包含了两个函数，其中is_leap_year用来计算输入的年份是否是闰年，第7行定义了常规每月包含天数的序列，第10行是闰年的判断条件，从第11行和13行得知若参数y是闰年函数将返回True否则返回False；函数days_in_month的用途是根据参数y（代表year），m（代表month）来计算指定的月份应该有（打印）多少天，之所以计算每月的天数时需要参数y，那是因为需要考虑一个特例：闰年的2月有29天。在days_in_month函数中调用了is_leap_year来确定输入的年份是否是闰年。
& & & & 由于使用了函数，calendar2_3的主要源程序文件就变得比较简洁易懂了，第2行，利用from和import引入can_2_3_tool.py中的函数，第7，8行输入了年和月，第17行直接利用函数days_in_month计算出了每月需要打印多少天，并赋值给print_days，应该注意到了，程序的第15行定义了一个变量wd，这个变量的将用来控制每月1日打印位置（或者说每月1日对应周几？），现在我们把它赋初值为0，并且不改变它，那么程序像以前一样打印并没有变化，后面就是顺理成章了。
& & & &&程序运行的结果如下：
结果表明第二阶段也成功了。
相关文章推荐1975年是平年还是闰年？
1975年是平年还是闰年？
　　问：1975年是平年还是闰年?1975年是闰年吗?
　　答：1975年是平年，判定公历闰年遵循的一般规律为: 四年一闰,百年不闰,四百年再闰
　　能被4或400整除的是闰年 。闰年是每年的二月份都有29天，而平年是28天。
　　1975年为农历乙卯年，生肖属兔，五行属木，纳音&大溪水&。 兔子是仁爱、举止文雅、善劝告、和蔼及爱美的标志。属兔人温顺的言辞和慈悲害怕的生活方法，体现出一个成功的交际家和饱经沧桑的政治家的全部思维质量。兔年出世的人喜爱平和、安静和惬意的环境。属兔人很含蓄，爱艺术并具有很强的判断力。属兔人那有头有尾的精力会使你变成一个很好的专家。属兔人不是令人败兴的或总盯着他人举动的纪律监察员。属兔人知道什么时候应忍让，从不喜爱在公共场所拥抱任何人。属兔人精于保全体面的艺术，统筹两边的体面，假如有方法不使他人尴尬，属兔人一定会去做。毫无疑问，属兔人会把他人的过错和前进看在眼里，假如不是严峻或不可救药，属兔人会宽恕他人。
　　属兔五行对应的出生年份：
　　五行是木的属兔()
　　木兔的主人聪明伶俐，并且长于出鬼主见，表面上给人一种活泼开朗的感觉，但本来心里心胸颇深，对小事也比较计较。木兔人喜爱热烈，安静会使他们感觉到孤单，对待感情通常非常固执，一旦得不到心中所爱，会长时刻留下痛苦暗影。
　　五行是火的属兔()
　　火兔的人心胸宽广，有容人之量，并且聪明机巧，干事仔细，是当领导的好资料。火兔的主人遇到意想不到的资金阻滞的状况，或许面临出人意料的开销时，必定不要惊慌意乱，手足无措，最佳去购置一些不动产或许保值的东西。
　　五行是金的属兔()
　　金兔的人怕孤寂，希望有良好的人际关系。特性仁慈不喜爱与人恶性竞争，性格开朗、热情、仁慈。金兔的主人在工作方面，大概默默工作，抱着&只问耕耘，不问收成&的情绪去干事。
　　五行是水的属兔()
　　水兔特性柔顺温和，但具有耐性，可以习惯不同的环境，懂得充沛体现自个，但缺陷是原则性不强，易受人影响。别的，水兔颇能随遇而安，但也即是因为这个缘由，水兔处世也比较被迫和消沉，好闲适，寻求吃苦，干事得过且过，不愿竭尽全力，没有紧迫感。
　　五行是土的属兔()
　　土兔雄心壮志，志在千里，颇具衡量，有创业精神。土兔的你心高气傲，愿望心强，通常在获利后变得得寸进尺，不知见好就收。如能遵从他人的劝说，懂得在恰当的时刻引退，则早年所得的产业都能保留下来。
------分隔线----------------------------