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面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码
Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...
- 20180105关于课题所用的labview的改进随笔
在原有的工程上1.写入60个不同的数字~顶层,看测量次数是1.2.3.4.5.6.7.8.9的时候文件记到几次的数,一次的话,从接受命令到全部写到文件最短需要等多久.写入固定的数,通过startfla ...
- php--0与空的判断
使用empty()函数判断,两者都是true $a=0; if(trim($a)=="") { echo '数字0'; }
- iPhoneSE2要在印度独家生产真得没戏？
现在,关于iPhone SE2的消息层出不穷,总的来说,它是一款真实存在的手机,整体性能和iPhone5X/SE相似,大概可能差不多会加上一些"无线充电"之类的无聊功能.普通消费者 ...
- 为何印度打车软件Ola，也难逃“资本合并”命运？
从全球市场来看,共享经济已经引发了多场具有颠覆性的风暴.尤其是在与大众关系紧密的衣食住行方面,诞生了具有强势影响力的独角兽企业.如,共享打车企业Uber.共享房屋出租企业Airbnb等.而鉴于每个国家 ...
- C++求解N阶幻方
由一道数学题的联想然后根据网上的做法瞎jb乱打了一下,居然对了代码精心附上了注释,有兴趣的童鞋可以看一看..不说了,上代码!(自认为结构很清晰易懂) 1234567891011121314151617 ...
- JNI 问题 wrong ELF class
使用JNI发现一个问题, wrong ELF class: ELFCLASS64)主要是机器是64位的OS,默认编译的.so是64位 而java设置的默认是32位 JDK, 所以会出现这个问题.那么就 ...
- Mac 下配置 adb 环境
使用 adb 命令可以很直接的观察你的应用 第一步 打开终端,敲入命令:sudo vi .bash_profile(如果有密码就为本机登录密码, 如果没有这个文件就会创建一个新的). 第二步 在文件中 ...
- SQL注入攻击浅谈
原理 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有细致地过滤用户输入的数据 ...
- 设计模式-09装饰模式(Decorator Pattern)
1.模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制:使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是 ...