首页 新闻 会员 周边

高手帮忙解决一个问题

0
悬赏园豆:10 [待解决问题]
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>blog式日历控件</title>
  6 </head>
  7 <body>
  8 <script type="text/javascript">
  9 var $ = function (id) {
 10     return "string" == typeof id ? document.getElementById(id) : id;
 11 };
 12 
 13 var Class = {
 14   create: function() {
 15     return function() {
 16       this.initialize.apply(this, arguments);
 17     }
 18   }
 19 }
 20 
 21 var Extend = function(destination, source) {
 22     for (var property in source) {
 23         destination[property] = source[property];
 24     }
 25     return destination;
 26 }
 27 
 28 
 29 var Calendar = Class.create();
 30 Calendar.prototype = {
 31   initialize: function(container, options) {
 32     this.Container = $(container);//容器(table结构)
 33     this.Days = [];//日期对象列表
 34     
 35     this.SetOptions(options);
 36     
 37     this.Year = this.options.Year || new Date().getFullYear();
 38     this.Month = this.options.Month || new Date().getMonth() + 1;
 39     this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
 40     this.onSelectDay = this.options.onSelectDay;
 41     this.onToday = this.options.onToday;
 42     this.onFinish = this.options.onFinish;    
 43     
 44     this.Draw();
 45   },
 46   //设置默认属性
 47   SetOptions: function(options) {
 48     this.options = {//默认值
 49         Year:            0,//显示年
 50         Month:            0,//显示月
 51         SelectDay:        null,//选择日期
 52         onSelectDay:    function(){},//在选择日期触发
 53         onToday:        function(){},//在当天日期触发
 54         onFinish:        function(){}//日历画完后触发
 55     };
 56     Extend(this.options, options || {});
 57   },
 58   //当前月
 59   NowMonth: function() {
 60     this.PreDraw(new Date());
 61   },
 62   //上一月
 63   PreMonth: function() {
 64     this.PreDraw(new Date(this.Year, this.Month - 2, 1));
 65   },
 66   //下一月
 67   NextMonth: function() {
 68     this.PreDraw(new Date(this.Year, this.Month, 1));
 69   },
 70   //上一年
 71   PreYear: function() {
 72     this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
 73   },
 74   //下一年
 75   NextYear: function() {
 76     this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
 77   },
 78   //根据日期画日历
 79   PreDraw: function(date) {
 80     //再设置属性
 81     this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
 82     //重新画日历
 83     this.Draw();
 84   },
 85   //画日历
 86   Draw: function() {
 87     //用来保存日期列表
 88     var arr = [];
 89     //用当月第一天在一周中的日期值作为当月离第一天的天数
 90     for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
 91     //用当月最后一天在一个月中的日期值作为当月的天数
 92     for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
 93     //清空原来的日期对象列表
 94     this.Days = [];
 95     //插入日期
 96     var frag = document.createDocumentFragment();
 97     while(arr.length){
 98         //每个星期插入一个tr
 99         var row = document.createElement("tr");
100         //每个星期有7天
101         for(var i = 1; i <= 7; i++){
102             var cell = document.createElement("td"); cell.innerHTML = " ";
103             if(arr.length){
104                 var d = arr.shift();
105                 if(d){
106                     cell.innerHTML = d;
107                     this.Days[d] = cell;
108                     var on = new Date(this.Year, this.Month - 1, d);
109                     //判断是否今日
110                     this.IsSame(on, new Date()) && this.onToday(cell);
111                     //判断是否选择日期
112                     this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);
113                 }
114             }
115             row.appendChild(cell);
116         }
117         frag.appendChild(row);
118     }
119     //先清空内容再插入(ie的table不能用innerHTML)
120     while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
121     this.Container.appendChild(frag);
122     //附加程序
123     this.onFinish();
124   },
125   //判断是否同一日
126   IsSame: function(d1, d2) {
127     return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
128   } 
129 }
130 </script>
131 <style type="text/css">
132 
133 .Calendar {
134     font-family:Verdana;
135     font-size:12px;
136     background-color:#e0ecf9;
137     text-align:center;
138     width:200px;
139     height:160px;
140     padding:10px;
141     line-height:1.5em;
142 }
143 .Calendar a{
144     color:#1e5494;
145 }
146 
147 .Calendar table{
148     width:100%; 
149     border:0;
150 }
151 
152 .Calendar table thead{color:#acacac;}
153 
154 .Calendar table td {
155     font-size: 11px;
156     padding:1px;
157 }
158 #idCalendarPre{
159     cursor:pointer;
160     float:left;
161     padding-right:5px;
162 }
163 #idCalendarNext{
164     cursor:pointer;
165     float:right;
166     padding-right:5px;
167 }
168 #idCalendar td.onToday {
169     font-weight:bold;
170     color:#C60;
171 }
172 #idCalendar td.onSelect {
173     font-weight:bold;
174 }
175 </style>
176 <div class="Calendar">
177   <div id="idCalendarPre">&lt;&lt;</div>
178   <div id="idCalendarNext">&gt;&gt;</div>
179   <span id="idCalendarYear"></span><span id="idCalendarMonth"></span>180   <table cellspacing="0">
181     <thead>
182       <tr>
183         <td></td>
184         <td></td>
185         <td></td>
186         <td></td>
187         <td></td>
188         <td></td>
189         <td></td>
190       </tr>
191     </thead>
192     <tbody id="idCalendar">
193     </tbody>
194   </table>
195 </div>
196 
197 <input id="idCalendarPreYear" type="button" value="上一年" />
198 <input id="idCalendarNow" type="button" value="当前月" />
199 <input id="idCalendarNextYear" type="button" value="下一年" />
200 
201 <script language="JavaScript">
202 
203 var cale = new Calendar("idCalendar", {
204     SelectDay: new Date().setDate(10),
205     onSelectDay: function(o){ o.className = "onSelect"; },
206     onToday: function(o){ o.className = "onToday"; },
207     onFinish: function(){
208         $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
209         var flag = [10,15,20];
210         for(var i = 0, len = flag.length; i < len; i++){
211             this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
212         }
213     }
214 });
215 
216 $("idCalendarPre").onclick = function(){ cale.PreMonth(); }
217 $("idCalendarNext").onclick = function(){ cale.NextMonth(); }
218 
219 $("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
220 $("idCalendarNextYear").onclick = function(){ cale.NextYear(); }
221 
222 $("idCalendarNow").onclick = function(){ cale.NowMonth(); }
223 
224 </script>
225 </body>
226 </html>

我网上找了一个js博客日历的代码,代码中定义了var flag = [10,15,20]; ,效果是每月都是这三天有链接,我想要实现的是定义var flag = [2013-4-10,2013-4-15,2013-4-20]; ,效果是指定的这三天有链接,我对js不太熟,不知道要怎么改,请高手指教,谢谢!

畅无忧设计的主页 畅无忧设计 | 初学一级 | 园豆:192
提问于:2013-04-20 10:19
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册