废话不多说，先来个演示
GIF1.gif
这个比上次多了一个左右的操作
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style type="text/css">
.container{
font-size: 14px;
color: #000;
width: 400px;
}
td{
text-align: center;
}
.content .weekend{
color: #999;
}
.container .content{
padding:40px;
}
.container .content tr th,td{
text-align: center;
padding: 15px;
}
.time{
text-align: center;
}
.select{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="select">
<span id='pre'><< </span> //左箭头，用了实体符，便于浏览器识别
<select id="month" style="text-align:center;"></select>
<span id='next'> >></span> //右箭头
</div>
<table>
<thead>
<tr>
<th class="weekend">日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th class="weekend">六</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var date = new Date();
month = date.getMonth() +1;
year = date.getFullYear();
day = date.getDate();
weeks =new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()]; //获取当前星期几
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = year + "年" + month + "月" + day + "日 "+"  " + hour + ":" + minute + ":" + second +"  " +weeks;//把时间拼接起来
//显示每个月的日历的方法
function show(){
var i,j,e,g,datas;
var bigMonths = [1,3,5,7,8,10,12];
var smallMonths =[4,6,9,11];
week = "1234567".split("")[new Date(Date.UTC(2018, month-1, 1)).getDay()];//判断当前月份的第一天是星期几
if(bigMonths.indexOf(month)>= 0 ){
datas = 31;
}else if(smallMonths.indexOf(month)>= 0){
datas = 30;
}else if(month==2){
datas = 28;
}
var a = Number(datas) + Number(week);//计算这个月一共占几个格
b = Math.ceil(a/7);//向上取整
c = Number(week)-1;//判断前面有几个空的
for(i=1;i<=b;i++){
var tr = '<tr>';
//如果第一行的时候要判断，从哪里开始
if(i==1){
for ( j=0; j<7; j++){
if(j<c){
tr +="<td >"+'</td>';
}else{
var currentNum = (i-1)*7+j+1-c;
tr +="<td >"+currentNum+'</td>';
}
}
}else{
for ( j=0; j<7; j++) {
var currentNum = (i-1)*7+j+1-c;
if(currentNum > datas){
break;
}
tr +="<td >"+currentNum+'</td>';
};
};
tr += '</tr>';
$("table tbody").append(tr);
}
}
show();//一进来就显示当月的日历
//显示当前具体时间
var d = '<p class="time">'+time+'</p>';
$(".container").append(d);
//循环遍历出月份
for(g=1;g<=12;g++){
var months = '<option>'+g+'月'+'</option>';
$(".select select").append(months);
if(g==month){
$('option').attr("selected","selected")//自动定位到当前的那个月份
}
}
//封装的改变月份并显示的方法
function setMonths(value){
var index = value - 1;
$("#month")[0].options[index].selected = true;//通过option改变select的显示值
var num = parseInt($('#month').val().replace(/[^0-9]/ig,""));//截取数字
month =num;
$("table tbody").empty();
show()
}
var value = parseInt($('#month').val().replace(/[^0-9]/ig,""));//截取数字，这个要是全局变量
$('#pre').click(function(){
if(value>1){
value--;
setMonths(value)
} else{
$('#pre').attr('disabled','disabled');
}
})
$('#next').click(function(){
if(value<12){
value++;
setMonths(value)
} else{
$('#next').attr('disabled','disabled');
}
})
//监听选择框发生改变
$("#month").change(function(){
month = value;
console.log(value);
$("table tbody").empty();
show();
});
</script>
</body>
</html>
网友评论