<html>

<head>

<script>

var currDT;

var aryDay = new Array("日","一","二","三","四","五","六");//显示星期

var lastDay;//页面显示的最后一天

var firstDay;//页面显示的第一天

Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}

//初始化日期加载

function initDate() {

	currDT = new Date();

	showdate.innerHTML = currDT.toLocaleDateString(); //显示日期

	var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)

	var tdDT;//日期  

	//在表格中显示一周的日期

	var objTB = document.getElementById("mytable");//取得表格对象

	for(var i=0;i<7;i++) {

		tdDT = getDays()[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];//显示

	}

	//重新赋值

	lastDay = getDays()[6];//本周的最后一天

	firstDay = getDays()[0];//本周的第一天

}

//取得当前日期一周内的某一天

function getWeek(i) {

	var now = new Date();

	var n = now.getDay();

	var start = new Date();

	start.setDate(now.getDate() - n + i);//取得一周内的第一天、第二天、第三天...

	return start;

}

//取得当前日期一周内的七天

function getDays() {

	var days = new Array();

	for(var i=1;i<=7;i++) {

		days[i-1] = getWeek(i);

	}

	return days;

}

//取得下一周的日期数(共七天)

function getNextWeekDatas(ndt) {

	var days = new Array();

	for(var i=1;i<=7;i++) {

		var dt = new Date(ndt);

		days[i-1] = getNextWeek(dt,i);

	}

	return days;

}

//指定日期的下一周(后七天)

function getNextWeek(dt,i) {

	var today = dt;

	today.setDate(today.getDate()+i);

	return today;

}

//取得上一周的日期数(共七天)

function getPreviousWeekDatas(ndt) {

	var days = new Array();

	for(var i=-7;i<=-1;i++) {

		var dt = new Date(ndt);

		days[7+i] = getPreviousWeek(dt,i);

	}

	return days;

}

//指定日期的上一周(前七天)

function getPreviousWeek(dt,i) {

	var today = dt;

	today.setDate(today.getDate()+i);

	return today;

}

//下一周

function nextWeek() {

	setCurrDTAfter();//重设时间

	showdate.innerHTML = currDT.toLocaleDateString(); //显示日期  

	//在表格中显示一周的日期

	var objTB = document.getElementById("mytable");//取得表格对象

	var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)

	var tdDT;//日期

	for(var i=0;i<7;i++) {

		tdDT = getNextWeekDatas(lastDay)[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]; //显示

	}

	//重新赋值

	firstDay = getNextWeekDatas(lastDay)[0];//注意赋值顺序1

	lastDay = getNextWeekDatas(lastDay)[6];//注意赋值顺序2

}

//上一周

function previousWeek() {

	settCurrDTBefore();

	showdate.innerHTML = currDT.toLocaleDateString(); //显示日期  

	//在表格中显示一周的日期

	var objTB = document.getElementById("mytable");//取得表格对象

	var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)

	var tdDT;//日期

	for(var i=0;i<7;i++) {

		tdDT = getPreviousWeekDatas(firstDay)[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];//显示

	}

	//重新赋值

	lastDay =  getPreviousWeekDatas(firstDay)[6];//注意赋值顺序1

	firstDay = getPreviousWeekDatas(firstDay)[0];//注意赋值顺序2

}

//当前日期后第七天

function setCurrDTAfter() {

	currDT.setDate(currDT.getDate()+7);

}

//当前日期前第七天

function settCurrDTBefore() {

	currDT.setDate(currDT.getDate()-7);

}

</script>

</head>

<body onload="initDate()">

<table align="center">

	<tr>

		<td>

			<input type="button" name="previousweek" value="上一周" onclick="previousWeek();"/>

			<span id="showdate"></span>

			<input type="button" name="previousweek" value="下一周" onclick="nextWeek();"/>

		</td>

	</tr>

</table>

<!--显示日期-->

