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面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- B 小雨的三角形
题目链接:https://ac.nowcoder.com/acm/contest/949/B 思路: 一个找规律题,找到规律就很简单,只剩下代码实现了.规律:第i行去头尾剩下的数的和等于第i-1行去头 ...
- 使用httpclient必须知道的参数设置及代码写法、存在的风险
转发地址:http://jinnianshilongnian.iteye.com/blog/2089792 结论: 如果使用httpclient 3.1并发量比较大的项目,最好升级到httpclien ...
- win10安装navisworks失败，怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装navisworks失败或提示已安装,也有时候想重新安装navisworks的时候会出现本电脑windows系统已安装navisworks,你要是不留意直接安装n ...
- $random 函数用法
$random函数调用时,返回一个32位的随机数,它是一个带符号的整形数.如下例: reg[23:0] rand; rand = $random % 60; //产生一个在 -59~59 范围的随机数 ...
- sql执行过程
作为一个程序员,几乎所有人都使用过 SQL 语言,无论是在命令行执行.程序调用,还是在 SQL 工具里,你都做过这样的事:写一个规范的 SQL 语句,然后等待数据库返回的结果,然后再基于结果做各种逻辑 ...
- mybatis参数映射
转载地址:http://iyiguo.net/blog/2012/09/27/mybatis-param-mapping-rules/ 规则 非注解参数 当参数未使用@Param注解时,可以通过以下方 ...
- Android--MediaPlayer(实现列表选歌，上一首，下一首，清空播放列表，搜索本地音乐文件)
Android--MediaPlayer(实现列表选歌,上一首,下一首,清空播放列表,搜索本地音乐文件) 下载链接:http://download.csdn.net/detail/zlqqhs/507 ...
- 刷金币全自动脚本 | 让Python每天帮你薅一个早餐钱（送源码）
刷金币全自动脚本 | 让Python每天帮你薅一个早餐钱(送源码) 测试开发社区 6天前 文章转载自公众号 AirPython , 作者 星安果 阅读文本大概需要 12 分钟. 1 目 标 场 景 ...
- linux-深度学习环境配置-Centos
下载Centos 7安装镜像,制作启动优盘. Install CentOS 7 安装CentOS 7. 第一步,配置日期.语言和键盘. 第二步,选择-系统-安装位置,进入磁盘分区界面.选择-其它存储选 ...
- Grafana+Prometheus监控mysql性能
#cmd /usr/local 今天讲一下如何监控服务器中的mysql数据库的性能 一.数据库操作 1.mysql启动 #service mysqld start #启动数据库 #service my ...