本机js开发的日历插件

效果如下：

代码如下：

样式类型=' text/CSS ' * { margin : 0；padd : 0；} ul、李{列表式：无；} #周{ width: 350px高度： 350像素；border: 1px固体# CCC } # week h6 { font-size : 20px；飞越：隐藏；高度： 40px线高： 40px} #周h6部门{左侧浮动：宽度： 250像素；文本对齐：中心；} #周prev { float : left font-size : 12px；宽度： 50px光标：指针；} #周。下一个{ float : right font-size : 12px；宽度： 50px光标：指针；} #周p span {宽度： 50px向左浮动：文本对齐：中心；高度： 30px线高： 30px} #周p { background: # ccc飞越：隐藏；height : 30px } # week ul { margin-top : 10px；} #周ul li { width: 50px向左浮动：文本对齐：中心；高度： 30pxcursor:指针；}/style输入类型=' text ' id=' ele ' onfocus=' current wek(this)'/脚本函数当前wek(ele){ var obj=offset(ele)；var x=obj.leftvar y=obj。顶层元素。偏置灯1；//创建日历界面if(！文件。getelementbyid(' week '){ var Odiv=document。create element(' div ')；文件。尸体。appendchild(Odiv)；oDiv.id=' weekodiv。风格。top=y ' px奥迪夫。风格。left=x ' px//创建日历标题var h6=文档。创建元素(' h6 ')；奥迪夫。append child(h6)；var prev=文档。创建元素(' div ')；h6。append child(prev)；prev。类名=' prev' prev.innerHTML='上个月；var内容=文档。创建元素(' div ')；content . class name=' content h6 . appendchild(内容);var next=文档。创建元素(' div ')；h6.appendChild(下一个);next . class name=' next next . innerHTMl='下个月；//创建星期日到星期六的文字行var OpS=文档。创建元素(' p ')；oPs.className=' rlTitleodiv。append child(OpS)；var opsCont=['日', '一', '二', '三', '四', '五', '六'];for(var I=0；I=6；I){ var OspAN=文档。创建元素(“span”)；行动组。append child(OspAN)；奥斯潘。inner html=OpScont[I]；} //创建日历上面的日期行数所需要的变量var OUl=文档。创建元素(' ul ')；oUl.className=' rlCenterodiv。阑尾切除术(OUl)；var currentDate=新日期();var当前yar=当前日期。getfull year()；var当月=当前日期。getmonth()；活动（当前月);//传参数月份//创建日历上下翻月prev。onclick=function(){ active(-CurrentMonth)；};下一个。onclick=function(){ active(CurrentMonth)；};} //动态创建日历上面日期，变包装成方法函数活跃(m){ OUl。innerHTMl=//切忌一定要把这个内容去掉，要不然会点一次翻页都在日历下面依次显示出来var activeDate=新日期(currentYear，m，1)；//外面传进来的不断变化的日期对象var年份=有效日期。getfull year()；var month=有效日期。getmonth()；//把当前的月份保存下来只是为了给标题获取月份content.innerHTML=year '年（第一个月)月；//创建日历上面的日期行数var n=1-有效日期。GetDay()；if(n==1){ n=-6；} //为了日历更友好的显示三个月，让用户看的更明白有效日期。set date(n)；//如果n为负数，则减少月份。在用这个月最后一天减去这个值就可以获得日历从哪天开始的for(var I=0；i 42I){ var OLi=文档。创建元素(“李”)；乌尔。append child(OLi)；var日期=有效日期。getdate()；//返回日期1-31号oLi.innerHTML=dateoli。datevalue=年份'-'(有效日期。get month()1)“-”日期；//这里必须是activeDate.getMonth() 1，不能用m 1。因为这个是一直变化的。要不然日历不管点哪天都是属于当前月份的。

oli . onclick=function(){ ele . value=this . datevalue；//从文本框中获取的年、月、日document . body . remove child(oDiv)；//获取日期、月份、年份，取消日历oDiv=null};if (activeDate.getMonth()！=month){ OLi . style . color=' # CCC '；//不在本月的日子颜色变成灰色。}//避免以下添加天数的语句。一定要判断上面的语句是不是这个月的天数，然后再加上这个语句，否则会出错。activeDate.setDate(日期1)；//如果月内天数超过，加月}}}函数偏移量(ele) {var l=ele。offsetleftvar t=ele.offsetTopvar p=ele.offsetParentwhile(p){ if(window . navigator . user agent . indexof(' MSIE 8 ')-1){ l=p . offsetleft；t=p.offsetTop} else { l=p . offsetleft p . client left；t=p . offsettop p . client top；} p=p.offsetParent} return {left:l，top:t}}/script是本文的全部内容。希望这篇文章的内容能给大家的学习或工作带来一些帮助，也希望大家多多支持我们！