页面HTML代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>JS输出日历</title>

    <style type="text/css">

        /* global css document => author:intval@163.com */

        html{height:100%;-overflow-y:scroll;border:0}body{min-height:100%;-height:100%;position:relative}

        body,h1,h2,h3,h4,h5,h6,p,div,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0;border:0}

        h1,h2,h3,h4,h5,h6,select,input,textarea,button,table{font-size:100%;font-weight:normal}

        ul,ol,dl{list-style:none}a{text-decoration:none;color:#36c}u{text-decoration:none}i,em{font-style:normal}

        a:hover{text-decoration:underline}a img{border:none}a,select,input,textarea{outline:none}.fr{float:right}

        table{border-collapse:collapse;border-spacing:0}th{text-align:left;font-weight:normal}.fl{float:left}

        .cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{+zoom:1}

        body{color:#000;background:#fff;font:12px/15px Microsoft YaHei}

        #u-calender{padding:50px 0 0 200px}

        #u-calender #u-slt{font-size:14px}

        #u-slt select{font:13px Verdana}

        #u-calender .z-on{background:#36c;color:#fff; font-weight:700}

        #u-calender .z-pass{background:#efefef;color:#ccc}

        #u-calender table{ border-top:1px solid #ccc; border-right:1px solid #ccc; width:300px}

        #u-calender table tr td{ border-bottom:1px solid #ccc; border-left:1px solid #ccc;text-align:center;padding:5px 0}

    </style>

</head>

<body>

<div id="u-calender">

    <table class="calender"><tr><td colspan="7" id="u-slt"></td></tr><tr id="u-week"></tr></table>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="calendar.js"></script>

</div>

</body>

</html>

下面是calendar.js的代码

$(document).ready(function(){

    function createCalendar(year, month){

        var _Date = new Date(), _thenYear = _Date.getFullYear(), _thenMonth = _Date.getMonth() + 1, _thenDay = _Date.getDate();

        var aryMonth = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];

        var aryWeek = ['日', '一', '二', '三', '四', '五', '六'];

        // 年份

        var ech = 8;

        var _year = year ? parseInt(year) : _thenYear;

        var _selectYear = '&nbsp;&nbsp;年份:<select id="u-year">';

        for(var i = (_year + ech), n = (_year - ech); i >= n; i--){

            var _selected = (_year == i) ? ' selected="selected"' : '';

            _selectYear += '<option value="'+ i +'"'+ _selected +'>'+ i +'</option>';

        }

        _selectYear += '</select>';

        // 月份

        var _month = month ? parseInt(month) : _thenMonth;

        var _selectMonth = '月份:<select id="u-month">';

        for(var i = 0, n = aryMonth.length; i < n; i++){

            var _selected = (_month == (i+1)) ? ' selected="selected"' : '';

            _selectMonth += '<option value="'+ (i+1) +'"'+ _selected +'>'+ aryMonth[i] +'月</option>';

        }

        _selectMonth += '</select>&nbsp;&nbsp;';

        // 加入月份和年份的下拉控件

        $('#u-slt').html(_selectMonth + _selectYear);

        // 输出日期排序

        var _selectWeek = '';

        for(var i = 0, n = aryWeek.length; i < n; i++){

            _selectWeek += '<td>周'+ aryWeek[i] +'</td>';

        }

        $('#u-week').html(_selectWeek);

        // 当月的总天数 和 当月第一天是星期几

        var maxDay = _date(_year, _month);

        var first = _date(_year, _month, 'firstDay');

        // 当月的总天数的数组

        var aryDay = _range(1, maxDay);

        // 第一排的空位数 用 上月后几位日期 填补

        if(first % 7 != 0){

            var prevDay = _date(_year, (_month - 1)); // 上月的总天数

            var aryFirst = _range(prevDay - first + 1, prevDay);

            aryDay = aryFirst.concat(aryDay);

        }

        // 最后排的空位数 用 下月的前几位日期填补

        var lenLast = aryDay.length, last = 7 - lenLast % 7;

        var aryLast = last % 7 == 0 ? '' : _range(1, last);

        if(aryLast != '') aryDay = aryDay.concat(aryLast);

        // 日期循环输出 且 写入Body

        var _trHtml = '<tr class="u-day">';

        for(var i = 0, n = aryDay.length; i < n; i++){

            var strDay = aryDay[i];

            var dayPass = (i < first || i >= lenLast) ? ' class="z-pass"' : ''; // 上月或下月的日期变灰色

            var dayOn = (_year == _thenYear && _month == _thenMonth && strDay == _thenDay && dayPass == '') ? ' class="z-on"' : '';

            _trHtml += '<td'+ dayOn + dayPass +'>'+ _sprintf(strDay) +'</td>';

            if((i + 1) % 7 == 0) _trHtml += '</tr><tr class="u-day">';

        }

        _trHtml += '</tr>';

        _trHtml = _trHtml.replace('<tr class="u-day"></tr>', '');

        $('.calender').append(_trHtml);

    }

    // 默认加载日历

    createCalendar();

    // 下拉项的点击变换事件

    $('#u-year, #u-month').live('change', function(){

        var y = $('#u-year').val(), m = $('#u-month').val();

        $('.u-day').remove();

        createCalendar(y, m);

    });

    // 返回日历的信息值(当月或上月总天数，当月第一天是星期几)

    function _date(year, month, type){

        var ary = new Date(year, month, 0);

        if(type == 'firstDay'){

            ary.setDate(1);

            return ary.getDay();

        }else{

            return ary.getDate();

        }

    }

    // 创建日期的数组

    function _range(x, y){

        var ary = Array();

        var i = 0; // 必须从0开始，否则.length获取的长度不准确

        for(x; x <= y; x++){

            ary[i] = x;

            i++;

        }

        return ary;

    }

    // 补齐小于10的数值前的0

    function _sprintf(val){

        var str = val.toString();

        if(val < 10) str = '0' + str;

        return str;

    }

});

代码完成后实现的效果截图：

JS输出日历的更多相关文章

  1. 创建一个js日历（原生JS实现日历）

    前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...

  2. C#输出日历

    用C#输出日历,此功能可用于Ajax方式列出计划日程相关的内容,由于是C#控制输出,可以方便加上自己需要的业务处理逻辑. 1.控制台输出: using System; namespace 控制台日历 ...

  3. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  4. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  5. PHP程序输出日历

    以下代码只是简单实现日历的效果和逻辑思路,没有使用类封装,权当抛砖引玉,有兴趣的朋友可以封装起来,方便调用. <?php /** * PHP利用时间函数输出日历 * Rain.zen $ int ...

  6. 2.23 js处理日历控件（修改readonly属性）

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  7. 解决js输出汉字乱码问题

    当我们需要使用js输出汉字时,偶然会出现输出的中文汉字乱码的情况,在网上收了很多解决方案 1.在mata中加 <meta content="text/html; charset=utf ...

  8. 使用html+css+js实现日历与定时器，看看今天的日期和今天剩余的时间。

    使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...

  9. C语言 · 输出日历

    算法提高 输出日历   时间限制:1.0s   内存限制:512.0MB      按照下述格式打印2006年12月日历: Calendar 2006-12---------------------- ...

随机推荐

  1. css 的z-index研究

    z-index的值受position影响,而且还受父级元素影响.有很多种情况.下面是我看的一个特别全的网址,讲的很详细,收藏了,以后温故用. 对应的例子页面:http://www.neoease.co ...

  2. UVA 10410 Tree Reconstruction

    题意: 给定一个树的BFS和DFS,求这棵树. 分析: 拿dfs的序列,分成若干段,每一段相当一个子树,这样就可以利用bfs的序列去将dfs的序列分段,然后利用一个队列去存放每一段,不断求出子树即可. ...

  3. 图的深度优先遍历(DFS) c++ 非递归实现

    深搜算法对于程序员来讲是必会的基础,不仅要会,更要熟练.ACM竞赛中,深搜也牢牢占据着很重要的一部分.本文用显式栈(非递归)实现了图的深度优先遍历,希望大家可以相互学习. 栈实现的基本思路是将一个节点 ...

  4. 本地网址连不上远程mysql问题

    问题:host 'XXX.XXX.XXX.XXX'is not allowed to connect to this MySQL server 解决办法: 进入远程mysql #mysql -u ro ...

  5. linux 让一个程序开机自启动并把一个程序加为服务

    本文以tomcat7为例 首先找到tomcat启动的目录,我的为 cd /usr/local/tomcat7/bin/ 这个目录 启动脚本是startup.sh 然后在/etc/rc.d/rc.loc ...

  6. php 截取字符串

    /** * 方法库-截取字符串-[该函数作者未知] * @param string $string 字符串 * @param int $length 字符长度 * @param string $dot ...

  7. 不调用库函数实现 strCpy

    实现函数时,首先要弄清楚特殊情况,边界条件要搞清. char* strCpy(char* src,char* des){ //判断指针是否为空 if(NULL==src||NULL == des) r ...

  8. oc @property参数

  9. relatedTarget, fromElement, toElement

    原文:http://www.quirksmode.org/js/events_mouse.html#relatedtarget W3C在mouseover和mouseout事件中添加了relatedT ...

  10. web本地存储-IndexedDB

    IndexedDB, HTML5中的一种数据存储方式,索引数据库. 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称.一个数据库可包含多个对象存储,一个对象存储相当于 ...