js 面向对象 模拟日历
2024-10-08 21:47:56
<!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);
}
};
})();
最新文章
- .net 如何引用迅雷组件
- C# 面试的“区别”
- 几种php 删除数组元素方法
- Compute Mean Value of Train and Test Dataset of Caltech-256 dataset in matlab code
- pt-table-checksum 与pt-table-sync
- js页面传参数时，参数值包含特殊字符的处理
- #CI的MVC实现
- Python 2.7.3 urllib2.urlopen 获取网页出现乱码解决方案
- 机器学习 数据挖掘 推荐系统机器学习-Random Forest算法简介
- poi的合并单元格和冻结行列
- Django之CSRF跨站请求伪造（老掉牙的钓鱼网站模拟）
- python函数把可变数据类型当默认参数值的问题（转）
- python之单例模式
- BZOJ1095 [ZJOI2007]Hide 捉迷藏 动态点分治 堆
- 后台自动运行，定期记录定位数据（Hbuilder监听 app由前台切换到后台、切换运行环境的 监听方法）
- Java容器---字符容器StringBuffer & StringBuilder
- 【Spring】3、BeanFactory 和 ApplicationContext的区别
- 结束autocad异常进程
- IDEA下利用Jrebel插件实现JFinal项目main方法【热加载】
- java单双派机制理解