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也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
随机推荐
- Linux下载jdk ，Linux如何下载jdk
Linux下载jdk Linux如何下载jdk >>>>>>>>>>>>>>>>>>> ...
- 学习java随笔第五篇：流程控制
条件语句 if(表达式){方法体}else if(表达体)else{方法体} 简写形式:if... 一般形式:if...else... 完整形式:if...else if...else 分支语句 sw ...
- angularjs小知识
字符串和对象的转化 :angular.fromJson(jsonStr) 对象转字符串 :angular.toJson(obj) jsonStr:json字符串 obj:对象
- Javascript基础学习(3)_对象和数组
一.对象是一种无序的属性集合,每个属性都有自己的名字和值. 1.创建对象 花括号内逗号分隔 var person = { "Name" : "LiCheng", ...
- JS一些应用脚本
脚本一: //重置下标(可以修改成自己所需要的脚本) function ReSetBoxOrder() { var q = 0;//下标值 var a = 0;//暂未用到 //循环当前tbody下的 ...
- 动态库DLL加载方式-静态加载和动态加载
静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...
- MSSQL存储过程（好久的笔记，翻出来怀念下）
语法结构: create proc 名称 参数列表 as 代码段 调用: exec 存储过程名称 参数列表 要点: .可以使用output修饰参数 .可以使用默认值,注意需要将最后的参数设置成默认值 ...
- HTTP状态吗汇录
页面Http状态查询工具说明 建议直接Ctrl+F来查找状态码 如果向您的服务器发出了某项请求要求显示您网站上的某个网页,那么,您的服务器会返回 HTTP 状态代码以响应该请求. 如果向您的服务器发出 ...
- 寒假ACM训练（二）
放了假的效率明显就低起来,最近也一直在学习Ubuntu,所以一直等到今天才写. 还是在用PC. 真的十分郁闷这个LC-Display,其实从思路上是有很多.不过我最后把他当成8字,分成了七笔. 一直W ...
- Java：对象的序列化
一.对象序列化机制 序列化机制允许将实现序列化的Java对象转换为字节序列,这些字节序列可以被保存在磁盘上或通过网络传输,以备以后重新恢复原来的对象: 序列化机制使得对象可以脱离程序的运行而独立存在: ...