页面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. .net 加密错误：填充无效，无法移除

    今天用System.Security.Cryptography加密.使用了AesManaged,报错:填充无效,无法移除.分析是解密失败,密文损坏,或者KEY,IV不正确. using (AesMan ...

  2. JavaScript中的this引用

    在JavaScript的学习当中,this关键字的出现频率可不低,所以想想有必要对this关键字做一个总结.在总结过程中,参考的资料来源于书本及网上. 一.定义 1.this是函数内部的一个特殊对象( ...

  3. HDU 5256 - 序列变换 ，树状数组+离散化 ，二分法

    Problem Description 我们有一个数列A1,A2...An,你现在要求修改数量最少的元素,使得这个数列严格递增.其中无论是修改前还是修改后,每个元素都必须是整数.请输出最少需要修改多少 ...

  4. Windows中进程的内存结构

    基础知识: 栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对栈的插入和删除操作被称为入栈和出栈. 有一组CPU指令可以实现对进程 ...

  5. 如何截取url中的各个参数？

    在页面跳的时候,目的界面可能会根据url中的某些参数进行数据处理,这个时候如何能快速并设计一个通用的截取url中的参数,并且获取各个参数值? 代码: url = location.search;//获 ...

  6. MySQL必知必会笔记<2>

    [英]ben Forta著 5 1.0  *使用扩展查询* |---->select note from table   where Match(note) Against('anl'); |- ...

  7. PHPStrom上传文件报502错误原因

    PhpStorm是一个轻量级且便捷的PHP IDE,其自身拥有apache类似的编译器,能够在无Apache的情况下运行,很适合初学PHPStrom的朋友. 但是我发现了一个问题,那就是用PHPStr ...

  8. chroot

    用途:更改命令的根目录. 语法:chroot Directory Command 描述: 注意:如果新根目录中的特殊文件具有与实际根目录不同的主要和次要设备号,则可能会覆盖文件系统. 只有具有 roo ...

  9. 使用Mindjet MindManager 制作流程图案例

    心得体会是: 导出为swf格式的流程图最为美观 有些过于复杂的对象在swf viewer中是无法显示的(比如各种表格,任务,提醒,自定义属性). 所有主题和子主题在viewer刚打开的时候一定都是全部 ...

  10. Delphi常见图象格式转换技术

    TJPEGScale = (jsFullSize, jsHalf, jsQuarter, jsEighth);//图片大小(全部,1/2,1/4,1/8)TBitmap.pixelFormat:=pf ...