页面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. TcpClient

    public class TcpClientSession { protected TcpClient Client { get; set; } /// <summary> /// 远程地 ...

  2. grep 和 perl多个条件匹配

    grep和perl多个条件匹配使用‘|’作为分割符号 grep -E 'abc|def' perl if(/abc|def/)

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

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

  4. IScroll5+在ios、android点击（click）事件不兼容解决方法

    Bug描述: ios.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:click:true/false click的值是要根据移动终端设备进行判断 ...

  5. 初学swift笔记字典、数组（四）

    import Foundation //字典 元素顺序是无序的 //1.字典元素是键值对 (key:value) //key 一定是可哈希的 string\int\bool var dic1=[&qu ...

  6. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  7. web前端开发常用工具

    http://www.gbin1.com/technology/javautilities/20120806-resource-for-front-end-developer/ 冒泡样式 http:/ ...

  8. C语言单片和C#语言服务器端DES及3DES加密的实现

    原文:C语言单片和C#语言服务器端DES及3DES加密的实现 公司最近在做单片机和C#语言的通信.用的是Socket通信.传输的数据是明文,后来 在会上讨论准备用DES加密(对称加密)来做. 双方约定 ...

  9. sqlserver 增加用户并分配权限

    1.创建用户cmd2:CREATE LOGIN cmd2 WITH  PASSWORD='123qwe!@#',DEFAULT_DATABASE=DEV_CMD CREATE USER cmd2 FO ...

  10. JAVA的IO运用

    IO OF JAVA想写好一篇关于JAVA的IO的文章不容易,因为它涉及的东西很多难以写得有深度和有思路.我虽不才但也写.这篇文章有我个人不少的见解,虽然涉足计算机不深但我不想用一大堆这个可能那个可能 ...