js获取当前周、上一周、下一周日期

秒速五厘米 2021-09-16 07:16 1358阅读 0赞

最近在做一个课表的功能,需实现选择了第几周之后,该周相关的日期会自动更改过来,于是就在网上找了资料,经过一下午的折腾,终于把它实现了。

7070 1

虽然是用在小程序中,但js代码都是大同小异的,只需做一些小小的修改。如果你是用在web网页中,那么就不需要怎么修改了,下面我们来看代码。

1、获取当前周、上一周、下一周日期

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html >
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>日历操作</title>
  6. <script>
  7. window.onload = function(){
  8. var cells = document.getElementById('monitor').getElementsByTagName('td');
  9. var clen = cells.length;
  10. var currentFirstDate;
  11. var formatDate = function(date){
  12. var year = date.getFullYear()+'年';
  13. var month = (date.getMonth()+1)+'月';
  14. var day = date.getDate()+'日';
  15. var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
  16. return year+month+day+' '+week;
  17. };
  18. var addDate= function(date,n){
  19. date.setDate(date.getDate()+n);
  20. return date;
  21. };
  22. var setDate = function(date){
  23. var week = date.getDay()-1;
  24. date = addDate(date,week*-1);
  25. currentFirstDate = new Date(date);
  26. for(var i = 0;i<clen;i++){
  27. // cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); 星期一开始
  28. cells[i].innerHTML = formatDate(i==0 ? addDate(date,-1) : addDate(date,1));//星期日开始
  29. }
  30. };
  31. document.getElementById('last-week').onclick = function(){
  32. setDate(addDate(currentFirstDate,-7));
  33. };
  34. document.getElementById('next-week').onclick = function(){
  35. setDate(addDate(currentFirstDate,7));
  36. };
  37. setDate(new Date());
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <button id="last-week">上一周</button><button id="next-week">下一周</button>
  43. <table id="monitor">
  44. <tr>
  45. <td></td>
  46. <td></td>
  47. <td></td>
  48. <td></td>
  49. <td></td>
  50. <td></td>
  51. <td></td>
  52. </tr>
  53. </table>
  54. </body>
  55. </html>

2、改造后(点击周数,显示对应周数的日期)

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html >
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js通过给出第几周,获得该周日历(课表日历)</title>
  6. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  7. <script>
  8. window.onload = function(){
  9. var cells = document.getElementById('monitor').getElementsByTagName('td');
  10. var clen = cells.length;
  11. var currentFirstDate;
  12. var formatDate = function(date){
  13. var year = date.getFullYear()+'年';
  14. var month = (date.getMonth()+1)+'月';
  15. var day = date.getDate()+'日';
  16. var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
  17. return year+month+day+' '+week;
  18. };
  19. var addDate= function(date,n){
  20. date.setDate(date.getDate()+n);
  21. return date;
  22. };
  23. var setDate = function(date){
  24. var week = date.getDay()-1;
  25. date = addDate(date,week*-1);
  26. currentFirstDate = new Date(date);
  27. for(var i = 0;i<clen;i++){
  28. cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); //星期一开始
  29. //cells[i].innerHTML = formatDate(i==0 ? addDate(date,-1) : addDate(date,1)); //星期天开始
  30. }
  31. };
  32. var chushi=1;//初始周 第1周
  33. //使用each()方法进行循环
  34. $("button").each(function(index,element){
  35. //这里的index就是当前对象下标,element就是当前对象(dom对象)
  36. $(element).click(function(){
  37. console.log($(this).text());
  38. var value=$(this).text();
  39. //这里的周跟当前周(上一次点击的或初始的)进行比较
  40. console.log(value-chushi);
  41. var result=value-chushi;
  42. if(result>0){
  43. setDate(addDate(currentFirstDate,7*result));
  44. }
  45. else if(result<0){
  46. result= Math.abs(result);
  47. setDate(addDate(currentFirstDate,-(7*result)));
  48. }
  49. else if(result==0){
  50. setDate(addDate(currentFirstDate,0));
  51. }
  52. chushi=$(this).text();
  53. })
  54. })
  55. setDate(new Date());
  56. }
  57. </script>
  58. </head>
  59. <body>
  60. <button class="zhou">1</button>
  61. <button class="zhou">2</button>
  62. <button class="zhou">3</button>
  63. <button class="zhou">4</button>
  64. <button class="zhou">5</button>
  65. <button class="zhou">6</button>
  66. <button class="zhou">7</button>
  67. <button class="zhou">8</button>
  68. <button class="zhou">9</button>
  69. <button class="zhou">10</button>
  70. <table id="monitor">
  71. <tr>
  72. <td></td>
  73. <td></td>
  74. <td></td>
  75. <td></td>
  76. <td></td>
  77. <td></td>
  78. <td></td>
  79. </tr>
  80. </table>
  81. </body>
  82. </html>

赶快复制代码看看效果吧,相信你也很快能够实现你的需求的~

发表评论

表情:
评论列表 (有 0 条评论,1358人围观)

还没有评论,来说两句吧...

相关阅读