- 浏览: 106785 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
zaizi5408:
已经改好了,但是有个问题text3的 更改后无法支持
mac上sublime 支持json, xml 格式化 -
Mybeautiful:
有一个问题,当格式化Json时,里面节点的顺序会变
mac上sublime 支持json, xml 格式化 -
squll369:
zl_dream1106 写道squll369 写道zl_dr ...
日历控件,完全用CSS+JS实现 -
zl_dream1106:
squll369 写道zl_dream1106 写道请问这句话 ...
日历控件,完全用CSS+JS实现 -
zhu547043537:
应该是将解压的三个jar放到插件目录中去
推荐一个eclipse UML 插件
最近在学习javascript,就用他完成了一个日历控件,特此纪录以下:
运行效果:
代码如下,还没有做整理,都放一个html里了,以后要整理一下,
<html> <head> <style> .body{ background-color:white; } .calendar table{ width:100%; height:100%; position:relative; border-collapse:collapse; } .calendar table th.first{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid white; border-left:1px solid maroon; } .calendar table th.mid{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid white;a } .calendar table th.last{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid maroon; } .calendar table td { width:14%; border:1px solid maroon; padding:0px; } .calendar table.tdborder{ width:100%; height:100%; position:relative; } .calendar table td.tdborderNormal{ border:1px solid transparent; width:100%; height:100%; position:relative; padding:0px; } .calendar table td.tdborderOnfocus { border:1px solid red; width:100%; height:100%; position:relative; padding:0px; } .calendar table td.caltitle_p { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar table td.caltitle_m { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; } .calendar table td.caltitle_m_lr { height:25px; font-family: arial, helvetica; font-size:11px; color:maroon; border:0px; text-align:left; cursor:pointer; } .calendar table td.caltitle_l { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar table td.quarter { height:25px; font-family: arial, helvetica; font-size:14px; color:maroon; border:0px; text-align:center; } .calendar table td.quartermonth { height:25px; font-family: arial, helvetica; font-size:12px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar div.dateTitle{ width:98%; height:15px; position:relative; font-family: arial, helvetica; font-size:13px; text-align:right; } .calendar div.dateContext{ width:100%; height:90%; position:relative; font-family: arial, helvetica; font-size:12px; text-align:left; position:relative; border-top:1px dashed maroon; } .calendar tabel td.now{ font-family: arial, helvetica; font-size:11px; cursor:hand; position:relative; } </style> <script> var currentDate = new Date(); Date.prototype.getMonthDays = function(month,year){ var nextMonthFiristDay = new Date(); nextMonthFiristDay.setDate('1'); var nowMonthFiristDay = new Date(); nowMonthFiristDay.setDate('1'); if(year){ nowMonthFiristDay.setFullYear(year); nextMonthFiristDay.setFullYear(year); } if(month){ nextMonthFiristDay.setMonth(month); nowMonthFiristDay.setMonth(month-1); }else{ nextMonthFiristDay.setMonth(nextMonthFiristDay.getMonth()+1); } return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); } Date.prototype.getFirstDayOfMonthInWeek = function(month,year){ var today = new Date(); today.setDate('1'); if(year){ today.setFullYear(year); } if(month){ today.setMonth(month-1); } return today.getDay(); } function addRow(tbody,strings,ishead){ var tds = new Array(); var texts = new Array(); var _tr = document.createElement("tr"); tbody.appendChild(_tr); for(var i=0;i<7;i++){ if(ishead){ tds[i] = document.createElement("th"); if(i==0){ tds[i].className = 'first'; }else if(i==6){ tds[i].className = 'last'; }else{ tds[i].className = 'mid'; } }else{ tds[i] = document.createElement("td"); } _tr.appendChild(tds[i]); if(strings){ texts[i] = document.createTextNode(strings[i]); tds[i].appendChild(texts[i]); } } } function mapMonthNum(month){ var monthStr = new Number(); switch (month) { case 'Jan': monthStr = 0 break case 'Feb': monthStr = 1 break case 'Mar': monthStr = 2 break case 'Apr': monthStr = 3 break case 'May': monthStr = 4 break case 'Jun': monthStr = 5 break case 'Jul': monthStr = 6 break case 'Aug': monthStr = 7 break case 'Sep': monthStr = 8 break case 'Oct': monthStr = 9 break case 'Nov': monthStr = 10 break case 'Dec': monthStr = 11 break } return monthStr; } function mapMonth(month){ var monthStr = new Object(); switch (month) { case 0: monthStr = 'Jan' break case 1: monthStr = 'Feb' break case 2: monthStr = 'Mar' break case 3: monthStr = 'Apr' break case 4: monthStr = 'May' break case 5: monthStr = 'Jun' break case 6: monthStr = 'Jul' break case 7: monthStr = 'Aug' break case 8: monthStr = 'Sep' break case 9: monthStr = 'Oct' break case 10: monthStr = 'Nov' break case 11: monthStr = 'Dec' break } return monthStr; } function addTitleMonth(td,strings,calendar,calendar_context){ var quarter1table = document.createElement("table"); var quarter1tbody = document.createElement("tbody"); var quarter1tr = document.createElement("tr"); td.appendChild(quarter1table); quarter1table.appendChild(quarter1tbody); quarter1tbody.appendChild(quarter1tr); var quarter1tds = new Array(); for(var i=0;i<strings.length;i++){ quarter1tds[i] = document.createElement("td"); quarter1tds[i].monthvalue = mapMonthNum(strings[i]); quarter1tds[i].appendChild(document.createTextNode(strings[i])); quarter1tr.appendChild(quarter1tds[i]); quarter1tds[i].className = 'quartermonth'; quarter1tds[i].onclick = function(){ currentDate.setMonth(this.monthvalue); calendar.removeChild(calendar_context); initCal(); } } } function initCal(){ var calendar = document.getElementById("calendar"); var calendar_context = document.createElement("table"); calendar.appendChild(calendar_context); var _tbody = document.createElement("tbody"); calendar_context.appendChild(_tbody); var days = currentDate.getMonthDays(currentDate.getMonth()+1,currentDate.getFullYear()); var cells = new Array(); var cellDivs = new Array(); var cellDivTbodys = new Array(); var cellDivTrs = new Array(); var cellDivTds = new Array(); var handleDates = new Array(); var txtNodes = new Array(); //create table; var calendar_title_tr = document.createElement("tr"); var calendar_title_td_p = document.createElement("td"); calendar_title_td_p.className = 'caltitle_p'; calendar_title_td_p.appendChild(document.createTextNode("<")); calendar_title_td_p.onclick=function(){ currentDate.setMonth(currentDate.getMonth()-1); calendar.removeChild(calendar_context); initCal(); } var calendar_title_td_m = document.createElement("td"); calendar_title_td_m.className = 'caltitle_m'; var calendar_title_td_m_table = document.createElement("table"); var calendar_title_td_m_tbody = document.createElement("tbody"); var calendar_title_td_m_tr = document.createElement("tr"); var calendar_title_td_m_tdl = document.createElement("td"); var calendar_title_td_m_tdm = document.createElement("td"); var calendar_title_td_m_tdr = document.createElement("td"); calendar_title_td_m.appendChild(calendar_title_td_m_table); calendar_title_td_m_table.appendChild(calendar_title_td_m_tbody); calendar_title_td_m_tbody.appendChild(calendar_title_td_m_tr); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdl); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdm); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdr); calendar_title_td_m_tdm.className = 'caltitle_m'; calendar_title_td_m_tdl.className = 'caltitle_m'; calendar_title_td_m_tdr.className = 'caltitle_m_lr'; calendar_title_td_m_tdm.appendChild(document.createTextNode(mapMonth(currentDate.getMonth()) + ',' + currentDate.getFullYear())); var txtNow = document.createTextNode('[Now]'); calendar_title_td_m_tdr.appendChild(txtNow); calendar_title_td_m_tdr.onclick=function(){ currentDate = new Date(); calendar.removeChild(calendar_context); initCal(); } if(currentDate.getFullYear() == new Date().getFullYear() && currentDate.getMonth() == new Date().getMonth()){ if(txtNow){ calendar_title_td_m_tdr.removeChild(txtNow); } } var calendar_title_td_l = document.createElement("td"); calendar_title_td_l.className = 'caltitle_l'; calendar_title_td_l.appendChild(document.createTextNode(">")); calendar_title_td_l.onclick=function(){ currentDate.setMonth(currentDate.getMonth()+1); calendar.removeChild(calendar_context); initCal(); } calendar_title_tr.appendChild(calendar_title_td_p); var quarter1 = document.createElement("td"); quarter1.className = 'quarter'; var quarter2 = document.createElement("td"); quarter2.className = 'quarter'; calendar_title_tr.appendChild(quarter1); var monthTitles1 = ['Jan','Feb','Mar']; addTitleMonth(quarter1,monthTitles1,calendar,calendar_context); calendar_title_tr.appendChild(quarter2); var monthTitles2 = ['Apr','May','Jun']; addTitleMonth(quarter2,monthTitles2,calendar,calendar_context); calendar_title_tr.appendChild(calendar_title_td_m); var quarter3 = document.createElement("td"); quarter3.className = 'quarter'; var quarter4 = document.createElement("td"); quarter4.className = 'quarter'; calendar_title_tr.appendChild(quarter3); var monthTitles3 = ['Jul','Aug','Sep']; addTitleMonth(quarter3,monthTitles3,calendar,calendar_context); calendar_title_tr.appendChild(quarter4); var monthTitles4 = ['Oct','Nov','Dec']; addTitleMonth(quarter4,monthTitles4,calendar,calendar_context); calendar_title_tr.appendChild(calendar_title_td_l); _tbody.appendChild(calendar_title_tr); //create title; var calTitles = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; addRow(_tbody,calTitles,true); //create first row; addRow(_tbody); var startPoint = [2,currentDate.getFirstDayOfMonthInWeek(currentDate.getMonth()+1,currentDate.getFullYear())]; var contextDates = new Array(); for(var i=0;i<days;i++){ //alert("rows:" + startPoint[0] + ", cells:" + startPoint[1]); cells[i] = calendar_context.rows[startPoint[0]].cells[startPoint[1]]; cellDivs[i] = document.createElement("table"); cellDivs[i].className='tdborder'; cellDivTbodys[i] = document.createElement("tbody"); cellDivs[i].appendChild(cellDivTbodys[i]); cellDivTrs[i] = document.createElement("tr"); cellDivTbodys[i].appendChild(cellDivTrs[i]); cellDivTds[i] = document.createElement("td"); cellDivTds[i].className='tdborderNormal'; cellDivTrs[i].appendChild(cellDivTds[i]); cellDivTds[i].onmouseover = function(){ this.className = 'tdborderOnfocus'; } cellDivTds[i].onmouseout = function(){ this.className = 'tdborderNormal'; } cells[i].appendChild(cellDivs[i]); handleDates[i] = document.createElement("div"); handleDates[i].className='dateTitle'; contextDates[i] = document.createElement("div"); contextDates[i].className='dateContext'; cellDivTds[i].appendChild(handleDates[i]); cellDivTds[i].appendChild(contextDates[i]); txtNodes[i] = document.createTextNode(i+1); handleDates[i].appendChild(txtNodes[i]); var cellsPoint = startPoint[1]++; if(cellsPoint == 6){ startPoint[0]++; startPoint[1]=0; if(i != days-1){ addRow(_tbody); } } } } window.onload = function(){ initCal(); } </script> </head> <body> <div id='calendar' class='calendar'/> </body> </html>
2011/8/7更新,完成了后台交互效果,项目在附件里
评论
6 楼
squll369
2013-10-26
zl_dream1106 写道
squll369 写道
zl_dream1106 写道
请问这句话的目的是什么哦?
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
我好像没有写这句话呀?
汗,N久之后回来查看。代码copy一下,ctrl+f一下~~~就有了
哦,在Date.prototype里,给 Date提供了一个方法,用来返回这个月一共有多少天。这句话,就是 从毫秒-》秒 -》分 -》小时 -》天。
5 楼
zl_dream1106
2013-10-16
squll369 写道
zl_dream1106 写道
请问这句话的目的是什么哦?
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
我好像没有写这句话呀?
汗,N久之后回来查看。代码copy一下,ctrl+f一下~~~就有了
4 楼
squll369
2012-09-08
zl_dream1106 写道
请问这句话的目的是什么哦?
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
我好像没有写这句话呀?
3 楼
zl_dream1106
2012-08-09
请问这句话的目的是什么哦?
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
2 楼
bjsq618
2011-08-04
最近再加上农历,那就更完美了
1 楼
GoodWell
2011-08-04
顶一个啦………………
相关推荐
使用css和javascript技术实现日历控件,可以更好的对日历的日期进行控制
纯JS+CSS实现的日历控件,把它加载在你的网页中既美观,又使用,非常不错的!
JS+CSS日历控件,多种风格,方便实用
非常不错的日历控件,把它加载在你的网页中,既美观又使用,真的很不错!
html+js+css带阴历的日历控件,运行一下demo,看看代码就知道怎么用了,但是如果页面用了其他框架样式可能会冲突,这个就需要调整了
非常不错的js日历控件,把他加载在你的页面中,既美观有使用,真的很不错!
埃拉伯日历控件 包含阿语格式的css以及js文件
非常不错的js日历控件,把他加载在你的页面中,既美观有使用,真的很不错!
是一个HTC的日历控件。十分放便。 只适用于IE。
非常不错的日历控件,把它加载在你的网页中,既美观又使用,真的很不错!
非常不错的日历控件,把它加载在你的网页中,既美观又使用,真的很不错!
这是一个由 html css javascript开发的日历控件,支持中英文切换,点击文本框弹出。
日历控件,加载后可以出现日历控件,可以选中天进行备注信息的填写
对2008-05-13 发布的一个控件做了写修改。下载后直接使用即可。 火狐和IE都 兼容日历控件,非常实用的JS代码。
用js实现日期表示形式,css代码及js文件清晰!
最漂亮,兼容性最强的一款日历控件,以前的日历控件都是一些,非常粗糙的,而且功能非常的差。在开发中非常的烦恼,现在找到一款非常好的日历控件,希望大家分享。 实用非常的简单,就是一个js 文件,css 和js 都写...
java 日历控件 经典实用 简洁 简单易用,日历插件,JS CSS 样式都用,方便
js的日历时间控件 if(typeof Control=="undefined"){Control={}}Control.DatePicker=Class.create({initialize:function(element,options){this.element=$(element);if(dp=this.element.retrieve("datepicker")){dp....