angularJS写的简易日历，有待简化，由于自己写的断断续续的以及编写过程中设计想法的改变，应该不够精简
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJS写的简易日历，有待简化，由于自己写的断断续续的以及编写过程中设计想法的改变，应该不够精简相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的日历</title>
<style>
.inline_block{
display: inline-block;
}
.width30{
width: 30px;
}
.h30{
height: 30px;
line-height: 30px;
}
.width150{
width:150px;
}
.width210{
width:210px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.over{
overflow: hidden;
}
.fontSize14{
font-size: 14px;
}
.fontSize16{
font-size: 16px;
}
.fontSize18{
font-size: 18px;
}
.textAlignCenter{
text-align: center;
}
.marginLd20{
margin: 0px 20px;
}
.marginTop20{
margin-top: 20px;
}
.border{
border: 1px solid #F0F0F0;
}
.padding20{
padding: 20px;
}
</style>
<script src="js/angularJS/angular.min.js"></script>
</head>
<body ng-app="calendary">
<div class="width210 border padding20" ng-controller="calController">
<div class="over">
<button class="width30 fl fontSize18 h30" ng-click="next(‘p‘)"><</button>
<span class="width150 fl inline_block h30 textAlignCenter fontSize14">{{month}}月 {{year}}</span>
<button class="width30 fr fontSize18 h30" ng-click="next(‘n‘)">></button>
</div>
<div class="over fontSize16">
<span class="width30 textAlignCenter h30 fl">日</span>
<span class="width30 textAlignCenter h30 fl">一</span>
<span class="width30 textAlignCenter h30 fl">二</span>
<span class="width30 textAlignCenter h30 fl">三</span>
<span class="width30 textAlignCenter h30 fl">四</span>
<span class="width30 textAlignCenter h30 fl">五</span>
<span class="width30 textAlignCenter h30 fr">六</span>
</div>
<div class="over fontSize14">
<span class="width30 textAlignCenter h30 fl" ng-repeat="day in daysOfBefore"> </span>
<span class="width30 textAlignCenter h30 fl" ng-repeat="day in haveDays" ng-click="getTheDay(day)">{{day}}</span>
</div>
<div class="textAlignCenter marginTop20">
<button class="marginLd20">清空</button>
<button class="marginLd20">关闭</button>
</div>
</div>
<script>
angular.module(‘calendary‘,[])
.controller(‘calController‘,[‘$scope‘,‘cal‘,function($scope,cal){
// 6*7日历
var months=[‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘];
var weeks=[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘];
// 年月日初始化
var date=new Date();
$scope.day=date.getDate();//当前为几号
// 获取当前年
$scope.year=date.getFullYear();
cal.setYear($scope.year);
// 判断第几个月份，当前为几月
var monthOrder=date.getMonth();
cal.setMonthOrder(monthOrder);
$scope.month=months[monthOrder];
// 获取某年的某月有几天
var haveDaysOfOneMonth=cal.getDaysOfOneMonth($scope.year,monthOrder);
$scope.haveDays=cal.createDaysFrom1(haveDaysOfOneMonth);
// 获取当前周几，然后算出前面月份有几天，留空白
var weekDayForFirstDayOfMonth=cal.getFirstDayOfMonth($scope.year,monthOrder);
// 留白部分
$scope.daysOfBefore=cal.createDaysOfBlank(weekDayForFirstDayOfMonth);
$scope.next=function(direction){
if(direction==‘p‘){
cal.getPrevMonth();
comm();
console.log(‘上个月‘);
}else if(direction==‘n‘){
cal.getNextMonth();
comm();
console.log(‘下个月‘);
}
};
function comm(){
monthOrder=cal.getMonthOrder();
$scope.month=months[monthOrder]
$scope.year=cal.getYear();
haveDaysOfOneMonth=cal.getDaysOfOneMonth($scope.year,monthOrder);
$scope.haveDays=cal.createDaysFrom1(haveDaysOfOneMonth);
weekDayForFirstDayOfMonth=cal.getFirstDayOfMonth($scope.year,monthOrder);
$scope.daysOfBefore=cal.createDaysOfBlank(weekDayForFirstDayOfMonth);
};
$scope.getTheDay=function(theDay){
$scope.selectDay=theDay;
}
}])
.factory(‘cal‘,function(){
var cals={};
cals.days=[‘31‘,‘28‘,‘31‘,‘30‘,‘31‘,‘30‘,‘31‘,‘31‘,‘30‘,‘31‘,‘30‘,‘31‘];
var date=new Date();
// 判断二月份有几天
cals.getDaysOfFeb=function(y){
if(y/4==0){
if(y/400==0){
// 整除400闰年
cals.days[1]=29;
}else if(y/100==0){
// 整除100平年
cals.days[1]=28;
}else{
cals.days[1]=29;
}
}else{
cals.days[1]=28;
}
};
// 设定年份
cals.setYear=function(y){
cals.yearNow=y;
};
cals.getYear=function(){
return cals.yearNow;
};
// 得到某个月有多少天
cals.getDaysOfOneMonth= function(y,m){
// 先确定2月份有多少天
cals.getDaysOfFeb(y);
return cals.days[m];
};
// 创建数组1~d
cals.createDaysFrom1=function(d){
var days=[];
for(var i=1;i<=d;i++){
days.push(i);
}
return days;
};
cals.createDaysOfBlank=function(len){
var days=[];
for(var i=0;i<len;i++){
days.push(i);
};
return days;
};
// 设定当前是第几个月
cals.setMonthOrder=function(n){
cals.thisMonth=n;
};
// 获得当前是第几个月
cals.getMonthOrder=function(){
return cals.thisMonth;
};
// 获取下一个月，是第几个月；>12增一年，月份序号清零，<0减一年，月份序号置满11
cals.getNextMonth=function(){
//
cals.thisMonth+=1;
if(cals.thisMonth>11){
cals.thisMonth=0;
cals.yearNow=parseInt(cals.yearNow)+1;
}
};
cals.getPrevMonth=function(){
cals.thisMonth-=1;
if(cals.thisMonth<0){
cals.thisMonth=11;
cals.yearNow=parseInt(cals.yearNow)-1;
}
};
// 判断当月第一天是周几
cals.getFirstDayOfMonth=function(y,m){
var dateForFirstDay=new Date(y,m,‘1‘);
return dateForFirstDay.getDay();
};
return cals;
})
</script>
</body>
</html>
以上是关于angularJS写的简易日历，有待简化，由于自己写的断断续续的以及编写过程中设计想法的改变，应该不够精简的主要内容，如果未能解决你的问题，请参考以下文章