`

JS操作日期,顺便实现 上一周 和 下一周 功能

阅读更多

作者原始地址找不到了,其他的都不是原作!感谢任文敏老师!

<!--
 今天,一已工作的学生向我求助:
 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>
&nbsp;&nbsp;<span id="span1"></span>&nbsp;&nbsp;
<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>
 


分享到:
评论

相关推荐

    JS 操作日期 顺便实现 上一周 和 下一周 功能

    这个文件讨论的主题是如何使用JavaScript来操作日期,并实现特定功能,如显示上一周和下一周的日期。 ### 知识点解析: #### 1. JavaScript日期对象 在JavaScript中,处理日期和时间的标准方式是使用Date对象。...

    js对日期操作

    Date.prototype.isLeapYear 判断闰年 ...Date.prototype.WeekNumOfYear 判断日期所在年的第几周 StringToDate 字符串转日期型 IsValidDate 验证日期有效性 CheckDateTime 完整日期时间检查 daysBetween 日期天数差

    周日历js插件,weeklyCalendar,只显示一周的日期

    《周日历js插件——weeklyCalendar:专为一周日期展示设计》 在现代Web开发中,日历插件是不可或缺的一部分,它们为用户提供了直观的时间管理方式。本文将深入探讨一个专注于一周日期显示的JavaScript插件——...

    js上一周下一周本周支持IE谷歌

    在网上找的JS经过自己改写的,支持IE,谷歌浏览器,上一周,下一周可以一直朝下点,

    javascript 生成一周的时间

    在给定的代码片段中,通过JavaScript实现了动态生成当前日期所在周的所有日期的功能。通过调用`addWeek()`函数,用户可以方便地查看前一周或后一周的日期。此外,还使用了一些辅助函数来处理日期计算问题,如`...

    js 周控件修正版 javascript

    综上所述,"js 周控件修正版"是基于JavaScript实现的,用于网页上的日期显示和交互,特别适合于需要按周规划的场景。它的修正版针对原版的不足进行了优化,提高了性能和用户体验,并且可能增加了更多的定制化选项。...

    js实现涂抹功能

    总的来说,实现JavaScript图片涂抹功能涉及到SVG、DOM操作、事件处理和可能的Canvas转换。使用Raphael库可以简化跨浏览器的兼容性问题,使开发者更专注于涂抹算法和用户体验的设计。在实际开发中,还需要考虑性能...

    javascript实现日期选择

    本文将详细介绍如何利用JavaScript来实现一个功能强大的日期选择器。此日期选择器不仅包含了基础的日期显示功能,还提供了丰富的自定义选项,例如添加指定时间间隔、检查特定日期的有效性以及获取指定日期的星期等。...

    js实现的日期控件

    JavaScript是一种广泛应用于...总之,实现一个JavaScript日历控件涉及HTML结构设计、CSS样式设定、JavaScript逻辑编写等多个方面,通过合理的编程实践和良好的用户体验设计,可以创建一个实用且美观的日期选择功能。

    javascript实现的日期控件

    在实际项目中,确保在多种浏览器和设备上测试日期控件的功能和样式,确保其在各种环境下都能正常工作。 总结,创建一个JavaScript实现的日期控件涉及HTML布局、CSS样式、JavaScript事件处理以及交互设计等多个方面...

    js实现日期显示

    JavaScript提供了一个内置对象——`Date`,用于处理日期和时间。本教程将详细讲解如何使用JavaScript来实现页面上的日期显示。 首先,创建一个`Date`对象是实现日期显示的第一步。你可以通过不传递任何参数来初始化...

    js-实现多功能时间日期时间段区间时间日期插件.rar

    "js-实现多功能时间日期时间段区间时间日期插件.rar" 提供了一个高效、易用的解决方案,旨在简化前端开发者的工作。这款jQuery时间日期插件允许用户方便地选择和操作时间、日期以及时间段,极大地提高了交互体验。 ...

    js(javascript) 日期控件

    JavaScript(通常简称为JS)是一种轻量级的解释型编程语言,主要用于网页和网络应用的开发。在网页中,JS可以极大地增强用户交互性,其中日期控件是常见的一种功能,用于帮助用户方便地选择日期,常用于日历插件、...

    手机端日期选择js插件LCalendar-上下滑动特效

    LCalendar是一款专为手机端设计的日期选择JavaScript插件,其特色在于采用了上下滑动的交互效果,使得在移动端操作更为便捷和流畅。这款插件适用于各种需要日期选择功能的前端项目,例如在线预订、日程安排或者表单...

    js手机端日期控件

    总的来说,js手机端日期控件是前端开发中不可或缺的一部分,它的设计和实现涉及到JavaScript技术、UI/UX设计原则以及跨平台兼容性策略。通过深入学习和实践,开发者可以创建出符合项目需求、用户体验优秀、兼容性...

    纯javascript实现的日期选择器

    这种功能虽然简单,但通过JavaScript实现却能保证其在各种浏览器上的兼容性,并且由于代码量不大,因此易于理解和维护。” 【标签】:“javascript” 和 “日期选择” JavaScript作为网页开发的主要脚本语言,提供...

    javaScript实现另存为功能

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态内容。在浏览器环境中,JavaScript可以极大地提升用户体验,包括模拟浏览器的一些原生功能,如“另存为”(Save As)...

    js实现日期控件.rar

    在JavaScript中实现日期控件是一项常见的前端开发任务,主要用于网页上的日期选择功能,例如在表单中选择出生日期或预约日期等。JavaScript作为浏览器端的主要脚本语言,提供了丰富的API来处理日期和时间,让我们...

    几款js日期插件, 非常漂亮

    虽然Moments.js本身不是一款日期选择器,但它是一款强大的日期和时间处理库,可以与各种日期插件配合使用,提供丰富的日期解析、格式化和计算功能。通过结合其他插件,如Eonasdan/bootstrap-datetimepicker,可以...

    js实现时间日期自增.zip

    在JavaScript中,时间日期自增是一项常见的操作,特别是在前端开发中。这个"js实现时间日期自增.zip"压缩包提供了一种实现方式,涉及到的主要技术包括JavaScript基础、jQuery以及HTML。接下来,我们将深入探讨如何...

Global site tag (gtag.js) - Google Analytics