主頁 > 企業開發 > 原生JavaScript實作一種日歷

原生JavaScript實作一種日歷

2020-11-11 13:20:42 企業開發

設計目標:不依賴其他庫、兼容一些舊版瀏覽器、可配置可擴展,

測驗頁面:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>測驗日歷控制元件</title>
  6     <style>
  7         #div1{
  8             width: 256px;
  9             height: 202px;
 10             box-sizing: border-box;
 11             background-color: #fff;
 12             box-shadow: 1px 1px 3px #999;
 13             position:absolute;
 14             left:0px;
 15         }
 16         #div2 {
 17             width: 236px;
 18             height: 166px;
 19             box-sizing: border-box;
 20             background-color: #fff;
 21             box-shadow: 1px 1px 3px #999;
 22             position:absolute;
 23             left:300px;
 24         }
 25         .select_date{
 26             padding-left: 10px;box-sizing:border-box;width: 100px;height: 30px;background-color: #fff;font-size: 12px;float: left;line-height: 30px;
 27         }
 28         .span_rq{
 29             width: 60px;display: inline-block;
 30         }
 31     </style>
 32     <script src="DatePicker.js"></script>
 33 </head>
 34 <body>
 35 <div id="div_all_base" style="background-color: beige">
 36     <div id="div1">
 37 
 38     </div>
 39     <div id="div2">
 40 
 41     </div>
 42     <div style="width: 600px;height: 30px;left:600px;position:absolute;float:left" id="div3">
 43         <div style="float: left;line-height: 30px;margin-left: 10px;font-size: 12px;"></div>
 44         <div class="select_date"><span class="span_rq">開始日期</span><img src="image/rili2.jpg" style="margin-left: 10px;width: 20px;margin-top: 6px;cursor: pointer" alt="" onclick="var divs=div_rilis.getElementsByClassName('div_rili');divs[0].style.display='block';divs[1].style.display='none'"></div>
 45         <div style="position: absolute;width:256px;height: 202px;top:50px;display: none" class="div_rili"></div>
 46         <div style="float: left;line-height: 30px;margin-left: 10px;font-size: 12px;"></div>
 47         <div class="select_date"><span class="span_rq">結束日期</span><img src="image/rili2.jpg" style="margin-left: 10px;width: 20px;margin-top: 6px;cursor: pointer" alt=""  onclick="var divs=div_rilis.getElementsByClassName('div_rili');divs[1].style.display='block';divs[0].style.display='none'"></div>
 48         <div style="position: absolute;width:256px;height: 202px;top:50px;left:120px;display: none" class="div_rili"></div>
 49     </div>
 50 </div>
 51 </body>
 52 <script>
 53     var div_rilis=document.getElementById("div3");
 54 
 55     var apiHost="http://127.0.0.1/api/v1";
 56     var data_enabledate={list_enabledate:[{CBRQ:20201111},{CBRQ:20201112},{CBRQ:20201113},{CBRQ:20201114},{CBRQ:20201115}],type:"ok"};
 57     //用AJAX從后端查詢可選日期,需要回傳資料的格式與data_enabledate相同
 58     //var datepicker1=new DatePicker("datepicker1",{pickcallback:loadPage,bannerBackColor:"rgb(0,112,192)",searchEnableUrl:apiHost+"/public/searchEnableDate"});//
 59     //直接用前端資料,設定了點擊回呼、banner顏色、激活日期
 60     var datepicker1=new DatePicker("datepicker1",{pickcallback:loadPage,bannerBackColor:"rgb(0,112,192)",searchEnableUrl:data_enabledate});
 61     var div_rili1=document.getElementById("div1");
 62     div_rili1.appendChild(datepicker1.div);
 63     datepicker1.reloadDateList();
 64 
 65     //設定更多的配置項,被點擊的按鈕變色,程式可以在一定的范圍內根據外圍div的大小調整每個按鈕的尺寸,另外設定了字體大小,以及允許點擊未激活日期
 66     var datepicker2=new DatePicker("datepicker2",{
 67         pickcallback:function(str_date,that){
 68             datepicker2.pick0(str_date);
 69             loadPage(str_date);
 70         },bannerBackColor:"rgb(0,112,192)",width:236,height:166,shadowSize:0,paddingSize:0,
 71         searchEnableUrl:data_enabledate,contentFontSize:9,flag_canPickUnEnabled:true,
 72     });
 73     var div_rili2=document.getElementById("div2");
 74     div_rili2.appendChild(datepicker2.div);
 75     datepicker2.reloadDateList();
 76 
 77     function loadPage(str_date){
 78 
 79         alert("點擊的日期是"+str_date);
 80     }
 81 
 82     //常用的起始日期和結束日期,這里設定了每個日歷的title,不區分激活按鈕,并且把日歷的值與span的innerHTML關聯起來(使用arr_valuelink屬性可以關聯input或textview的value)
 83     var divs=div_rilis.getElementsByClassName('div_rili');
 84     var spans=div_rilis.getElementsByClassName("span_rq");
 85     var datepicker1b=new DatePicker("datepicker1b",{pickcallback:function(value,that){
 86             var divs=div_rilis.getElementsByClassName('div_rili');
 87             divs[0].style.display='none';
 88             divs[1].style.display='none';
 89             DatePicker.linkValue(value,that)
 90         },bannerBackColor:"rgb(0,112,192)",arr_innerlink:[spans[0]],title:"開始日期"});//與react不同這里的spans在onload后不會再重新生成,所以可以直接關聯dom物件!!
 91     var datepicker2b=new DatePicker("datepicker2b",{pickcallback:function(value,that){
 92             var divs=div_rilis.getElementsByClassName('div_rili');
 93             divs[0].style.display='none';
 94             divs[1].style.display='none';
 95             DatePicker.linkValue(value,that)
 96         },bannerBackColor:"rgb(0,112,192)",arr_innerlink:[spans[1]],title:"結束日期"});
 97     divs[0].appendChild(datepicker1b.div);
 98     divs[1].appendChild(datepicker2b.div);
 99     datepicker1b.reloadDateList();
