<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

                <th>星期六</th>

                <th>星期七</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

    <script>

        function showMonth(year, month) {

            var firstDay = new Date(year, month - 1, 1)

            var lastDay = new Date(year, month, 0)

            var lastDayOfLastMonth = new Date(year, month - 1, 0).getDate()

            var weekOfFirstDay = firstDay.getDay()

            var weekOfLastDay = lastDay.getDay()

            if (weekOfFirstDay === 0) {

                weekOfFirstDay = 7

            }

            if (weekOfLastDay === 0) {

                weekOfLastDay = 7

            }

            var allDay = []

            var _weekOfFirstDay = weekOfFirstDay

            for (var i = firstDay.getDate(), l = lastDay.getDate() + 1; i < l; i++) {

                var oneDay = {}

                oneDay.day = i

                oneDay.week = _weekOfFirstDay

                allDay.push(oneDay)

                if (++_weekOfFirstDay > 7) {

                    _weekOfFirstDay = 1

                }

            }

            var dayOfLastMonth = lastDayOfLastMonth

            for (var l = weekOfFirstDay; --l;) {

                var oneDay = {}

                oneDay.day = dayOfLastMonth

                oneDay.week = l

                allDay.unshift(oneDay)

                dayOfLastMonth--

            }

            var dayOfNextMonth = 1

            for (var i = weekOfLastDay + 1, l = 8; i < l; i++) {

                var oneDay = {}

                oneDay.day = dayOfNextMonth++

                oneDay.week = i

                allDay.push(oneDay)

            }

            var html = ''

            for (var i = 0, l = allDay.length; i < l; i++) {

                var oneDay = allDay[i]

                if (oneDay.week == 1) {

                    html += '<tr>'

                    html += '<td>' + oneDay.day + '</td>'

                } else if (oneDay.week == 7) {

                    html += '<td>' + oneDay.day + '</td>'

                    html += '</tr>'

                } else {

                    html += '<td>' + oneDay.day + '</td>'

                }

            }

            document.querySelector('tbody').innerHTML = html

        }

        showMonth(2015, 6)

    </script>

</body>

</html>
function showMonth(shadowRoot, year, month) {

    var today = new Date(),

        firstDay,

        lastDay,

        lastDayOfLastMonth,

        firstValInTable,

        weekOfFirstDay,

        rowCount,

        tempHTML = '',

        originalDate

    originalDate = today

    if(typeof year === 'undefined') {

        year = today.getFullYear()

    }

    if(typeof month === 'undefined') {

        month = today.getMonth() + 1

    }

    firstDay = new Date(year, month-1, 1)

    lastDay = new Date(year, month, 0)

    lastDayOfLastMonth = new Date(year, month-1, 0).getDate()

    year = firstDay.getFullYear()

    month = firstDay.getMonth() + 1

    weekOfFirstDay = firstDay.getDay()

    if(weekOfFirstDay === 0) {

        weekOfFirstDay = 7

    }

    // 有多少天减掉1 加上第一天是周几 周三就周一周二周三三天加

    rowCount = Math.ceil(((lastDay - firstDay)/1000/3600/24 +weekOfFirstDay)/7)

    // 表格第1个的值

    // 如果是 5 0,-1,-2,-3 -5+2

    firstValInTable = -weekOfFirstDay + 2

    for(var i = 0; i < rowCount; i++) {

        tempHTML += '<tr>'

        for(var j = 0; j < 7; j++) {

            var day = firstValInTable + 7 * i + j,

                showDay = day,

                weekendClass,

                monthClass,

                todayClass

            if(month === originalDate.getMonth() + 1 && day === originalDate.getDate()) {

                todayClass = 'current'

            } else {

                todayClass = ''

            }

            if(j === 7-1){

                weekendClass = 'sunday'

            } else if (j === 6-1) {

                weekendClass = 'saturday'

            } else {

                weekendClass = ''

            }

            if(day <= 0) {

                showDay = day + lastDayOfLastMonth

                monthClass = 'prevmonth'

            } else if (day > lastDay.getDate()) {

                showDay = day - lastDay.getDate()

                monthClass = 'nextmonth'

            } else {

                monthClass = ''

            }

            tempHTML += '<td tabindex="0" class="'+todayClass+' '+weekendClass+' '+monthClass+'" data-value="'+day+'">'+showDay+'</td>'

        }

        tempHTML += '</tr>'

    }

    shadowRoot.querySelector('.year').innerText = year

    shadowRoot.querySelector('.month').innerText = month

    shadowRoot.querySelector('tbody').innerHTML = tempHTML

}

