<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color:#96CECF; } #calendar td{ width:20px; height:20px; font-size:12px; line-height:20px; text-align:center; } #calendar thead td{ background-color:#FCC; color:#000; } #calendar tbody td{ background-color:#fff; color:#96CECF; } #calendar tbody td.none{ background-color:transparent; } #calendar tbody td.today{ color:red; font-weight:bold; } select{ border:1px solid #ccc; } </style></head><body> <div> <div id=‘select‘> <select id=‘s_year‘> <option></option> </select> <select id=‘s_month‘> <option></option> </select> </div> <table id=‘calendar‘> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody>
</tbody> </table> </div> <script src="jquery-2.2.1.min.js"></script> <script> function do_canlendar(d,y,m){ $(‘#calendar‘).each(function(){ var $this = $(this); $(‘tbody‘,$this).html(‘<tr></tr>‘); $(‘tbody tr:last‘).append(‘<td class=’none’ colspan=‘+first()+‘></td>‘); var j = first()-1; for(var i=0;i<maxDay();i++){ if(j<6){ $(‘tbody tr:last‘).append(‘<td>‘+(i+1)+‘</td>‘); j++; }else if(j==6){ $(‘tbody‘).append(‘<tr></tr>‘); $(‘tbody tr:last‘).append(‘<td>‘+(i+1)+‘</td>‘); j=0; } } if(y==year&&m==month){ $(‘tbody td‘).eq(date).addClass(‘today‘); } }) function first(){ d.setYear(y); d.setMonth(m-1); d.setDate(1); return d.getDay(); } function maxDay(){ return new Date(y,m,0).getDate(); } }
//这一段是制作日历的片段。利用这个函数，就可以随心所欲的制作想要的日历效果。
//下面这段就是利用这个函数，来达到我想要的效果。
var d = new Date(); var date = d.getDate(); var year = d.getFullYear(); var month = d.getMonth()+1; var week = d.getDay(); do_canlendar(d,year,month);
set_option($(‘#select #s_year‘),1980,year); set_option($(‘#select #s_month‘),1,12); $(‘#select #s_year‘).val(year); $(‘#select #s_month‘).val(month); $(‘#select‘).change(function(){ var s_y = $(‘#select #s_year‘).val(); var s_m = $(‘#select #s_month‘).val(); do_canlendar(d,s_y,s_m); })
function set_option(obj,Min,Max) { obj.html(‘<option></option>‘); for (var i = Min; i <= Max; i++) { obj.append(‘<option>‘ + i + ‘</option>‘); } } </script></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color:#96CECF; } #calendar td{ width:20px; height:20px; font-size:12px; line-height:20px; text-align:center; } #calendar thead td{ background-color:#FCC; color:#000; } #calendar tbody td{ background-color:#fff; color:#96CECF; } #calendar tbody td.none{ background-color:transparent; } #calendar tbody td.today{ color:red; font-weight:bold; } select{ border:1px solid #ccc; } </style></head><body> <div> <div id=‘select‘> <select id=‘s_year‘> <option></option> </select> <select id=‘s_month‘> <option></option> </select> </div> <table id=‘calendar‘> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody>
</tbody> </table> </div> <script src="jquery-2.2.1.min.js"></script> <script> function do_canlendar(d,y,m){ $(‘#calendar‘).each(function(){ var $this = $(this); $(‘tbody‘,$this).html(‘<tr></tr>‘); $(‘tbody tr:last‘).append(‘<td class=’none’ colspan=‘+first()+‘></td>‘); var j = first()-1; for(var i=0;i<maxDay();i++){ if(j<6){ $(‘tbody tr:last‘).append(‘<td>‘+(i+1)+‘</td>‘); j++; }else if(j==6){ $(‘tbody‘).append(‘<tr></tr>‘); $(‘tbody tr:last‘).append(‘<td>‘+(i+1)+‘</td>‘); j=0; } } if(y==year&&m==month){ $(‘tbody td‘).eq(date).addClass(‘today‘); } }) function first(){ d.setYear(y); d.setMonth(m-1); d.setDate(1); return d.getDay(); } function maxDay(){ return new Date(y,m,0).getDate(); } }
//这一段是制作日历的片段。利用这个函数，就可以随心所欲的制作想要的日历效果。
//下面这段就是利用这个函数，来达到我想要的效果。
var d = new Date(); var date = d.getDate(); var year = d.getFullYear(); var month = d.getMonth()+1; var week = d.getDay(); do_canlendar(d,year,month);
set_option($(‘#select #s_year‘),1980,year); set_option($(‘#select #s_month‘),1,12); $(‘#select #s_year‘).val(year); $(‘#select #s_month‘).val(month); $(‘#select‘).change(function(){ var s_y = $(‘#select #s_year‘).val(); var s_m = $(‘#select #s_month‘).val(); do_canlendar(d,s_y,s_m); })
function set_option(obj,Min,Max) { obj.html(‘<option></option>‘); for (var i = Min; i <= Max; i++) { obj.append(‘<option>‘ + i + ‘</option>‘); } } </script></body></html>
时间： 2024-07-29 04:12:27