页面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. 查看和清除本机DNS缓存记录

    Windows上查看和清除本机DNS缓存记录: ipconfig /displaydns  查看ipconfig /flushdns  清除 貌似Time To Live的单位是秒.

  2. C# 10 总复习

    数据类型--变量与常量--运算符与表达式--语句(if,for)--数组--函数--结构体 一.数据类型: (一)内建类型 整型(int short long byte uint ushort ulo ...

  3. Android ImageView图片自适应

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面) <ImageView     android:id=" ...

  4. I/O重定向与管道

    1.输出重定向 (1)>  覆盖输出 (2)>>  追加输出 (3) set -C: 禁止对已经存在文件使用覆盖重定向: 强制覆盖输出,则使用 >| set +C: 关闭上述功 ...

  5. MySql的like语句中的通配符：百分号、下划线和escape 的使用

    MySql的like语句中的通配符:百分号.下划线和escape %代表任意多个字符 select * from user where username like '%huxiao'; select ...

  6. JavaScript学习笔记（二）原型

    JavaScript不包含传统的类继承模型,而是使用prototype原型模型.JavaScript使用原型链的继承方式. function Foo() { this.value = 42; } Fo ...

  7. 初学swift笔记变量的定义（一）

    swift变量的定义 1 import Foundation /* 变量的定义 变量的类型是可以不用写的 var a=10 常量的定义 let修饰 */ print(a) let b= print(b ...

  8. 【翻译】MVC Music Store 教程-概述(二)

    1. 文件->新建项目 软件安装 此篇将从运用免费的Visual Web Developer 2010Express来创建ASP.NET MVC3开始,逐步的添加一些功能来创建一个完整的应用程序 ...

  9. SQL Server 移动系统数据库位置(非master)

    以移动tempdb为例子: -------------------------------------------------------------------------------------- ...

  10. Android01-概述

    1.Android特点    开源和免费    强大的研发力量,完整的生态圈    互联网服务的支持 2.Android系统架构    应用层    应用框架层    系统运行库层    Linux内 ...