在线实例:http://lgy.1zwq.com/calendar/

按照我们常用的日历格式,是7*6的格子,所以生成格子的总数就确定为42

例子:(如:2013年8月,这个时间为例子)

/*----------生成日历格子:

-----------------------------------------------------*/

(1)获取本月的第一天是星期几--(为第三步做铺垫)

/*--注意:传递的月份是7,而不是8
------------------------------------*/
var first_day = new Date(2013,7,1).getDay();

  (2)获取本月的最后一天是几号

var final_date = new Date(2013,8,0).getDate(); //下个月的0号,就是返回本月份最后一天的date 

  (3)上个月,在本月份显示的天数

这里我是用循环判断输出的,判断的依据就是 first_day(值为4),上个月的最后一天是几号,就是 new Date(2013,7,0).getDate()(值为31),然后就可以循环输出

for(){.........}

  (4)下个月,在本月份后面显示的天数

var surplus = 42 - first_day - final_date;  // 42-4-31 = 7;
//剩下的和第三步一样,也是循环输出

/*-------填充日历总代码:

-----------------------------------------------------------*/

/*这里,写成传参数,为切换事件铺垫
-------------------*/
fillDate:function(year,month){
     //本月份第一天是星期几 -为上个月的显示天数做铺垫
var first_day = new Date(year,month,1).getDay(),
//本月份最后一天是几号
final_date = new Date(year,month+1,0).getDate(),
//上个月的最后一天是几号
last_date = new Date(year,month,0).getDate(),
//剩余的格子数--即排在后面的格子数
surplus = 42 - first_day - final_date;
/*填充日历执行
---------------------------*/
var html = '';
//上个月的显示天数
for(var i=0;i<first_day;i++){
html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
}
//本月的显示天数
for(var j=0;j<final_date;j++){
html+='<span>'+(j+1)+'</span>';
}
//下个月的显示天数
for(var k=0;k<surplus;k++){
html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
}
//fill
this.oBody.innerHTML = html;
}

 /*------------全部源代码--------------

----------------------------------------------------*/

function LGY_calendar(option){
this.oWrap = this.getId(option.wrapId);
this.oHead = this.getByClassName('g-calendar-hd',this.oWrap)[0];
this.oBody = this.getByClassName('g-calendar-bd',this.oWrap)[0];
this.oTit = this.getByClassName('g-calendar-tit',this.oWrap)[0];
this.oPrev = this.getByClassName('g-calendar-prev',this.oWrap)[0];
this.oNext = this.getByClassName('g-calendar-next',this.oWrap)[0];
this.init();
}
LGY_calendar.prototype = {
///////////获取ID元素
getId:function(id){
return document.getElementById(id);
},
////////获取css类名元素
getByClassName:function(className,parent){
var elem = [],
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
p = new RegExp("(^|\\s)"+className+"(\\s|$)");
for(var n=0,i=node.length;n<i;n++){
if(p.test(node[n].className)){
elem.push(node[n]);
}
}
return elem;
},
//填充日历
fillDate:function(year,month){
//本月份第一天是星期几-为显示上个月的天数做铺垫
var first_day = new Date(year,month,1).getDay(),
//如果刚好是星期天,则空出一行(显示上个月的天数)
first_day = first_day == 0?first_day=7:first_day;
//本月份最后一天是几号
final_date = new Date(year,month+1,0).getDate(),
//上个月的最后一天是几号
last_date = new Date(year,month,0).getDate(),
//剩余的格子数--即排在末尾的格子数
surplus = 42 - first_day - final_date;
/*设置表头的日历
---------------------------*/
this.oHead.innerHTML = year+'年'+(month+1)+'月';
/*填充日历执行
---------------------------*/
var html = '';
//上个月的显示天数
for(var i=0;i<first_day;i++){
html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
}
//本月的显示天数
for(var j=0;j<final_date;j++){
html+='<span>'+(j+1)+'</span>';
}
//下个月的显示天数
for(var k=0;k<surplus;k++){
html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
}
//fill
this.oBody.innerHTML = html;
// 当前状态
if(year==this.c_year&&this.c_month==month){
this.oBody.getElementsByTagName('span')[first_day+this.date-1].className='g-calendar-on';
}
},
// next切换
next:function(){
var _that = this;
this.oNext.onclick = function(){
_that.month++;
if(_that.month>11){
_that.month = 0;
_that.year++;
}
// 填充日历
_that.fillDate(_that.year,_that.month);
} },
// prev切换
prev:function(){
var _that = this;
this.oPrev.onclick = function(){
_that.month--;
if(_that.month<0){
_that.month = 11;
_that.year--;
}
// 填充日历
_that.fillDate(_that.year,_that.month);
} },
init:function(){
this.oTit.innerHTML = '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>';
// 获取今天的日历时间
var now = new Date();
this.c_year = this.year = now.getFullYear();
this.c_month = this.month = now.getMonth();
this.date = now.getDate();
// 初始化--填充日历
this.fillDate(this.year,this.month);
//next切换
this.next();
//prev切换
this.prev();
}
}

