作者原始地址找不到了,其他的都不是原作!感谢任文敏老师!
<!--
今天,一已工作的学生向我求助:
1. 页面加载时,一个地方显示当前日期,其左右各一个箭头,分别表示上一周,下一周
下面的表格显示本周每个日期,从周一到周日
2. 点左右箭头,那个地方显示上一周或下一周的今天,且下面的表格显示上一周或下一周的每个日期
JS本身没有提供日期加减操作能力,所以借此写了几个方法,用以操作日期,主要是实现日期的加减
作者:郴州拓职任文敏
-->
<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>
<br />
<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>
分享到:
相关推荐
这个文件讨论的主题是如何使用JavaScript来操作日期,并实现特定功能,如显示上一周和下一周的日期。 ### 知识点解析: #### 1. JavaScript日期对象 在JavaScript中,处理日期和时间的标准方式是使用Date对象。...
Date.prototype.isLeapYear 判断闰年 ...Date.prototype.WeekNumOfYear 判断日期所在年的第几周 StringToDate 字符串转日期型 IsValidDate 验证日期有效性 CheckDateTime 完整日期时间检查 daysBetween 日期天数差
《周日历js插件——weeklyCalendar:专为一周日期展示设计》 在现代Web开发中,日历插件是不可或缺的一部分,它们为用户提供了直观的时间管理方式。本文将深入探讨一个专注于一周日期显示的JavaScript插件——...
在网上找的JS经过自己改写的,支持IE,谷歌浏览器,上一周,下一周可以一直朝下点,
在给定的代码片段中,通过JavaScript实现了动态生成当前日期所在周的所有日期的功能。通过调用`addWeek()`函数,用户可以方便地查看前一周或后一周的日期。此外,还使用了一些辅助函数来处理日期计算问题,如`...
综上所述,"js 周控件修正版"是基于JavaScript实现的,用于网页上的日期显示和交互,特别适合于需要按周规划的场景。它的修正版针对原版的不足进行了优化,提高了性能和用户体验,并且可能增加了更多的定制化选项。...
总的来说,实现JavaScript图片涂抹功能涉及到SVG、DOM操作、事件处理和可能的Canvas转换。使用Raphael库可以简化跨浏览器的兼容性问题,使开发者更专注于涂抹算法和用户体验的设计。在实际开发中,还需要考虑性能...
本文将详细介绍如何利用JavaScript来实现一个功能强大的日期选择器。此日期选择器不仅包含了基础的日期显示功能,还提供了丰富的自定义选项,例如添加指定时间间隔、检查特定日期的有效性以及获取指定日期的星期等。...
JavaScript是一种广泛应用于...总之,实现一个JavaScript日历控件涉及HTML结构设计、CSS样式设定、JavaScript逻辑编写等多个方面,通过合理的编程实践和良好的用户体验设计,可以创建一个实用且美观的日期选择功能。
在实际项目中,确保在多种浏览器和设备上测试日期控件的功能和样式,确保其在各种环境下都能正常工作。 总结,创建一个JavaScript实现的日期控件涉及HTML布局、CSS样式、JavaScript事件处理以及交互设计等多个方面...
JavaScript提供了一个内置对象——`Date`,用于处理日期和时间。本教程将详细讲解如何使用JavaScript来实现页面上的日期显示。 首先,创建一个`Date`对象是实现日期显示的第一步。你可以通过不传递任何参数来初始化...
"js-实现多功能时间日期时间段区间时间日期插件.rar" 提供了一个高效、易用的解决方案,旨在简化前端开发者的工作。这款jQuery时间日期插件允许用户方便地选择和操作时间、日期以及时间段,极大地提高了交互体验。 ...
JavaScript(通常简称为JS)是一种轻量级的解释型编程语言,主要用于网页和网络应用的开发。在网页中,JS可以极大地增强用户交互性,其中日期控件是常见的一种功能,用于帮助用户方便地选择日期,常用于日历插件、...
LCalendar是一款专为手机端设计的日期选择JavaScript插件,其特色在于采用了上下滑动的交互效果,使得在移动端操作更为便捷和流畅。这款插件适用于各种需要日期选择功能的前端项目,例如在线预订、日程安排或者表单...
总的来说,js手机端日期控件是前端开发中不可或缺的一部分,它的设计和实现涉及到JavaScript技术、UI/UX设计原则以及跨平台兼容性策略。通过深入学习和实践,开发者可以创建出符合项目需求、用户体验优秀、兼容性...
这种功能虽然简单,但通过JavaScript实现却能保证其在各种浏览器上的兼容性,并且由于代码量不大,因此易于理解和维护。” 【标签】:“javascript” 和 “日期选择” JavaScript作为网页开发的主要脚本语言,提供...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态内容。在浏览器环境中,JavaScript可以极大地提升用户体验,包括模拟浏览器的一些原生功能,如“另存为”(Save As)...
在JavaScript中实现日期控件是一项常见的前端开发任务,主要用于网页上的日期选择功能,例如在表单中选择出生日期或预约日期等。JavaScript作为浏览器端的主要脚本语言,提供了丰富的API来处理日期和时间,让我们...
虽然Moments.js本身不是一款日期选择器,但它是一款强大的日期和时间处理库,可以与各种日期插件配合使用,提供丰富的日期解析、格式化和计算功能。通过结合其他插件,如Eonasdan/bootstrap-datetimepicker,可以...
在JavaScript中,时间日期自增是一项常见的操作,特别是在前端开发中。这个"js实现时间日期自增.zip"压缩包提供了一种实现方式,涉及到的主要技术包括JavaScript基础、jQuery以及HTML。接下来,我们将深入探讨如何...