简单的日历制作
2018-06-23 本文已影响0人
陌紫嫣
虽然插件有很多了，但是为了学习其原理，自动动手写了一个，在写的过程中会你学到很多知识点，现在开始吧！
下面是一个简单的演示，刚进来是显示当前的月份，然后通过选择框的改变切换月份
GIF.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">
<select id="month"></select>
</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(month);//一进来就显示当月的日历
//显示当前具体时间
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")//自动定位到当前的那个月份
}
}
//监听选择框发生改变
$("#month").change(function(){
var value = parseInt($(this).val().replace(/[^0-9]/ig,""));//截取数字
month = value;
console.log(value);
$("table tbody").empty();
show(month);
});
</script>
</body>
</html>