原生javascript-日历插件编写的更多相关文章

  1. javascript日历插件

    原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...

  2. Javascript 日历插件

    1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点击下载    查看示例 2. DatePicker 这款日期插件支持单选.多选和 ...

  3. 11个顶级 JavaScript 日历插件

    参考链接:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247487050&idx=1&sn=e1cf66726 ...

  4. 完全原生javascript简约日历插件,js、html

    效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...

  5. 原生js日历选择器,学习js面向对象开发日历插件

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  6. 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  7. 一个基于原生JavaScript开发的、轻量的验证码生成插件

    Vcode.js 一个基于原生JavaScript开发的.轻量的验证码生成插件 V: 1.0.0 DEMO:https://jofunliang.github.io/Vcode.js/example. ...

  8. canvas :原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  9. 原生 Javascript 编写五子棋

    原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...

随机推荐

  1. H5端js实现图片放大滑动查看-插件photoswipe的使用

    最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...

  2. Linux系统——vim编辑器

    一.Linux系统中最常用的文本编辑器 vi:类Unix系统中默认的文本编辑器 vim:vi编辑器的增强版 作用:创建或修改文本文件:维护Linux系统中各种配置文件 二.三种切换模式命令模式输入模式 ...

  3. PKU 2506 Tiling(递推+高精度||string应用)

    题目大意:原题链接有2×1和2×2两种规格的地板,现要拼2×n的形状,共有多少种情况,首先要做这道题目要先对递推有一定的了解.解题思路:1.假设我们已经铺好了2×(n-1)的情形,则要铺到2×n则只能 ...

  4. Stitching模块中对特征提取的封装解析(以ORB特性为例)

    titching模块中对特征提取的封装解析(以ORB特性为例)     OpenCV中Stitching模块(图像拼接模块)的拼接过程可以用PipeLine来进行描述,是一个比较复杂的过程.在这个过程 ...

  5. 20145310 《Java程序设计》第2周学习总结

    20145310 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要学习了java的基础语法. java中的基本类型主要可区分为,整数.字节.浮点数.字符与布尔.整数shor ...

  6. rhel7配置samba_4.7.1,共享给所有人以及共享给指定用户

    1.共享给所有人 服务端配置: yum  -y install samba samba-client samba-common       #安装客户端 mkdir /guest #创建共享文件夹 c ...

  7. 迟到的thuwc&noiwc2018总结

    已经4个多月没写博客了呢. thuwc和noiwc都炸了,接下来的一段时间都没怎么写题,靠文化课和游戏麻醉自己.这篇博客也算是向之前自闭.颓废的自己告别吧.. 先写一发游记: thuwc:Day1炸, ...

  8. Nginx+vsftpd搭建图片服务器

    安装Nginx 参考:http://www.cnblogs.com/idefav2010/p/nginx-concat.html Nginx配置文件 location ~ .*\.(gif|jpg|j ...

  9. Mac与Widow下编译与运行java文件引入多个外部jar包

    记录下,以后万一用得着呢 1.MAC环境下: 前提:在终端跳转到当前的源文件目录(cd xx), 并且配置好jdk,这里面不是重点 编译命令:注意连接用  :  号 javac -cp commons ...

  10. vue的seo方案 prerender-seo-plugin

    利用vue cli 3.0安装脚手架.记住:勾选vue-router. 在vue.config.js里添加配置: 2, var path = require('path') 3, const Prer ...