showMonth
<!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的更多相关文章
- 微信小程序之ES6与事项助手
由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码 ...
- javascript实例学习之六—自定义日历控件
基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...
- 原生js实现仿window10系统日历效果
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...
- .NET获取英文月份缩写名(可获取其他国家)
来自: http://www.cnblogs.com/highend/archive/2010/03/16/1687126.html 今天在看本公司原有的项目代码当中 很不幸看到其中一些实现的部分代码 ...
- Android使用GridView实现日历功能（详细代码）
代码有点多,发个图先: 如果懒得往下看的,可以直接下载源码吧(0分的),最近一直有人要,由于时间太久了,懒得找出来整理,今天又看到有人要,正好没事就整理了一下 http://download.csdn ...
- jquery日历签到控件的实现
calendar.js var calUtil = { //当前日历显示的年份 showYear:2015, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays ...
- C#-之属性（2）
1. 属性结合字段和方法得多个方面,对于对象的用户来说,属性就像字段(这样就可以修改属性值或者访问),对于类的实现者来说,属性包括两个各部分get访问器(用于读取属性)和set访问器(用于设置属性 ...
- vue2.0之echarts使用
1.首先下载echart依赖 npm install echarts --save备注:npm 安装报错时使用cnpm 2.全局注册 在main.js里引入echart并在vue中注册echart / ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
随机推荐
- datebox清除按钮，datebox加上清除按钮，easyui datebox加上清除按钮
datebox加上清除按钮,easyui datebox加上清除按钮 >>>>>>>>>>>>>>>>& ...
- asp gridview批量删除和全选
本人新手刚学asp.net 全选和删除也是引用了他人的代码试了一试可以实现,感觉很好,就发了上来. 前台代码 <asp:GridView ID="GridView1" r ...
- SharePoint Dialog 使用
SharePoint中弹出模态窗口对体验提高太大了 方法为: 父页面中调用子页面: function showDialog() { var options = { ...
- 【锋利的jQuery】学习笔记03
第三章 jQuery中的DOM操作 一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可 ...
- 【原创教程】一、Angular教程系列之认识angular
为什么我会准备写这个原创教程系列? 写下这个标题之后,看着屏幕上空白的内容区,不知从何下手,想说的似乎有很多,似乎又没啥说的.有时候就会陷入这种矛盾中,有时候就是这样,于是,我下定决心这一次一定要把这 ...
- Java 之文件IO编程 之读取
package com.sun; /* * 这里是对文件IO流读取的操作 * 2014-08-10 */ import java.io.*; public class File_test { publ ...
- C#DbHelperOra,Oracle数据库帮助类 （转载）
主要功能如下数据访问抽象基础类 主要是访问Oracle数据库主要实现如下功能 .数据访问基础类(基于Oracle),主要是用来访问Oracle数据库的. .得到最大值:是否存在:是否存在(基于Orac ...
- Linq转成sql后的分页方法
sql 分页 -- Region Parametersdeclare @pageindex int set @pageindex=2set @pagesize=10 DECLARE @p0 Int = ...
- doj常用包
dojo.raise 抛出一个异常 dojo.errorToString将异常转换为字符串 dojo.render 系统环境对象 dojo.hostenv. ...
- jQuery.each的function中有哪些参数（可以大概理解function中的参数问题）
1.没有参数 $("img").each(function(){ $(this).toggleClass("example"); }); 1 2 3 2.有一个 ...