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">&ensp;</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>

时间： 2024-10-29 19:09:05

angularJS写的简易日历，有待简化，由于自己写的断断续续的以及编写过程中设计想法的改变，应该不够精简的相关文章

简易日历的制作

本菇凉最近很是用心的在学习javascript,这日历的制作主要是innerHTML的运用,以及简单的数组的索引index.主要考察这两个,还有实现的思路.谢谢大家,因为是刚开始写博文呢,所以不详细的地方,后面一定好好改呢~~ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http

JavaScript简易日历

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

AngularJs打造一个简易权限系统

AngularJs打造一个简易权限系统一.引言上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好

原生Js_制作简易日历

javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能实现步骤 a) 获取需要操作的dom对象 b) 在所有的li上添加鼠标经过的事件 c) 在li的鼠标经过的事件中将所有li的class设置为空,并将当前li的class设置为"active",同时利用innerHTML方法在id为text的div中设置html代码 <!doctype html> <html> &l

简易日历

import java.util.Scanner; public class calendar { public static void main(String args[]) { System.out.println("----欢迎使用简易日历-----"); Scanner in=new Scanner(System.in); String say; do { System.out.println(); System.out.print("请输入年份:"); i

css,js写的简易的tab导航

简易tab导航作为前端新手,看着别人写的tab导航代码,自己想模仿却总是忘记.于是这次自己利用css,js写了简易的tab导航,话不多说,上代码,首先是html和css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style type="tex

TinyWS —— 一个C++写的简易WEB服务器(一)

写在前面每个码农可能都会偶尔有自己做一个常用软件的想法,比如操作系统,编译器,邮件服务器/客户端,文字编辑器等等.这里面有些很难,比如操作系统,做一个最简单的也要付出很大的努力,可是大部分常用工具都是可以比较容易的做一个简易版本(当然也是只能玩玩而已).于是我做了一个非常简陋的WEB服务器 —— TinyWS.这里主要是记录下自己整个过程中的一些想法. TinyWS是用C++”从头开始“做的,也就是说,除了C/C++的标准库和操作系统的系统调用,并没有使用第三方库.我并不喜欢C++(甚至有些厌

前端作品二之——简易日历

1.功能概述通过HTML.CSS3.javascript语言编写的一个如下图所示的简易日历,当鼠标移入对应月份的格子时,只有当前的月份的l格子高亮,其他月份的格子都是暗的,并在最下面显示对应的月份的活动. 2.布局先创建一个div1,在这个div1里创建个ul,再在ul里创建12个li,将上面12个月份显示放在对应的li中.创建div2用来显示每个月的活动.设置好CSS样式,就得到了如上图所示的静态页面. 3.功能实现将每个月的活动内容存入一个长度为12的数组a中,因此数组a里面的元素就对

javascript中Date对象的应用——简易日历的实现

× 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路效果演示 HTML说明使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="con