项目中用到按周显示的功能,找了一个,然后自己修改了一下,留着以后用:
这是代码,要是直接显示的话就把第43行去掉就行了,如果想要得到数据按照自己的想法重新渲染就保留43行,直接看51行,52行就是你要的对应数据
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 //获取页面上的table中的td单元格,以便填充内容 9 var cells = document.getElementById('monitor').getElementsByTagName('td'); 10 var clen = cells.length; 11 //表示当前已经点击到的日期 12 var currentFirstDate; 13 //格式化日期 14 var formatDate = function(date){ 15 var year = date.getFullYear()+'年'; 16 var month = (date.getMonth()+1)+'月'; 17 var day = date.getDate()+'日'; 18 var week = '('+['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')'; 19 return year+month+day+' '+week; 20 }; 21 /* 22 * 日期加上指定的天数,使用的是DATE类本身自带的方法,当第二个参数为负数的时候进行减法运算 23 * 这样可以避免自己写的方法会出现错误 24 * 需要注意的是,此方法中的setDate并不是咱们自定义的方法,而是Date对象自带的方法 25 */ 26 var addDate= function(date,n){ 27 date.setDate(date.getDate()+n); 28 return date; 29 }; 30 /* 设置日期,并未单元格进行赋值 */ 31 var setDate = function(date){ 32 var week = date.getDay()-1; 33 date = addDate(date,week*-1); 34 console.log(date) 35 currentFirstDate = new Date(date); 36 var arr = []; 37 //循环为单元格进行赋值 38 for(var i = 0;i<7;i++){ 39 console.log(formatDate(i==0 ? date : addDate(date,1))); 40 arr.push(formatDate(i==0 ? date : addDate(date,1))) 41 cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); 42 } 43 return arr 44 }; 45 document.getElementById('last-week').onclick = function(){ 46 setDate(addDate(currentFirstDate,-7)); 47 }; 48 document.getElementById('next-week').onclick = function(){ 49 setDate(addDate(currentFirstDate,7)); 50 }; 51 setDate(addDate(new Date(),0)); 52 console.log(setDate(addDate(new Date(),0))); 53 } 54 </script> 55 </head> 56 <body> 57 <button id="last-week">上一周</button> 58 <button id="next-week">下一周</button> 59 <table id="monitor" border="1px"> 60 <tr> 61 <td></td> 62 <td></td> 63 <td></td> 64 <td></td> 65 <td></td> 66 <td></td> 67 <td></td> 68 </tr> 69 </table> 70 </body> 71 </html>
上个周找的,直接复制的代码自己修改的,忘记在哪个网址找的,望原作者见谅(*  ̄3)(ε ̄ *)