用html与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+='

'+ds[x]+''

t+='

'

//计算显示上个月有几号在日历上

a=d.getDay()

if(a==0)a=7

r=[]

var c2=0

for(var x=0;x

{

d2=new Date(d-24*3600*1000*(a-x))

r[r.length]="1"+d2.getDate()

c2++

}

//计算显示这个月有几号在日历上

mm++

if(mm==13){mm=1;yy++}

c=cmf.getMonthM(yy,mm)//计算哪年哪月 有多少天

d=new Date(yy,mm,1)

for(var x=1;x<=c;x++)r[r.length]="2"+x

//计算显示下个月有几号在日历上

c2+=c//r数组有多少个

d2=new Date(yy,mm-1,c)

a=d2.getDay()//这个月最后一天星期几

a=7-a

if(c2<36)a+=7

for(var x=1;x

'

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=''

+'

' +cmf.timeselect_ms(1,'年') +'

' +cmf.timeselect_ms(2,'月') +'

document.getElementById("cmfrili1").innerHTML=t

cmf.showDcalendar()

}

cmf.timeselect_ms=function(n,m,n2)

{

var t='

t+='

◄'

if(m!=null)t+='

'+m+''

t+='

►'

if(n2!=null)t+='

'+n2+''

t+='

'

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={})

使用：

日历

cmf.showd('ri','dianji')

function dianji(d,ti){

$("#ri td").css('border','')

$(ti).css('border','1px solid #aa0000')

alert(d)

}

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

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