项目中用到按周显示的功能,找了一个,然后自己修改了一下,留着以后用:

这是代码,要是直接显示的话就把第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)(ε ̄ *)

分类:

技术点:

相关文章: