自己手写日历
来源：互联网 发布：电脑故障扫描修复软件 编辑：程序博客网 时间：2024/05/30 23:07
下面是一段网上粗糙的代码，我加以改进，主要是为了研究为主
<html><meta http-equiv="content-type" content="text/html;charset=utf-8"><head> <style type="text/css"> td{ text-align: center;} </style> <script type="text/javascript"> function ready(fn){ // 目前Mozilla、Opera和webkit 525+内核支持DOMContentLoaded事件 if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); }, false); } // 如果IE else if(document.attachEvent) { // 确保当页面是在iframe中加载时，事件依旧会被安全触发 document.attachEvent('onreadystatechange', function() { //alert(arguments.callee); if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); } }); // 如果是IE且页面不在iframe中时，轮询调用doScroll 方法检测DOM是否加载完毕 if(document.documentElement.doScroll && typeof window.frameElement === "undefined") { //alert(arguments.callee); try{ document.documentElement.doScroll('left'); } catch(error){ return setTimeout(arguments.callee, 20); }; fn(); } } }; ready(function(){ var Calender=function(){ //this.Init.apply(this,arguments); this.Init.apply(this,arguments); } Calender.prototype={ Init:function(container,options){ this.date=new Date(); //当前年 this.year=this.date.getFullYear(); //当前月 this.month=this.date.getMonth()+1; //当前天 this.day=this.date.getDate(); //选中项是星期几 this.week=this.date.getDay(); //获取每个月第一周开始是星期几 this.weekstart=this.getWeekDay(this.year, this.month-1, 1); //当月有多少天 this.monthdays= this.getMonthDays(this.year,this.month); //日历容器 this.containerDiv=document.getElementById(container); //默认日历样式 this.options=options!=null?options:{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'lightgrey', fontColor:'blue' } }, getMonthDays:function(year,month){ var date=new Date(year,month,0); console.log(date); return date.getDate(); }, getWeekDay:function(year,month,day){ var date=new Date(year,month,day); return date.getDay(); }, View:function(){ var tablestr='<table>'; tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>'; tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>'; var index=1; //判断每月的第一天在哪个位置 var style=''; if(this.weekstart<7) { tablestr+='<tr>'; for (var i = 0; i <this.weekstart; i++) { tablestr+='<td></td>'; }; for (var i = 0; i < 7-this.weekstart; i++) { style=this.day==(i+1)?"background-Color:green;":""; index++; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; tablestr+='</tr>'; } ///剩余天数对应的位置 //判断整数行并且对应相应的位置 var remaindays=this.monthdays-(7-this.weekstart); var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ; var count=Math.floor(remaindays/7); for (var i = 0; i < count; i++) { tablestr+='<tr>'; for (var k = 0; k < 7; k++) { style=this.day==(index+k)?"background-Color:green;":""; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tablestr+=index+k; tablestr+='</td>'; }; tablestr+='</tr>'; index+=7; }; //最后剩余的天数对应的位置(不能填充一周的那几天) var remaincols=this.monthdays-(index-1); tablestr+='<tr>'; for(var i = 0; i < remaincols; i++) { style=this.day==index?"background-Color:green;":""; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>'; tablestr+=index; tablestr+='</td>'; index++; }; tablestr+='</tr>'; tablestr+='</table>'; return tablestr; }, Render:function(){ var calenderDiv=document.createElement('div'); calenderDiv.style.border=this.options.border; calenderDiv.style.width=this.options.width; calenderDiv.style.height=this.options.height; calenderDiv.style.cursor='pointer'; calenderDiv.style.backgroundColor=this.options.backgroundColor; // calenderDiv.style.color=this.options.fontColor; calenderDiv.style.color='red' ; calenderDiv.onclick=function(e){ var evt=e||window.event; var target=evt.srcElement||evt.target; if(target&&target.getAttribute('val')) { alert(target.getAttribute('val')); } } var tablestr=this.View(); this.tablestr=tablestr; calenderDiv.innerHTML=tablestr; var div=document.createElement('div'); div.style.width='auto'; div.style.height='auto'; div.appendChild(calenderDiv); ///翻页div var pagerDiv=document.createElement('div'); pagerDiv.style.width='auto'; pagerDiv.style.height='auto'; var that=this; ///重新设置参数 var resetPara=function(year,month,day){ that.date=new Date(year,month,day); that.year=that.date.getFullYear(); that.month=that.date.getMonth()+1; that.day=that.date.getDate(); that.week=that.date.getDay(); that.weekstart=that.getWeekDay(that.year, that.month-1, 1); that.monthdays= that.getMonthDays(that.year,that.month); } //上一页 var preBtn=document.createElement('input'); preBtn.type='button'; preBtn.value='<'; preBtn.onclick=function(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month-2,that.day); that.Render(); } //下一页 var nextBtn=document.createElement('input'); nextBtn.type='button'; nextBtn.value='>'; nextBtn.onclick=function(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month,that.day); that.Render(); } pagerDiv.appendChild(preBtn); pagerDiv.appendChild(nextBtn); div.appendChild(pagerDiv); var dropDiv=document.createElement('div'); var dropdivstr=''; //选择年份 dropdivstr+='<select id="ddlYear">'; for (var i = 1900; i <= 2100; i++) { dropdivstr+= i==that.year ?'<option value="'+i+'" selected="true">'+i+'</option>' : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; //选择月份 dropdivstr+='<select id="ddlMonth">'; for (var i = 1; i <= 12; i++) { dropdivstr+= i==that.month ?'<option value="'+i+'" selected="true">'+i+'</option>' : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; dropDiv.innerHTML=dropdivstr; div.appendChild(dropDiv); console.log(that); console.log(that.containerDiv); that.containerDiv.appendChild(div); ///绑定选择年份和月份的事件 var ddlChange=function(){ var ddlYear=document.getElementById('ddlYear'); var ddlMonth=document.getElementById('ddlMonth'); var yearIndex=ddlYear.selectedIndex; var year=ddlYear.options[yearIndex].value; var monthIndex=ddlMonth.selectedIndex; var month=ddlMonth.options[monthIndex].value; that.containerDiv.removeChild(div); resetPara(year,month-1,that.day); that.Render(); } ddlYear.onchange=function(){ ddlChange(); } ddlMonth.onchange=function(){ ddlChange(); } } } var calender=new Calender('dvTest',{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'' } ); calender.Render(); }); </script></head><body> <div id="dvTest"></div></body></html>阅读全文
0 0
- 自己手写日历
- 手写创建日历
- js手写日历插件
- 手写的一个日历表格！
- 自己手写Struts2
- 自己手写Struts2
- 自己手写Struts2
- 自己手写Struts2
- 自己手写Struts2
- 自己手写一个springmvc
- 手写自己的BufferedReader
- 自己手写百分比控件布局
- 自己手写简单的ArrayList
- mnist测试自己手写数字
- 自己用的日历控件
- 如何自己写一个日历
- C#自己写农历日历
- C#自己写农历日历
- c++中的friend
- 新路程------hi3516a i2c设备reset
- Unity Shader and Effects CookBook
- Vue 快速入门
- php 使用webservice从服务器获取数据时中文乱码
- 自己手写日历
- 搭建hadoop集群
- DataExcel 设置 动作(事件)执行函数 自定义动作
- iOS静态库（配置版）
- Unity 如何发布到Mac App Store
- TermCriteria
- 正整数分组
- JAVA设计模式之二：抽象工厂模式
- 写代码的小女孩
