首页 > 代码库 > js实现简单的日历效果（兼容IE5 ）
js实现简单的日历效果（兼容IE5 ）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="1.css"/> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ var months = new Array(1,2,3,4,5,6,7,8,9,10,11,12); var daysAry= new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var weeks = new Array("日","一", "二", "三","四", "五", "六"); $.get("year.json",function(data){ var opt = ‘‘; $.each(data, function(i,item){ opt+="<option>"+item.year+"</option>"; }); $(opt).appendTo($(".year")) }); var date=new Date(); //当前月第一天日期对象： /* date=new Date(date.setDate(1)); //当前月第一天星期几: var firstDay=weeks[date.getDay()];*/ //获取每个月的天数，new Date中的第一个参数为年，第二个参数为月份，第三个参数天数设置为0即可 function getTime(){ var year=$(".year").val(),month=$(".month").val(); //获取当月天数 var dates=new Date(year,month,0).getDate(); //当前月第一天日期对象 date=new Date(new Date(year,month-1,1)); //当前月第一天星期几: var firstDay=date.getDay(); if(firstDay == 0){ firstDay=7; } var num= 1,str=""; $("td").each(function(){ var $eq=$(this).index()+1; if($eq<firstDay && $(this).parent("tr").index()===0){ $(this).html(""); }else{ if(num <= dates){ $(this).html(num); num++ }else{ $(this).html("") } } if($(this).html() == "" && $(this).siblings().html() == ""){ $(this).parents("tr").css("display","none") }else{ $(this).parents("tr").css("display","table-row") } }); } getTime(); $(".header select").on("change",function(){ getTime(); }) }) </script> </head> <body> <div class="container"> <div class="header clearfix"> <div class="fl"> <select class="year"></select> </div> <div class="fr"> <select class="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> </div> </div> <table> <thead> <tr> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> <th>日</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </tbody> </table> </div> </body> </html>
[ { "year":"1945" }, { "year":"1946" }, { "year":"1947" }, { "year":"1948" }, { "year":"1949" }, { "year":"1950" }, { "year":"1951" }, { "year":"1952" }, { "year":"1953" }, { "year":"1954" }, { "year":"1955" }, { "year":"1956" }, { "year":"1957" }, { "year":"1958" }, { "year":"1959" }, { "year":"1960" }, { "year":"1961" }, { "year":"1962" }, { "year":"1963" }, { "year":"1964" }, { "year":"1965" }, { "year":"1966" }, { "year":"1967" }, { "year":"1968" }, { "year":"1969" }, { "year":"1970" }, { "year":"1971" }, { "year":"1972" }, { "year":"1973" }, { "year":"1974" }, { "year":"1975" }, { "year":"1976" }, { "year":"1977" }, { "year":"1978" }, { "year":"1979" }, { "year":"1980" }, { "year":"1981" }, { "year":"1982" }, { "year":"1983" }, { "year":"1984" }, { "year":"1985" }, { "year":"1986" }, { "year":"1987" }, { "year":"1988" }, { "year":"1989" }, { "year":"1990" }, { "year":"1991" }, { "year":"1992" }, { "year":"1993" }, { "year":"1994" }, { "year":"1995" }, { "year":"1996" }, { "year":"1997" }, { "year":"1998" }, { "year":"1999" }, { "year":"2000" }, { "year":"2001" }, { "year":"2002" }, { "year":"2003" }, { "year":"2004" }, { "year":"2005" }, { "year":"2006" }, { "year":"2007" }, { "year":"2008" }, { "year":"2009" }, { "year":"2010" }, { "year":"2011" }, { "year":"2012" }, { "year":"2013" }, { "year":"2014" }, { "year":"2015" }, { "year":"2016" }, { "year":"2017" }, { "year":"2018" }, { "year":"2019" }, { "year":"2020" }, { "year":"2021" }, { "year":"2022" }, { "year":"2023" }, { "year":"2024" }, { "year":"2025" }, { "year":"2026" }, { "year":"2027" } ]
年份是通过json文件引入的，由于时间有限，没有添加过多的年份，如需要更多年份可自行在year.json中添加
js实现简单的日历效果（兼容IE5 ）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。