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也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
随机推荐
- [FTP] FTPClient--FTP操作帮助类，上传下载，文件，目录操作 (转载)
点击下载 FTPClient.zip 这个类是关于FTP客户端的操作1.构造函数 2.字段 服务器账户密码3.属性4.链接5.传输模式6.文件操作7.上传和下载8.目录操作9.内容函数看下面代码吧 / ...
- 交换机access与trunk口
理论知识: 以太网端口二种链路类型:Access 和Trunk. Access 类型的端口:只能属于1 个VLAN,一般用于连接计算机的端口: Trunk 类型的端口:可以允许多个VLAN 通过,可以 ...
- Codevs 1140 Jam的计数法 2006年NOIP全国联赛普及组
1140 Jam的计数法 2006年NOIP全国联赛普及组 传送门 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description Jam是个喜欢标 ...
- prime，素数的判断——c语言
输入一个数a,求他是否是素数(用函数) 程序: #include<stdio.h> int prime(int a)-----------------------------------/ ...
- Leetcode系列-Search in Rotated Sorted Array
做Leetcode题有一段时间了,但都是断断续续的,到现在才做了30题左右,感觉对自己来说还是有点难度的.希望自己能继续坚持下去,在校招前能解决超过一百题吧. 其实这些题就是用来训练你的解题思路的,做 ...
- PHP表单常用正则表达式（URL、HTTP、手机、邮箱等）
<?php /** * @description: 正则表达式匹配 */ class Regex { /** * @手机号 */ public static function Phone($su ...
- 用Django搭建个人博客—(2)
今日任务: 1 blog的数据库模型定义 2 简单的注册登录功能的实现 项目的源文件已经推送到git@oschina.net. 所以,如果想要参阅源码的请移步 (Fork) http://git.os ...
- 使用linux的GDB打印STL(vector,map,set..................)
在linux用gdb或者cgdb计较不爽的地方是无法打印STL的东西,所有啊去网上找了找解决方案https://www.douban.com/note/182826844/?qq-pf-to=pcqq ...
- CocoaPods ADD private Spec Repo
Private Pods CocoaPods is a great tool not only for adding open source code to your project, but als ...
- main函数的参数
一.main的参数 形式:int main(int argc,char *argv[]) 参数argc.argv可以被看做是main函数的形参,argc是整型变量,代表的是参数的个数:argv是指向字 ...