js超简单日历
用原生js写了一个超级简单的日历。当做是练习js中的Date类型。
思路：
- 获取某个日期，根据年份计算出每个月的天数。
- 利用Date中的getDay()知道该月份的第一天为星期几。
- 循环创建表格，显示日历。
html
<!DOCTYPE html>
<html>
<head>
<title>JS简单日历</title>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="Date.css">
</head>
<body>
<div id="content">
<div id="dateInput">
<label>日期：(格式：yyyy-mm-dd)</label>
<input type="text" id="check">
<input type="button" id="changeDate" value="查询">
</div>
<div id="calendar">
<div id="calendarHeader">
<div>
<img id="back" src="back.png">
<span id="cur"></span>
<img id="forward" src="forward.png">
</div>
</div>
<div id="calendarTable">
<table>
<tbody>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="Date.js"></script>
</body>
</html>
css
#dateInput {
background: #33CCCC;
color: white;
font-weight: bold;
max-width: 450px;
margin: 0 auto;
padding: 1em;
}
#calendar {
max-width: 450px;
margin: 0 auto;
background: #5CCCCC;
padding: 1em;
}
#back {
float: left;
}
#forward {
float: right;
}
#cur {
color: white;
font-size: 120%;
position: relative;
left: 30%;
}
table {
max-width: 450px;
margin: 0 auto;
color: white;
padding: 1em;
}
th,td {
width: 50px;
padding: 10px;
text-align: center;
}
td {
border:1px solid white;
}
th {
background-color: #009999;
}
.now {
background-color: #006363;
}
js
var y, m;
function addEvent(func) {
var old = window.onload;
if (typeof old === "function") {
old();
func();
} else {
window.onload = func;
}
}
//设置日历的标题
function setCalendarTitle(obj) {
var year = obj.getFullYear();
var month = obj.getMonth() + 1;
var title = ""+year+"年"+month+"月";
y = year;
m = month;
var set = document.getElementById('cur');
if (set.childNodes.length > 0)
set.removeChild(set.childNodes[0]);
var txt = document.createTextNode(title);
set.appendChild(txt);
var now = new Date(year, month-1, 1);
calculateDay(now);
}
//计算当前月份有几天，第一天是星期几
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
function day(year) {
mDays = new Array(31,28+is_leap(year),31,30,31,31,30,31,30,31,30,31);
return mDays;
}
function calculateDay(obj) {
var dayArr = day(obj.getFullYear());
var dayNum = dayArr[obj.getMonth()];
var dayFirst = obj.getDay(); //0是星期天， 6是星期六
var firstRow;
if (dayFirst != 0) {
firstRow = 8 - dayFirst;//第一行有日期的单元格个数,从右边数
} else {
firstRow = 1;
}
var firstRowBlank = 7 - firstRow; //第一行空的个数
var lastRow = (dayNum - firstRow) % 7; //最后一个有日期的单元格个数
var lastRowBlank = 7 - lastRow;
var RowNum = (dayNum - firstRow - lastRow) / 7 + 2;
renderCalendar(RowNum, firstRow, firstRowBlank, lastRow, lastRowBlank);
}
function renderCalendar(RowNum, firstRow, firstRowBlank, lastRow, lastRowBlank) {
var tbody = document.getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName("tr");
var len = tr.length;
if (len > 1) {
for (var index = 1; index < len; index++) {
tbody.removeChild(tr[1]);
}
}
var i = 1;
var j = 1;
for (; i <= RowNum; i++) {
if (i == 1) {
var row = document.createElement("tr");
while(firstRowBlank > 0) {
var blank = document.createElement("td");
row.appendChild(blank);
firstRowBlank--;
}
while(firstRow > 0) {
var date = document.createElement("td");
var txt = document.createTextNode(j);
date.appendChild(txt);
row.appendChild(date);
j++;
firstRow--;
}
tbody.appendChild(row);
} else if (i == RowNum && lastRow > 0) {
var row = document.createElement("tr");
while(lastRow > 0) {
var txt = document.createTextNode(j);
var date = document.createElement("td");
date.appendChild(txt);
row.appendChild(date);
j++;
lastRow--;
}
while(lastRowBlank > 0) {
var blank = document.createElement("td");
row.appendChild(blank);
lastRowBlank--;
}
tbody.appendChild(row);
} else {
var day = 7;
var row = document.createElement("tr");
while(day > 0) {
var date = document.createElement("td");
var txt = document.createTextNode(j);
date.appendChild(txt);
row.appendChild(date);
j++;
day--;
}
tbody.appendChild(row);
}
}
}
//读取系统当前时间，设置
function initiate() {
var now = new Date();
setCalendarTitle(now);
}
function checkCalendar() {
var button = document.getElementById('changeDate');
button.onclick = function() {
var date = document.getElementById("check").value;
var newDate = new Date(Date.parse(date));
setCalendarTitle(newDate);
}
}
function forwardMoth() {
var forward = document.getElementById("forward");
forward.onclick = function() {
var year = y;
var month = m;
if ((month+1) <= 12) {
var newDate = new Date(year, month, 1);
setCalendarTitle(newDate);
} else {
var newDate = new Date(year+1, 0, 1);
setCalendarTitle(newDate);
}
}
}
function backMonth() {
var back = document.getElementById("back");
back.onclick = function() {
var year = y;
var month = m;
if ((month-1) >= 1) {
var newDate = new Date(year, month-2, 1);
setCalendarTitle(newDate);
m = month - 1;
} else {
var newDate = new Date(year-1, 11, 1);
setCalendarTitle(newDate);
m = 12;
}
}
}
addEvent(initiate());
addEvent(checkCalendar());
addEvent(forwardMoth());
addEvent(backMonth());
效果图：
js超简单日历的更多相关文章
- ECharts.js 超简单入门（本质canvas）
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- js超简单冒泡算法
点击按钮--从大到小排序,可以通过代码中大于号小于号的选择来判定从小到大或者从大到小. <!DOCTYPE html> <html> <head> <titl ...
- js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 超简单的OpenGL & WebGL & Three.js介绍_1
专业解释 什么是OpenGL OpenGL(Open Graphics Library即开放图形库或者“开放式图形库”)是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API). 这个 ...
- ASP.NET中一种超简单的Ajax解决方案
为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...
- 打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）具体解释
为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
- 超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...
随机推荐
- linux杂记（十）what is BASH Shell
first,what is shell?其实只要是碰过计算机的,对于OS(Operation System操作系统,不管是linux.unix.windows)有点概念的人大多都听过这个名词,因为只要 ...
- 服务器搭建纪录linux+mysql+nginx+php
新的项目启动 第一版 首先买了阿里云,选好环境镜像包,一键安装. 第一版php打算不用框架,完全手写,主要的功能点 数据交互和图片传输. 后台搭建好后,使用PHP的Laravel, web端还是选定b ...
- Dijkstra算法模拟讲解
dijkstra算法,是一个求单源最短路径算法 其算法的特点为: 层层逼进,有点类似宽度搜索的感觉 其需要的数据结构为: int map[N][N] 所有点之间的权表 ...
- 翻纸牌游戏（dfs回溯）
翻纸牌游戏 Time Limit : 9000/3000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submiss ...
- 转载ajax
写在前面的话: 用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了. 以前记的也不怎么清楚,这次就重新完整的 ...
- javascript函数作用域链之词法作用域
在开发语言中常见的作用域规则有 块级作用域和词法作用域 作用域 顾名思义就是起作用的区域 定义一变量后 ,可以在此范围作用的区域 一.块级作用域就是用一个块结构分割变量的访问区域 块即{ } 代 ...
- HTML静态网页（框架）
1.frameset frameset最外层,使用时需要去除body改用frameset. <frameset rows="100,*" frameborder=" ...
- sql server中关于批处理与脚本的简单介绍
1.批处理 批处理指的是包含一条或多条T-SQL语句的语句组,这组语句从应用程序一次性地发送到SQL Server服务器执行.SQL Server服务器将批处理语句编译成一个可执行单元(即执行计划), ...
- Microsoft SQL Server 数据库 错误号大全
panchzh :Microsoft SQL Server 数据库 错误号大全0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒 ...
- C#WebService 客户端通过Http调用请求（转）
1.webservice帮助类 public class WebServiceHelper { public static string CallServiceByG ...