纯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()函数是用户点击某天弹出某天的日期；效果如下

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