js html制作简单日历的方法

新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑

代码：

！doctype html html head meta charset=' utf-8 ' title无标题文档/title style * { margin : 0；padd : 0 } # calendar { width : 210 px；余量： 100像素自动；飞越：隐藏；border: 1px固体# 000;padd : 20p x position : relative } # calendar H4 { text-align : center；页边距-底部： 10px } #日历。a1 {位置：绝对；top: 20pxleft: 20px} #日历。a2 {位置：绝对；top: 20pxright: 20px} #日历。周{ height: 30px线高： 20px边框-底部： 1px实心# 000;页边距-底部： 10px } #日历。周立{float:左；宽度： 30px高度： 30px文本对齐：中心；列表样式：无；} #日历日期列表{overflow:隐藏；clear:双双} #日历。日期列表li {左侧浮动：宽度： 30px高度： 30px文本对齐：中心；线高： 30px列表样式：无；} #日历。日期列表ccc { color: # ccc} #日历。日期列表。红色{ background : # f90 color : # fff } #日历。日期列表sun { color : # f00 }/style script src=' http : js/jquery-1。11 .3 .量滴js//script script $(function(){//必要的数据//今天的年月日；本月的总天数；本月第一天是周几？var Inow=0；函数运行(n){ var HiTO=new Date()；//定义时间HuIt。SetMountain(HuIt。GetMountain)(n)；//设置月份var year=HuIt。GetFullyear()；//年var month=HuIt。GetMount()；//月var today=HuIt。GetDate()；//日//计算本月有多少天var allDay=[31，28，31，30，31，30，31，31，30，31，31，30，30，31][月];//判断闰年如果(月==1) { if(年% 4==0年% 100!=0 | | year % 400==0){ allDay=29；} } //判断本月第一天是星期几亨特。setdate(1)；//时间调整到本月第一天var week=HuIt。GetDay()；//读取本月第一天是星期几//console.log(周);$('.日期列表')。empty()；//每次清空//插入空白for(var I=0；一周；i ) { $(' .日期列表')。追加(“李/李”)；} //日期插入到(var I=1；i=全天；i ) { $(' .日期列表')。追加(' li' i '/li') } //标记颜色=====================$('.日期列表李' .每个（函数(I，elm){ //console.log(index，elm)；var val=$(this).text()；//控制台。日志(val)；if(n==0){ if(valtoday){ $(this)} .addCLaSS(' CCC ')} else if(val==today){ $(this).addCLaSS(' red ')} else if(I % 7==0 | | I % 7==6){ $(this).addCLaSS(' sun ')} } else if(n0){ $(this).addCLaSS(' CCC ')} else if(I % 7==0 | | I % 7==6){ $(this).addCLaSS(' sun ')} })；//定义标题日期$(' #日历h4 ').文本（年)年（第一个月)月');};运行(0);$(".a1 ").click(function(){ Inow-；运行(Inow)；});$(".a2 ").单击(function(){ Inow；运行(Inow)；}) });/script/head body div id=' calendar ' h 42013年10月/H4 a href=' # ' rel=' external nofollow ' rel=' external nofollow ' class=' a1 '上月/a a href=' # ' rel=' external nofollow ' rel=' external nofollow ' class=' a2 '下月/a ul class='week' li日/li li一/li li二/li li三/li li四/li li五/li li六/Li/ul ul class=' DateList '/ul/div/body/html更多精彩内容请点击专题《javascript日历插件使用方法汇总》 进行学习

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