纯JS实现简单的日历

这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下

封装代码:

 (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(yy,mm,1),t if(mm==0){mm=12;yy--} var a,b,c,d2 t='' var ds=',一,二,三,四,五,'.split(",") for(x=0;x<7;x++)t+='' t+='' //计算显示上个月有几号在日历上 a=d.getDay() if(a==0)a=7 r=[] var c2=0 for(var x=0;x' t+='' if(x%7==6)t+='' } t+='
'+ds[x]+'
' t+=r[x].substring(1) if(cl!="")t+='' t+='
' document.getElementById(id).innerHTML=t } cmf.getMonthM=function(y,m){//计算哪年哪月 有多少天 月份从1开始 if(m==4 || m==6 || m==9 || m==11)return 30 if(m==2)return (y%4==0 && y%100!=0)|| y%400==0?29:28 return 31 } cmf.showd=function(id,fn){ cmf.fn=fn var g='
' var newdara=new Date() var yy=newdara.getFullYear(); var mm=newdara.getMonth()+1; document.getElementById(id).innerHTML=g var s='border-width:1px;border-style:solid;border-color:#000000 #cccccc #cccccc #000000;width: 44px;' var t='' +'' document.getElementById("cmfrili1").innerHTML=t cmf.showDcalendar() } cmf.timeselect_ms=function(n,m,n2) { var t='
' +cmf.timeselect_ms(1,'年') +'' +cmf.timeselect_ms(2,'月') +'
' t+='' if(m!=null)t+='' t+='' if(n2!=null)t+='' t+='
'+m+''+n2+'
' return t } cmf.timeselect_up=function(n,m){ var o=document.getElementById("f23timeselecta"+n),c=o.value if(c=="")c=1 if(n==1)//年 { if(m==2){//减 c-- }else if(m==1){//加 c++ } } else { if(m==2){//减 if(c<2) return c-- }else if(m==1){//加 if(c==12) return c++ } } o.value=c if(m==1 || m==2)cmf.showDcalendar() } })(window.cmf={})

使用:

   日历 

使用代码中dianji()函数是用户点击某天弹出某天的日期;效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是纯JS实现简单的日历的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程