<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:#96CECF;
}
#calendar td{
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{
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>