項目中用到按周顯示的功能,找了一個,然后自己修改了一下,留着以后用:
這是代碼,要是直接顯示的話就把第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)(ε ̄ *)