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面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- WebFilter 在springBoot工程中不起作用
[1]@ServletComponentScan 必须有一个注解将带有@WebFilter的类包含进去. [2]自定义 FiltersConfig extends WebMvcConfigurerAd ...
- 吴裕雄--天生自然HTML学习笔记：HTML 简介
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- python 组件
组件:JQueryUI.EasyUI.BootStrap 每一个框架都要学习它们的规则.
- function_exists (),method_exists()与is_callable()的区别
is_callable()函数要高级一些,它接受字符串变量形式的方法名作为 第一个参数,如果类方法存在并且可以调用,则返回true.如果要检测类中的方法是否能被调用,可以给函数传递一个数组而不是类的方 ...
- Java Servlet XML文件配置
- 配置Maven本地仓库
以本机为例: 系统:Windows 开发工具:IDEA 如果想在dos窗口输mvn命令,需配置环境变量. 1. 在D盘新建repository文件夹,该目录用作maven的本地库. 2. 打开D:\P ...
- 关于JavaScript中bind、applay、call的区别
在JavaScript中this的指向一直是一个困扰我们的问题,在JavaScript中this的指向是不固定的,但是我们可以通过使用bind().call().apply()来改变this的指向,但 ...
- js怎么获取动态链式属性呢？
动态链式属性?我自己起的名字,样子就是 var data={ list:{ name:'zxf' } }var prop="list.name";console.log(data[ ...
- 如何快速找出Linux中的重复文件
md5sum | sort | uniq -w32 --all-repeated=separate [1]find -not -empty -type f -printf “%s\n” :find是查 ...
- Python---13靠谱的Pycharm安装详细教程
昨天自学廖雪峰老师的python课程时,用的sublime编辑器,在命令行模式进行的输出,输出结果一直报错,说Python版本有问题,但在版本是满足要求的.最后在同事的电脑上运行了一下,是可以正常输出 ...