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也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
随机推荐
- compareTo()
从字面意思可知这个方法就是比较的意思. 所以该方法有如下两种情况: 1.比较前后的两个字符不相同: (1) String str = "Hello World"; Stri ...
- 第一篇：杂项之pymysql连接池
杂项之pymysql连接池 杂项之pymysql连接池 本节内容 本文的诞生 连接池及单例模式 多线程提升 协程提升 后记 1.本文的诞生 由于前几天接触了pymysql,在测试数据过程中,使用普 ...
- BI任务列表
了解点击流系统和pv/uv的相关计算 关于pv的那些事!! ···············································2014-09-10 homework做了些什 ...
- Bootstrap--全局CSS样式之排版
Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式. (1)标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还 ...
- 每日陌生php函数
1,date_default_timezone_set(PRC) 设定一个脚本中所有日期函数的默认时区,PRC设置中国时区 2,microtime(true) 返回当前unix微秒时间戳 139868 ...
- 自己做的demo---关于java控制台输入跟类型转化跟处理异常的demo
package exception; import java.util.InputMismatchException; import java.util.Scanner; /*public class ...
- CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\d29b5393\123c3a1c\App_Code.odl3w4o6.dll”--“拒绝访问。 ”
IIS部署网站或者Webservice时,出现以下问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Tempor ...
- c#中var关键字用法
Technorati 标签: C# 转载自csdn:http://blog.csdn.net/robingaoxb/article/details/6175533 var关键字是C# 3.0开始新 ...
- python基础知识十一
图形软件 使用Python的GUI库——你需要使用这些库来用Python语言创建你自己的图形程序.使用GUI库和它们的Python绑定,你可以创建你自己的IrfanView.Kuickshow软件或者 ...
- 容易被忽略的两个方法：onSaveInstanceState()和onRestoreInstanceState()
onSaveInstanceState()和onRestoreInstanceState()两个方法,在Activity中是比较容易忽视的方法,但是不得不说还是比较好用的方法,onSaveInstan ...