100     datepicker2b.reloadDateList();
101 </script>
102 </html>

日歷按鈕圖片:

代碼實作:(建議從后往前看)

  1 DatePicker=function(id,obj_p)
  2 {
  3     //如果已經有這個div則建立失敗
  4     var div=document.getElementById("id");
  5     if(div)
  6     {
  7         console.log("組件id重復,請使用其他組件id");
  8         return;
  9     }
 10     div=document.createElement("div");//最外層容器
 11     this.id=id;
 12     this.div=div;
 13     div.id=id;
 14     var _this=this;
 15 
 16     this.width=obj_p.width||256;
 17     this.height=obj_p.height||202;
 18     this.shadowSize=obj_p.shadowSize||4;
 19     this.shadowColor=obj_p.shadowColor||"rgb(203,203,203)";
 20     this.backColor=obj_p.backColor||"white";
 21     //this.boxShadow=obj_p.boxShadow||"inset 0 0 4px 4px rgb(203,203,203)";
 22     div.style.border="0px";
 23     div.style.width=this.width+"px";
 24     div.style.height=this.height+"px";
 25     div.style.boxShadow="inset 0 0 "+this.shadowSize+"px "+this.shadowSize+"px "+this.shadowColor;
 26     div.style.position="absolute";
 27     div.style.backgroundColor=this.backColor;
 28 
 29     this.title=obj_p.title||"日期選擇";
 30     //this.noTitle=obj.noTitle||false;
 31     //this.noBanner=obj.noBanner||false;
 32     this.h1=obj_p.h1||24;//最上面的一行空間
 33     this.h2=obj_p.h2||24;
 34     //this.h3=obj_p.h3||208;
 35     this.titleFontSize=obj_p.titleFontSize||12;
 36     this.contentFontSize=obj_p.contentFontSize||10;
 37     var span=document.createElement("span")//日歷的標題欄
 38     span.innerText=this.title;
 39     span.style.height=this.h1+"px";
 40     span.style.fontSize=this.titleFontSize+"px";
 41     span.style.fontWeight="bold";
 42     span.style.lineHeight=this.h1+"px";
 43     span.style.display="inline-block";
 44     span.style.left=this.shadowSize+"px";
 45     span.style.paddingLeft=this.shadowSize+"px";
 46     span.style.position="absolute";
 47     span.style.zIndex="2";
 48     div.appendChild(span);
 49 
 50     this.bannerBackColor=obj_p.bannerBackColor||"rgb(169,16,10)";
 51     this.bannerFontColor=obj_p.bannerFontColor||"white";
 52     this.date=obj_p.date||(new Date());//默認日期
 53     this.year=this.date.getFullYear();
 54     this.month=this.date.getMonth();
 55     this.day31=this.date.getDate();
 56     this.day7=this.date.getDay();
 57     this.arr_day7=obj_p.arr_day7||["","一","二","三","四","五","六","日"];
 58     this.arr_bannerp=obj_p.arr_bannerp||([//用來調整年月的按鈕
 59         {id:"btn1",width:10,marginLeft:20,text:"《",onclick:function(){_this.year-=10;_this.changeYear()}}
 60         ,{id:"btn2",width:10,marginLeft:5,text:"〈",onclick:function(){_this.year-=1;_this.changeYear()}}
 61         ,{id:"btn3",width:40,marginLeft:5,text:this.year,onclick:function(){}}
 62         ,{id:"btn4",width:10,marginLeft:5,text:"〉",onclick:function(){_this.year+=1;_this.changeYear()}}
 63         ,{id:"btn5",width:10,marginLeft:5,text:"》",onclick:function(){_this.year+=10;_this.changeYear()}}
 64         ,{id:"btn6",width:10,marginLeft:50,text:"〈",onclick:function(){_this.month-=1;if(_this.month<0){_this.month=11;_this.year-=1;}_this.changeMonth();_this.changeYear()}}
 65         ,{id:"btn7",width:20,marginLeft:5,text:this.month+1,onclick:function(){}}
 66         ,{id:"btn8",width:10,marginLeft:5,text:"〉",onclick:function(){_this.month+=1;if(_this.month>11){_this.month=0;_this.year+=1;}_this.changeMonth();_this.changeYear()}}
 67         ])
 68 
 69     var div_banner=document.createElement("div");
 70     div_banner.style.height=this.h2+"px";
 71     //div_banner.style.width="100%";
 72     div_banner.style.left=this.shadowSize+"px";
 73     div_banner.style.right=this.shadowSize+"px";
 74     div_banner.style.top=this.h1+"px";
 75     div_banner.style.position="absolute";
 76     div_banner.style.backgroundColor=this.bannerBackColor;
 77     div_banner.style.lineHeight=this.h2+"px";
 78     div_banner.style.zIndex="2";
 79     //div_banner.style.fontSize=this.contentFontSize+2+"px";
 80     //div_banner.style.color=this.bannerFontColor;
 81     //div_banner.style.fontWeight="bold";
 82 
 83     //this.changeYearBack=obj_p.
 84 
 85     var len=this.arr_bannerp.length;
 86     var sum_left=0;
 87     for(var i=0;i<len;i++)//banner上調整年月的按鈕
 88     {
 89         var bannerp=this.arr_bannerp[i];
 90         var btn=document.createElement("button");
 91         btn.id=bannerp.id;
 92         btn.style.position="absolute";
 93         btn.style.backgroundColor=this.bannerBackColor;
 94         btn.style.border="0px";
 95         btn.style.padding="0px";
 96         btn.style.textAlign="center";
 97         btn.style.color=this.bannerFontColor;//button這個屬性并不會自動繼承
 98         btn.style.fontWeight="bold";
 99         btn.style.fontSize=this.contentFontSize+2+"px";
100         btn.style.height="100%";
101         btn.style.lineHeight=this.h2+"px";
102         btn.style.width=bannerp.width+"px";
103         btn.style.left=sum_left+bannerp.marginLeft+"px";
104         btn.innerText=bannerp.text;
105         btn.onclick=bannerp.onclick;
106         sum_left+=(bannerp.width+bannerp.marginLeft);
107         this[btn.id]=btn;
108         div_banner.appendChild(btn);
109     }
110     div.appendChild(div_banner);
111     this.paddingSize=obj_p.paddingSize||6;
112 
113     this.gridBackColor=obj_p.gridBackColor||"#eeeeee";//單元格背景顏色
114     this.gridColor=obj_p.gridColor||"#000000";//本月單元格的文字顏色
115     this.gridColor0=obj_p.gridColor0||"#888888";//連帶顯示的非本月單元格的文字顏色
116     this.hoverBorderColor=obj_p.hoverBorderColor||"#888888";//滑鼠移入可選單元格后的邊框顏色
117     this.enableBackColor=obj_p.enableBackColor||"rgb(207,232,252)";//可以被選擇的單元格的背景顏色
118     this.enableBackColorPicked=obj_p.enableBackColorPicked||"rgb(252,232,207)";
119     var div_list=document.createElement("div");//按鈕容器
120     var int1=this.shadowSize+this.paddingSize;
121     div_list.style.left=int1+"px";
122     div_list.style.right=int1+"px";
123     div_list.style.top=int1+"px";
124     div_list.style.bottom=this.shadowSize+"px";
125     div_list.style.position="absolute";
126     div_list.style.backgroundColor=this.gridBackColor;
127     div.appendChild(div_list);
128     this.sizex=Math.floor((this.width-int1*2)/7);//按鈕尺寸
129     this.sizey=Math.floor((this.height-int1-this.shadowSize-(this.h1+this.h2-this.shadowSize-this.paddingSize))/7);
130     this.pickcallback=obj_p.pickcallback;//滑鼠點擊日期按鈕之后的回應方法
131     this.div_list=div_list;
132     this.obj_enable={};
133     this.searchEnableUrl=obj_p.searchEnableUrl;//||apiHost+"/public/searchEnableDate";
134     this.flag_canPickUnEnabled=obj_p.flag_canPickUnEnabled||false;//是否可以點擊不激活的按鈕
135     if(!this.searchEnableUrl)//根本不區分按鈕是否激活
136     {
137         this.flag_canPickUnEnabled=true;
138     }
139     //this.reloadDateList(obj_p.initcallback);
140     //將日歷的選擇值與某些dom物件關聯起來
141     this.arr_innerlink=obj_p.arr_innerlink||[];
142     this.arr_valuelink=obj_p.arr_valuelink||[];
143 }
144 DatePicker.linkValue=https://www.cnblogs.com/ljzc002/archive/2020/11/11/function(value,that)//改變與日歷相關聯的dom物件的值
145 {
146     var len=that.arr_innerlink.length;
147     for(var i=0;i<len;i++)
148     {
149         that.arr_innerlink[i].innerHTML=value;
150     }
151     var len=that.arr_valuelink.length;
152     for(var i=0;i<len;i++)
153     {
154         that.arr_valuelink[i].value=https://www.cnblogs.com/ljzc002/archive/2020/11/11/value;
155     }
156 }
157 DatePicker.prototype.changeYear=function()
158 {
159     this.btn3.innerText=this.year;
160     this.reloadDateList();//根據當前月份重新排列日期btn
161     console.log("改變了年份")
162 }
163 DatePicker.prototype.changeMonth=function()
164 {
165     this.btn7.innerText=this.month+1;
166     console.log("改變了月份")
167 }
168 DatePicker.DrawButton=function(that,callback)
169 {//重新渲染選中月份的日歷按鈕
170     try {
171 
172         var sizex = that.sizex;//每個小塊的寬度
173         var sizey = that.sizey;//每個小塊的寬度
174         var date_list = new Date(that.year + "-" + (that.month + 1) + "-1");//取這個月的第一天
175         var day7_list = date_list.getDay();//是周幾
176         //上一個月有幾天?
177         var date_list0 = date_list - 1000 * 60 * 60;//上個月的最后一天
178         var day31_list0 = (new Date(date_list0)).getDate();//是幾號
179 
180         var int3 = that.month + 2;
181         var int4 = that.year;
182         if (int3 > 12) {
183             int3 = 1;
184             int4++;
185         }
186         var date_list2 = new Date(int4 + "-" + (int3) + "-1");//取下個月的第一天
187         var date_list1 = date_list2 - 1000 * 60 * 60;//這個月的最后一天
188         var day31_list1 = (new Date(date_list1)).getDate();//是幾號
189         for (var i = 0; i < (day7_list - 1); i++) {//補齊日歷第一行的灰色部分
190             that.arr_date.push({text: day31_list0 - (day7_list - 2 - i), inmonth: false})
191         }
192         if(that.searchEnableUrl)//如果要區分按鈕是否激活
193         {
194             var list_enabledate = that.obj_json.list_enabledate;
195             for (var i = 1; i <= day31_list1; i++) {
196                 var len = list_enabledate.length;
197                 var str_fulldate = that.year + (that.month + 1 + 100 + "").substr(1) + (i + 100 + "").substr(1);
198                 var obj = {text: i, inmonth: true, isenable: false, str_fulldate: str_fulldate};
199                 for (var j = 0; j < len; j++) {
200                     if (list_enabledate[j].CBRQ == (str_fulldate)) {
201                         obj.isenable = true;
202                         //obj.str_fulldate=str_fulldate;
203                         break;
204                     }
205                 }
206                 that.arr_date.push(obj);
207             }
208         }
209         else {
210             for (var i = 1; i <= day31_list1; i++) {
211                 var str_fulldate = that.year + (that.month + 1 + 100 + "").substr(1) + (i + 100 + "").substr(1);
212                 var obj = {text: i, inmonth: true, isenable: false, str_fulldate: str_fulldate};
213                 //obj.isenable = true;<-在不區分是否激活的情況下,不需要變色標記
214                 that.arr_date.push(obj);
215             }
216         }//將本月內的日期物件推入
217 
218         var len = that.arr_date.length;
219         for (i = 0; i < (42 - len); i++) {//補上本月剩余的灰色部分
220             that.arr_date.push({text: i + 1, inmonth: false})
221         }
222       //開始繪制按鈕
223         var int2 = that.h1 + that.h2 - that.shadowSize - that.paddingSize;
224         for (var i = 0; i < 7; i++)//對于每一行
225         {
226             for (var j = 0; j < 7; j++) {
227 
228                 (function () {//這里需要用閉包避免var變數污染
229                     var div = document.createElement("div");
230                     div.class = "div_riligrid";
231                     //div.className="div_riligrid";
232                     div.style.position = "absolute";
233                     div.style.display = "inline-block";
234                     div.style.top = i * sizey + int2 + "px";
235                     div.style.left = j * sizex + "px";
236                     div.style.width = sizex + "px";
237                     div.style.height = sizey + "px";
238 
239                     //div.style.borderWidth="0px"
240                     //div.style.borderColor=that.hoverBorderColor
241                     div.style.textAlign = "center";
242 
243 
244                     if (i == 0)//第一行顯示一周七天的名字,按中式習慣從周一到周日顯示
245                     {
246                         div.style.color = that.gridColor;
247                         div.innerText = that.arr_day7[j + 1];
248                         div.style.fontSize = that.contentFontSize + "px";
249                         div.style.cursor = "default";
250                     }
251                     else//接下來根據串列生成日期小塊
252                     {
253                         div.style.fontSize = that.contentFontSize + 4 + "px";
254                         div.style.cursor = "pointer";
255                         var index = (i - 1) * 7 + j;
256                         (function () {
257                             var obj = that.arr_date[index];
258                             div.innerText = obj.text;
259                             if (!obj.inmonth) {//對于不在本月內的占位按鈕
260                                 div.style.color = that.gridColor0;
261                             }
262                             else//根據條件判斷按鈕是否可點擊
263                             {
264                                 div.style.color = that.gridColor;
265                                 //obj.isEnabled=false;
266                                 //div.style.borderWidth
267                                 /*div.onclick=function(){
268                                     that.pickcallback(obj.text)
269                                 }*/
270                                 div.style.top = i * sizey + int2 + 1 + "px";
271                                 div.style.left = j * sizex + 1 + "px";
272                                 div.style.width = sizex - 2 + "px";
273                                 div.style.height = sizey - 2 + "px";
274                                 if (obj.isenable == true || that.flag_canPickUnEnabled) {
275                                     div.onclick = function () {
276                                         //obj.isenable
277                                         that.pickcallback(obj.str_fulldate,that)
278                                     }
279                                 }
280 
281                                 //div.style.border="1px solid "+that.hoverBorderColor;
282                                 //滑鼠移入移出事件
283                                 div.onpointerenter = function () {//滑鼠移入時顯示邊框
284                                     div.style.border = "1px solid " + that.hoverBorderColor;
285                                 }
286                                 div.onpointerleave = function () {
287                                     div.style.border = "0px"
288                                 }
289                                 that.obj_enable["div_" + obj.str_fulldate] = div;
290                                 if (obj.isenable) {
291                                     div.style.backgroundColor = that.enableBackColor;
292 
293                                 }
294                             }
295                         })()
296                         //事件
297                     }
298                     that.div_list.appendChild(div);
299                 })()
300             }
301         }
302         that.inited=true;
303         if (that.true_cbrq) {
304              that.pick(that.true_cbrq);
305         }
306         if (callback) {
307             callback();
308         }
309     }catch(e)
310     {
311         alert(e);
312         console.log(e);
313     }
314 }
315 DatePicker.prototype.reloadDateList=function(callback)
316 {//重新渲染當前月份日歷按鈕前,從后臺查詢本月激活按鈕
317     console.log("重新加載日期串列")//7*6標準
318     this.arr_date=[];
319     this.obj_enable={};
320     this.div_list.innerHTML="";
321     var that=this;
322     //有可能不需要后臺查詢!
323     if(this.searchEnableUrl)
324     {
325         if(typeof searchEnableUrl=="string") {//如果url是字串
326 
327 
328             //先繪制標簽還是先查詢標簽限制?
329             var ajax = createXMLHttpRequest();
330             ajax.open("POST", this.searchEnableUrl);
331             ajax.onreadystatechange = function () {//這里取到的this時ajax物件!
332                 if (ajax.readyState == 4) {
333 
334                     if (ajax.status == 200) {
335                         var str_json = ajax.responseText;
336                         try {
337                             var obj_json = JSON.parse(str_json);
338                             if (obj_json.type == "ok") {
339                                 that.obj_json = obj_json;
340                                 DatePicker.DrawButton(that, callback);
341 
342                             }
343                             else if (obj_json.type == "error") {
344                                 alert(obj_json.str_res);
345                                 console.log(obj_json.str_res);
346                             }
347                         }
348                         catch (e) {
349                             alert(e);
350                             console.log(e);
351                         }
352                         ajax.abort();
353                     }
354                 }
355             }
356 
357             //var obj_json={ str_month:this.year+(this.month+1+100+"").substr(1)}
358             //ajax.send(JSON.stringify(obj_json));//總之sb2的servlet不能自動轉化json和FormData
359             var formData = https://www.cnblogs.com/ljzc002/archive/2020/11/11/new FormData()
360             formData.append("str_month", this.year + (this.month + 1 + 100 + "").substr(1));
361             ajax.send(formData);
362             //
363         }
364         else {
365             that.obj_json = this.searchEnableUrl;//不去后端查詢,直接把searchEnableUrl作為所需資料
366             DatePicker.DrawButton(that, callback);
367         }
368     }
369     else {
370         DatePicker.DrawButton(that,callback);
371     }
372 
373 }
374 DatePicker.prototype.pick0=function(true_cbrq)//通過代碼設定被選中按鈕,
375 {//如果被選中按鈕在另一個月,則日歷會自動跳轉到相應月份,并且改變被選中按鈕的顏色
376     var year=parseInt(true_cbrq.substr(0,4));
377     var month=parseInt(true_cbrq.substr(4,2));
378     var day31=true_cbrq.substr(6,2);
379     this.true_cbrq=true_cbrq;
380     if(this.year!=year||(this.month+1)!=month)
381     {
382         this.year=year;
383         this.month=month-1;
384         this.true_cbrq=true_cbrq;
385         this.changeMonth();
386         this.changeYear();
387         //this.reloadDateList()
388 
389     }
390     else
391     {
392         if(this.inited)
393         {
394             this.pick(true_cbrq)
395         }
396         else {
397             this.reloadDateList();
398         }
399     }
400 }
401 DatePicker.prototype.pick=function(true_cbrq)//修改被點擊按鈕的顏色
402 {
403     if(this.grid_picked)
404     {
405         this.grid_picked.style.backgroundColor=this.enableBackColor;
406 
407     }
408     var grid=this.obj_enable["div_"+true_cbrq];
409     if(grid)
410     {
411         grid.style.backgroundColor=this.enableBackColorPicked;
412         this.grid_picked=grid;
413     }
414 }
415 DatePicker.getDateStr=function(dt)//以下是一些輔助方法
416 {
417     var arr_day=["","一","二","三","四","五","六","日"];
418     var str_date=dt.getFullYear()+"年"+(dt.getMonth()+1)+"月"+dt.getDate()+"日 星期"+arr_day[dt.getDay()];
419     return str_date;
420 }
421 DatePicker.getDateStr2=function(dt)//標準八位日期
422 {
423     var str_date2=dt.getFullYear()+(dt.getMonth()+1+100+"").substr(1)+(dt.getDate()+100+"").substr(1);
424     return str_date2;
425 }
426 //八位純數字日期加兩個杠,變成十位標準日期
427 DatePicker.addGang=function(str)
428 {
429     var str_res=str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2);
430     return str_res;
431 }
432 //八位純數字日期加上漢字年月日,并且去掉補位的0
433 DatePicker.addNYR=function(str)
434 {
435     var str_res=str.substr(0,4)+"年"+parseInt(str.substr(4,2))+"月"+parseInt(str.substr(6,2))+"日";
436     return str_res;
437 }

github地址:https://github.com/ljzc002/SimpleAni

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/210532.html

標籤:其他

上一篇:蒲公英 &#183; JELLY技術周刊 Vol.29: 前端智能化在阿里的那些事

下一篇:使用jQuery實作購物車

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more