页面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. asp.net文件操作类

    /** 文件操作类 **/ #region 引用命名空间 using System; using System.Collections.Generic; using System.Text; usin ...

  2. 利用Oracle数据库的UTL_SMTP发送HTML 邮件

    Ok, that looks hard, but if you use this procedure I wrote, its really quite easy, it does all of th ...

  3. pagination jquery最简单的分页【无刷新和刷新都通用】

    参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数            ...

  4. HDU 2473 - Junk-Mail Filter ，并查集的删点

    Problem Description Recognizing junk mails is a tough task. The method used here consists of two ste ...

  5. codeforces 几道题目

    BZOJ挂了....明天就要出发去GDKOI了....不能弃疗. 于是在cf水了几道题, 写写详(jian)细(dan)题解, 攒攒RP, 希望GDKOI能好好发挥.......  620E. New ...

  6. PLSQL Developer建表时注释（COMMENT）中文乱码的解决方案（Windows）

    简单的让你无法想象! 处理方法:在环境变量中新增系统变量 以下变量值对: 变量名:NLS_LANG变量值:AMERICAN_AMERICA.ZHS16GBK 好了

  7. jsp中添加弹窗口并且实现向后台双向传递数据

    思路:使用jquery-easyui框架实现弹出div,在jsp初始化时从后台获得数据初始化div中的form表单元素的value属性,从而获得后台数据.在点击确定按钮时使用ajax向后台发送数据. ...

  8. jQuery的实用小技巧

    1. 禁止右键点击 $(function(){ $(document).bind('contextmenu', function(e){ return false; }) }) 2. 隐藏搜索文本框文 ...

  9. Android Studio 实时显示布局文件Preview窗口

    Android Studio的功能包含preview窗口, 可以查看布局(layout)的样式; 位置:app->src->main->res(资源)->layout(布局), ...

  10. ContentProvider类的解析

    一.ContentProvider类 1.作用:专门用于不同应用之间进行数据共享的方式. 二.实现方法 1.创建ContenteProvider类 步骤一:继承ContentProvider接口,重写 ...