<table id="mytable" cellspacing="0" border=="1" align="center" width="90%">

	<tr>

		<td></td>

		<td></td>

		<td></td>

		<td></td>

		<td></td>

		<td></td>

		<td></td>

	</tr>

</table>

 </body>

</html>

JS显示上一周的更多相关文章

  1. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  2. JavaScript(js)获取本周，本月，本季，本年，上月，上周，上季，去年，上二周，上二月的时间段的代码

    function dateChange(name){ var beginTimeObject = document.getElementById("beginTime"); var ...

  3. js实现上传文件实时显示缩略图

    <input name="coverImage" onClick="" onchange="setImagePreview(this);&quo ...

  4. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  5. vue 实现上一周、下一周切换功能

    效果图: html 显示部分: js 显示部分: preNextBtn(val){ let _this = this; this.tableList = []; //数据重置为空 _this.show ...

  6. 上一周，小白的我试着搭建了两个个人博客：在github和openshift上

    上一周,突发奇想,想搭建个自己的博客. 由于是突发奇想,自然想先找免费的试试手.仔细搜索下,选定了目标Openshift和Github. Openshift 安装WordPress OpenShift ...

  7. 怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端？

    今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name= ...

  8. KindEditor文件上传成功前端显示上传失败

    一.使用kindeditor 上传图片 ,根据kindeditor 要求返回了相应的数据, 但是kindeditor 插件显示上传失败!!! 解决方法: 各个版本位置可能不同!!! 1.修改kinde ...

  9. [转]WordPress“添加媒体”文件时只显示上传到当前文章的附件图片

    使用WordPress的朋友应该都清楚,特别是喜欢图文并茂的网站,肯定离不开的就是WordPress文章编辑页面的“添加媒体”按钮,每次点击就能弹出一个插入多媒体的界面,然后页面默认就会列举加载所有最 ...

随机推荐

  1. java TopK算法

    现有一亿个数据,要求从其中找出最小的一万个数,希望所需的时间和空间最小,也就是所谓的topK问题 TopK问题就是从海量的数据中取最大(或最小的)的K个数. TopK问题其实是有线性时间复杂度的解的, ...

  2. python模块之numpy

    Numpy是一个第三方库,是数组相关的运算 通过pip安装:pip install numpy Anaconda python的一个科学计算发行版本,安装后将不必单独安装numpy,下面的库模块也将不 ...

  3. 原生JS实现图片拖拽移动与缩放

    看一下最终效果,图片可以拖动,可以缩放 把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的lef ...

  4. 用NaviCat创建存储过程批量添加测试数据

    打开navicat连接上数据库,然后打开左上角函数,新建一个函数. BEGIN DECLARE i int; --声明变量 DECLARE groupid int; set i=LAST_INSERT ...

  5. eclipse把局部变量提为全局变量的快捷键是什么

    没有缺省定义的直接快捷键,或者就按Ctrl+1按照melord说的那样做,或者自己在Preference/General/Keys自己对Convert Local Variable to Feild进 ...

  6. Play on Words UVA - 10129 （欧拉回路）

    题目链接:https://vjudge.net/problem/UVA-10129 题目大意:输入N  代表有n个字符串  每个字符串最长1000  要求你把所有的字符串连成一个序列  每个字符串的第 ...

  7. 3d Max 2010安装失败怎样卸载3dsmax？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  9. [转]jQuery TextBox Water Mark with asp.net

    本文转自:http://naspinski.net/post/jQuery-TextBox-Water-Mark-with-aspnet.aspx I stole majority of this c ...

  10. thinkphp3.2.3 ueditor1.4.3 图片上传操作,在线删除上传图片功能。

    最近弄一个图片 上传,可是用ueditor 自带的上传,如果不配置的话,上传的目录不在自己的项目中. 在网上找了好多,可是都是底版本的,新版本的还真是找到了一个,ueditor-thinkphp 这个 ...