js 面向对象 模拟日历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding:0;
margin:0;
} #calendar {
width:408px;
height:370px;
/*border:1px solid #57abff;*/
margin:100px auto;
}
#calendar .inputBox {
width:200px;
height:25px;
margin:2px;
}
#calendar .dataBox {
display:none; } #calendar select {
height:25px;
} #calendar .selectMonth {
width:60px;
}
#calendar .selectYear {
width:100px;
} #calendar .selectMonth {
width:60px;
} #calendar .dataBox table {
width:100%;
height:308px;
text-align:center;
margin-top:6px;
border-top:1px solid #57abff;
}
#calendar .dataBox table tr:first-child{
height:12%;
} #calendar .dataBox table,#calendar .dataBox th,#calendar .dataBox td {
border-collapse:collapse;
border-bottom:1px solid #ccc;
} /*#calendar .dataBox table .current{
border:2px solid red;
}*/ #calendar .dataBox table .current{
background-color:#FF9966;
} #calendar .dataBox table .notCurMonth{
color:#ccc;
} </style> </head>
<body>
<div id="calendar">
<!-- <input type="text" class="inputBox">
<div class="dataBox">
<select name="" id="" class="selectYear">
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<select name="" id="" class="selectMonth">
<option value="1">1</option>
<option value="2">2</option>
</select>
<table>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
<tr>
<td class="current"><a href="">1</a></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="current">7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div> -->
</div>
<script src="js/calendar.js"></script>
<script type="text/javascript">
new Calendar({
"id":"calendar"
});
</script>>
</body>
</html>
(function(){
window.Calendar = Calendar;
function Calendar(JSON){
this.inputBox = null;
this.calendarDiv = null; /*存放日历的容器*/
this.selectYear = null;
this.selectMonth = null;
this.tds = null;
this.curYear = null;
this.curMonth =null;
this.curDate = null;
this.dom = null;
/*初始框架*/
this.init(JSON);
/*获取日期*/
this.getData();
this.bindEvent();
}
Calendar.prototype.init = function(Json){
/*初始化当前的日期*/
this.curYear = new Date().getFullYear();
this.curMonth = new Date().getMonth()+1;
this.curDate = new Date().getDate();
/*框架的渲染*/
this.dom = document.getElementById(Json["id"]);
/*创建输入框 上dom树*/
this.inputBox = document.createElement('input');
this.inputBox.className = 'inputBox';
this.dom.appendChild(this.inputBox);
this.calendarDiv = document.createElement('div');
this.calendarDiv.className = 'dataBox';
this.dom.appendChild(this.calendarDiv);
this.selectYear = document.createElement('select');
this.selectYear.className='selectYear';
for(var i=1990;i<2024;i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
this.selectYear.appendChild(option);
}
this.calendarDiv.appendChild(this.selectYear);
this.selectMonth = document.createElement('select');
this.selectMonth.className = 'selectMonth';
for(var i=1;i<13;i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
this.selectMonth.appendChild(option);
}
this.calendarDiv.appendChild(this.selectMonth);
/*创建 table */
var table = document.createElement('table');
var tr = document.createElement('tr');
var week = ["一","二","三","四","五","六","日"];
for(var i=0;i<7;i++){
var th = document.createElement('th');
th.innerHTML = week[i];
tr.appendChild(th);
}
table.appendChild(tr);
for(var i=0;i<6;i++){
var tr = document.createElement('tr');
for(var j=0;j<7;j++){
var td = document.createElement('td');
//td.innerHTML = 1;
tr.appendChild(td);
}
table.appendChild(tr);
}
this.calendarDiv.appendChild(table);
this.tds = document.getElementsByTagName('td');
};
/*渲染日期*/
Calendar.prototype.getData = function(){
this.curDate = this.curDate?this.curDate:1;
var date = new Date(this.curYear,this.curMonth-1,1);
//当月第一天是星期几
this.curMonthFirstDay = date.getDay();
//当月一共有多少天
this.curMonthFirstDay = this.curMonthFirstDay?this.curMonthFirstDay:7;
this.curMonthDays = new Date(new Date(this.curYear,this.curMonth,1)-1).getDate();
//上月最后一天是几号
this.lastMonthLastDate = new Date(date-1).getDate();
var lastMonthValue = this.lastMonthLastDate;
//console.log("cur.curMonthFirstDay:",this.curMonthFirstDay,"cur.curMonthDays:",this.curMonthDays);
//渲染上月的
for(var i = this.curMonthFirstDay-2; i>=0; i--){
this.tds[i].innerHTML = lastMonthValue;
this.tds[i].className = 'notCurMonth';
lastMonthValue--;
}
//渲染当月的
for(var i = this.curMonthFirstDay-1; i<(this.curMonthDays+this.curMonthFirstDay-1);i++){
this.tds[i].innerHTML = (i-(this.curMonthFirstDay-1))+1;
this.tds[i].className = '';
}
//渲染下月的
for(i = this.curMonthFirstDay+this.curMonthDays-1;i<42;i++){
this.tds[i].innerHTML = (i-(this.curMonthFirstDay+this.curMonthDays-1))+1;
this.tds[i].className = 'notCurMonth';
}
/*获取当天的*/
var curentdate = new Date(this.curYear,this.curMonth-1,this.curDate).getDate();
var index = this.curMonthFirstDay+curentdate-2;
this.tds[index].className = 'current';
this.selectYear.value = this.curYear;
this.selectMonth.value = this.curMonth; //这里就是需要写option value
this.inputBox.value = this.curYear+"-"+this.curMonth+"-"+this.curDate;
};
/*绑定事件*/
Calendar.prototype.bindEvent = function(){
this.curDate = 1;
var _this = this;
this.selectYear.onchange = function(){
_this.curYear = _this.selectYear.value;
_this.getData(); /*重绘日期*/
}
this.selectMonth.onchange = function(){
_this.curMonth = _this.selectMonth.value;
_this.getData(); /*重绘日期*/
}
this.inputBox.onkeyup = function(event){
var event = window.event || event;
if(event.keyCode == 13){
var inputVlaueStr = _this.inputBox.value;
//console.log("inputVlaue:",inputVlaueStr);
var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/g; //记得括号
if(!inputVlaueStr.match(reg)){
alert("date input is error!");
return;
}
var inputVlaueArr = inputVlaueStr.split('-');
_this.curYear = inputVlaueArr[0];
_this.curMonth = inputVlaueArr[1];
_this.curDate = inputVlaueArr[2];
_this.getData();
}
};
/*实现calendarDiv 开始隐藏，鼠标聚焦到inputBox上在显示出来*/
this.inputBox.onfocus = function(){
_this.dom.style.border = '1px solid #57abff';
_this.calendarDiv.style.display = 'block';
};
/*实现鼠标点击文档空白处div隐藏*/
document.addEventListener("click",function(event){
var event = window.event || event;
if(event.target != _this.inputBox && event.target != _this.selectYear
&& event.target != _this.selectMonth && event.target.nodeName != 'TH' && event.target.nodeName != 'TD' && event.target != _this.calendarDiv && event.target != _this.dom){
_this.dom.style.border = 'none';
_this.calendarDiv.style.display = 'none';
}
});
/*点击上月和下月的日期能够跳转到对应的月*/
for(var i=0;i<this.tds.length;i++){
(function(m){
_this.tds[m].onclick = function(){
if(m < _this.curMonthFirstDay-1){
_this.curMonth = _this.curMonth-1;
if(_this.curMonth < 1){
_this.curMonth = 12;
_this.curYear = _this.curYear-1;
}
_this.getData();
}else if(m >= (_this.curMonthFirstDay+_this.curMonthDays-1)){
_this.curMonth = _this.curMonth+1;
if(_this.curMonth > 12){
_this.curMonth = 1;
_this.curYear = _this.curYear+1;
}
_this.getData();
}
}
})(i);
}
};
})();
js 面向对象 模拟日历的更多相关文章
- 原生js日历选择器，学习js面向对象开发日历插件
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js面向对象继承
前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- JS面向对象之工厂模式
js面向对象 什么是对象 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来 ...
- js面向对象设计之function类
本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...
- 初识JavaScriptOOP（js面向对象）
初识JavaScriptOOP(js面向对象) Javascript是一种基于对象(object-based)的语言, 你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言 ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- JavaWeb防注入知识点（一）
一.防sql注入办法 在apache commons-lang(2.3以上版本)中为我们提供了一个方便做转义的工具类,主要是为了防止sql注入,xss注入攻击的功能.总共提供了以下几个方法: 1.es ...
- [LC] 84. Largest Rectangle in Histogram
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- spring security梳理
核心服务:AuthenticationManager,UserDetailsService和AccessDecisionManager The AuthenticationManager, Provi ...
- android greendao的外部封装不太友好。
https://github.com/greenrobot/greenDAO 下载下官网的示例,有完整的封装版本,但自已封装是碰到很多问题. 因greenDao的Master和Session中很多方法 ...
- Android开发之《USB Camera》
SimpleWebCam Source Code:https://bitbucket.org/neuralassembly/simplewebcam/src 1. USB摄像头UVC兼容(如今大部分兼 ...
- C\C++ 位域操作
几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存对齐全攻略–涉及位域的内存 ...
- 吴裕雄--天生自然 R语言开发学习：聚类分析（续一）
#-------------------------------------------------------# # R in Action (2nd ed): Chapter 16 # # Clu ...
- R语言的xtabs函数
今天在做一个列联表独立性检验的时候,总是无法处理好要求的数据类型,偶然的机会,看到了xtabs()函数,感觉很适合用来做列联表,适合将一列数据转换成列联表. shifou <- c(" ...
- TCP/IP 协议栈初识
原文:深入浅出 TCP/IP 协议栈 0. 简介 TCP/IP 协议栈是网络通信中一系列网络协议的综合,是核心骨架.它定义了电子设备接入因特网.以及数据在它们之间的传输方式,是一份标准.TCP/IP ...
- Eclipse快速入门：远程调试Java应用
Eclipse快速入门:远程调试Java应用 2012年03月27日00:00 it168网站原创 作者:皮丽华 编辑:皮丽华 我要评论(0) 标签: Eclipse , Java , Java框架, ...