js,日历
web前端-js教程
之前一直很想用javascript写一个日历，但是因为完全没有好的思路， 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子，代码量虽然不大， 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下，收获蛮大，掌握了基本的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！html客服源码,svn使用教程vscode,ubuntu系统的,tomcat 图片和视频,安卓面试题sqlite,爬虫怎么选择云服务器端口,vim php mac,长乐区专业seo推广,竞猜网站源代码,emlog模板lzw
一.表格行数问题android变声器源码,ubuntu安装教程上网,爬虫沉木造景,学php和php,阳江网络seolzw
既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定，所以1号的左边部分，就得用空表格代替了。那么用多少个空表格代替呢，这里就得用到getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。所以如果一个月的1号是星期五的话，那么刚好左边需要5个空表格代替。然后，假如一个月有31天，最后求出的表格行数就是：导航首页源码,vscode背景主题设置,ubuntu 安装nero,苹果tomcat怎么下载,gui爬虫,php 时间 精确到毫秒,江苏seo排名技术公司,js网站源代码,自适应手机模板检测 源码lzw
var tr_nums = Math.ceil((5 + 31)/7); 当然，并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天。所以，在创建数组之前，得自己创建一个判断闰年的函数:
//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0function 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_nums; i += 1) { //第一层for循环创建tr标签 document.write(''); for (k = 0; k < 7; k++) { //第二层for循环创建td标签 var idx = 7 * i + k; //为每个表格创建索引,从0开始 var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配 //do something else } document.write(' '); } 三.附上完整的js日历代码 //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天) function isLeap(year) { return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0; } var i, k, 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("| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
| ' + date + ' | ') : document.write('' + date + ' | '); //高亮显示当天 } document.write('