JS 操作日期 顺便实现 上一周 和 下一周 功能
作者:bea
今天,一已工作的学生向我求助: 1. 页面加载时,一个地方显示当前日期,其左右各一个箭头,分别表示上一周,下一周 下面的表格显示本周每个日期,从周一到周日 2. 点左右箭头,那个地方显示上一周或下一周的今天,且下面的表格显示上一周或下一周的每个日期 JS本身没有提供日期加减操作能力,所以借此写了几个方法,用以操作日期,主要是实现日期的加减 作者:郴州拓职任文敏 jsDate.htm <script> var currDT; var aryDay = new A
今天,一已工作的学生向我求助:
1. 页面加载时,一个地方显示当前日期,其左右各一个箭头,分别表示上一周,下一周
下面的表格显示本周每个日期,从周一到周日
2. 点左右箭头,那个地方显示上一周或下一周的今天,且下面的表格显示上一周或下一周的每个日期
JS本身没有提供日期加减操作能力,所以借此写了几个方法,用以操作日期,主要是实现日期的加减
作者:郴州拓职任文敏
jsDate.htm
<script>
var currDT;
var aryDay = new Array("日","一","二","三","四","五","六");
//初始页面
function ini() {
currDT = new Date();
showDate();
}
//上一周 或 下一周
function addWeek(ope) {
var num = 0;
if(ope=="-") {
num = -7;
}
else if(ope=="+") {
num = 7;
}
currDT = addDate(currDT,num);
showDate();
}
function showDate() {
span1.innerHTML = currDT.toLocaleDateString(); //显示日期
var dw = currDT.getDay();
var tdDT;
//确定周一是那天
if(dw==0) {
tdDT = addDate(currDT,-6);
}
else {
tdDT = addDate(currDT,(1-dw));
}
//在表格中显示一周的日期
var objTB = document.getElementById("tb1");
for(var i=0;i<7;i++) {
if(tdDT.toLocaleDateString()==currDT.toLocaleDateString()) {
objTB.rows[0].cells[i].style.color = "red"; //currDT突出显示
}
dw = tdDT.getDay();
objTB.rows[0].cells[i].innerHTML = tdDT.getMonth()+1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw];
tdDT = addDate(tdDT,1); //下一天
}
}
//增加或减少若干天,由 num 的正负决定,正为加,负为减
function addDate(dt,num) {
var ope = "+";
if(num<0) {
ope = "-";
}
var reDT = dt;
for(var i=0;i<Math.abs(num);i++) {
reDT = addOneDay(reDT,ope);
}
return reDT;
}
//增加或减少一天,由ope决定, + 为加,- 为减,否则不动
function addOneDay(dt,ope) {
var num = 0;
if(ope=="-") {
num = -1;
}
else if(ope=="+") {
num = 1;
}
var y = dt.getYear();
var m = dt.getMonth();
var lastDay = getLastDay(y,m);
var d = dt.getDate();
d += num;
if(d<1) {
m--;
if(m<0) {
y--;
m = 11;
}
d = getLastDay(y,m);
}
else if(d>lastDay) {
m++;
if(m>11) {
y++;
m = 0;
}
d = 1;
}
var reDT = new Date();
reDT.setYear(y);
reDT.setMonth(m);
reDT.setDate(d);
return reDT;
}
//是否为闰年
function isLeapYear(y) {
var isLeap = false;
if(y%4==0 && y%100!=0 || y%400==0) {
isLeap = true;
}
return isLeap;
}
//每月最后一天
function getLastDay(y,m) {
var lastDay = 28;
m++;
if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12) {
lastDay = 31;
}
else if(m==4 || m==6 || m==9 || m==11) {
lastDay = 30;
}
else if(isLeapYear(y)==true) {
lastDay = 29;
}
return lastDay;
}
</script>
<body onload="ini()"> <!--加载时初始页面-->
<span style="cursor:hand;font-weight:bold;" onclick="addWeek('-')" title="上一周">←</span>
<span id="span1"></span>
<span style="cursor:hand;font-weight:bold;" onclick="addWeek('+')" title="下一周">→</span>
<table id="tb1" border="1" style="font-size:10pt">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
1. 页面加载时,一个地方显示当前日期,其左右各一个箭头,分别表示上一周,下一周
下面的表格显示本周每个日期,从周一到周日
2. 点左右箭头,那个地方显示上一周或下一周的今天,且下面的表格显示上一周或下一周的每个日期
JS本身没有提供日期加减操作能力,所以借此写了几个方法,用以操作日期,主要是实现日期的加减
作者:郴州拓职任文敏
jsDate.htm
<script>
var currDT;
var aryDay = new Array("日","一","二","三","四","五","六");
//初始页面
function ini() {
currDT = new Date();
showDate();
}
//上一周 或 下一周
function addWeek(ope) {
var num = 0;
if(ope=="-") {
num = -7;
}
else if(ope=="+") {
num = 7;
}
currDT = addDate(currDT,num);
showDate();
}
function showDate() {
span1.innerHTML = currDT.toLocaleDateString(); //显示日期
var dw = currDT.getDay();
var tdDT;
//确定周一是那天
if(dw==0) {
tdDT = addDate(currDT,-6);
}
else {
tdDT = addDate(currDT,(1-dw));
}
//在表格中显示一周的日期
var objTB = document.getElementById("tb1");
for(var i=0;i<7;i++) {
if(tdDT.toLocaleDateString()==currDT.toLocaleDateString()) {
objTB.rows[0].cells[i].style.color = "red"; //currDT突出显示
}
dw = tdDT.getDay();
objTB.rows[0].cells[i].innerHTML = tdDT.getMonth()+1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw];
tdDT = addDate(tdDT,1); //下一天
}
}
//增加或减少若干天,由 num 的正负决定,正为加,负为减
function addDate(dt,num) {
var ope = "+";
if(num<0) {
ope = "-";
}
var reDT = dt;
for(var i=0;i<Math.abs(num);i++) {
reDT = addOneDay(reDT,ope);
}
return reDT;
}
//增加或减少一天,由ope决定, + 为加,- 为减,否则不动
function addOneDay(dt,ope) {
var num = 0;
if(ope=="-") {
num = -1;
}
else if(ope=="+") {
num = 1;
}
var y = dt.getYear();
var m = dt.getMonth();
var lastDay = getLastDay(y,m);
var d = dt.getDate();
d += num;
if(d<1) {
m--;
if(m<0) {
y--;
m = 11;
}
d = getLastDay(y,m);
}
else if(d>lastDay) {
m++;
if(m>11) {
y++;
m = 0;
}
d = 1;
}
var reDT = new Date();
reDT.setYear(y);
reDT.setMonth(m);
reDT.setDate(d);
return reDT;
}
//是否为闰年
function isLeapYear(y) {
var isLeap = false;
if(y%4==0 && y%100!=0 || y%400==0) {
isLeap = true;
}
return isLeap;
}
//每月最后一天
function getLastDay(y,m) {
var lastDay = 28;
m++;
if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12) {
lastDay = 31;
}
else if(m==4 || m==6 || m==9 || m==11) {
lastDay = 30;
}
else if(isLeapYear(y)==true) {
lastDay = 29;
}
return lastDay;
}
</script>
<body onload="ini()"> <!--加载时初始页面-->
<span style="cursor:hand;font-weight:bold;" onclick="addWeek('-')" title="上一周">←</span>
<span id="span1"></span>
<span style="cursor:hand;font-weight:bold;" onclick="addWeek('+')" title="下一周">→</span>
<table id="tb1" border="1" style="font-size:10pt">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- [原创]javascript 指定区域内图片等比例缩放实现代码
- Javascript 模式实例 观察者模式
- Jquery 弹出层插件实现代码
- CSS 渐变背景的6个演示代码
- 百度用到的Js日历 大家可以看看
- CSS 伪类实现的鼠标滑动图片链接
- 颜色变换 像字符逐字输入的欢迎词
- JavaScript 文本域字体大小选择功能
- js 操作符实例代码
- JavaScript 图片放大效果及代码说明
- 利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
- JavaScript 高仿真可控弹簧振子实现代码
- JS window.opener返回父页面的应用
- JavaScript 动态添加表格行 使用模板、标记
- javascript Keycode对照表
- LazyForm jQuery plugin 定制您的CheckBox Radio和Select
- 写入cookie的JavaScript代码库 cookieLibrary.js
- js文件中调用js的实现方法小结
- struts2 jquery 打造无限层次的树