showMonth的更多相关文章

  1. 微信小程序之ES6与事项助手

    由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码 ...

  2. javascript实例学习之六—自定义日历控件

    基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...

  3. 原生js实现仿window10系统日历效果

    舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...

  4. .NET获取英文月份缩写名(可获取其他国家)

    来自: http://www.cnblogs.com/highend/archive/2010/03/16/1687126.html 今天在看本公司原有的项目代码当中 很不幸看到其中一些实现的部分代码 ...

  5. Android使用GridView实现日历功能（详细代码）

    代码有点多,发个图先: 如果懒得往下看的,可以直接下载源码吧(0分的),最近一直有人要,由于时间太久了,懒得找出来整理,今天又看到有人要,正好没事就整理了一下 http://download.csdn ...

  6. jquery日历签到控件的实现

    calendar.js var calUtil = { //当前日历显示的年份 showYear:2015, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays ...

  7. C#-之属性（2）

    1.   属性结合字段和方法得多个方面,对于对象的用户来说,属性就像字段(这样就可以修改属性值或者访问),对于类的实现者来说,属性包括两个各部分get访问器(用于读取属性)和set访问器(用于设置属性 ...

  8. vue2.0之echarts使用

    1.首先下载echart依赖 npm install echarts --save备注:npm 安装报错时使用cnpm 2.全局注册 在main.js里引入echart并在vue中注册echart / ...

  9. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

随机推荐

  1. bootstrap 模态框关闭状态怎么获取

    比如现在有个场景,一个事件 需要在模态框关闭之后再执行自己的逻辑,先上图: 参考官网说明:http://v3.bootcss.com/javascript/#modals-events //每次关闭模 ...

  2. [XML] Resource帮助类

    点击下载 Resources.rar /// <summary> /// 类说明:Resources /// 编 码 人:苏飞 /// 联系方式:361983679 /// 更新网站:[u ...

  3. UDP，TCP理解。

    UDP: 面向无连接, 每个数据大小限制在64K内 因为面向无连接,所以就是不可靠协议. 将数据和源和谜底封装到数据包当中,不需要建立连接.速度快(就像送快递一样,管你在不可以先到你门口) 用处:聊天 ...

  4. ASCII 码表对照 2

    http://www.asciima.com/ ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的 ...

  5. KMP算法_读书笔记

    下面是KMP算法的实现伪代码: KMP_MATCHER ( T, P ) . n = T.length . m = P.length . next = COMPUTE_PREFIX_FUNCTION ...

  6. Winedt 7.0 Build: 20120321 永久试用方法 WinEdt 7.0 破解

    该方法,不是破解. 因为WinEdt试用版与正式版功能无异. 所以,该方法是 通过更新注册表信息,重置安装时间. 也就是重新获取31天的试用期时长. 方法如下: 1.用管理员权限打开CMD. 2.运行 ...

  7. SQL SERVER排序函数

    排名函数是SQL Server2005新加的功能.在SQL Server2005中有如下四个排名函数: 1.row_number 2.rank 3.dense_rank 4.ntile 下面分别介绍一 ...

  8. mac管理员密码破解

    方法一:官方解决方法.找出电脑原配的系统盘,找不到就借一张或者刻录一张,重启电脑,启动的时候按C键,选好语言后进入安装的时候,点击“常用工具”,里面有一项是“重设密码”,这时就可以重新设定Mac OS ...

  9. linux命令行抓取网页快照-（xvfb+CutyCapt）

    目的: 在一台没有安装X-server的Debian服务器上实现命令行抓取网页快照 软件: xvfb(在命令行下实现对X-server的模拟,渲染图形进行缓存)-在没有安装X-Server的环境下提供 ...

  10. C字符串总结+字符串库实现（增，改，删，查）：

    <一>,字符指针&字符数组 两者形式: 字符指针:char *p; 字符数组:char str[100]; 两者区别: 字符指针p是变量: 字符数组str是常量: 访问元素方式: ...