用JavaScript+layui實現一個日期計算的工具
阿新 • • 發佈：2019-01-24
日曆是我們生活中必不可少的一個東西，不管是電腦自帶的日曆，還是手機裡面自帶的，或者是家裡桌面上擺放的，其實都是為了看日期，算日子，但是所有這些其實都是不具備計算日期的功能的，只是告訴你哪一天是什麼節日，但是到底還有多少天可以到我們還要自己算，那麼這個問題也困擾到我了，所以我決定寫一個小工具，將常見的節日剩餘天數計算出來，同時可以根據自己要求的日期，計算一下還有多少天，或者是一個特殊的日期已經過去了多少天，我們今天就簡單的寫一個這個工具！
效果預覽：
樣式是使用layui實現的，這裡不做贅述，layui官網都是可以直接找到的！
H5程式碼：
<div> <label>計算日期的小工具</label> <br /> <button type="button" name="" id="" onclick="datectrol('距離中秋日期','Sep 24,2018')">中秋節</button> <button type="button" name="" id="" onclick="datectrol('距離重陽節日期','Oct 17,2018')">重陽節</button> <button type="button" name="" id="" onclick="datectrol('距離聖誕節日期','Dec 25,2018')">聖誕節</button><br /> <button type="button" name="" id="" onclick="datectrol('距離春節日期','Feb 4,2019')">春節</button> <button type="button" name="" id="" onclick="datectrol('距離除夕日期','Feb 5,2019')">除夕</button> <button type="button" name="" id="" onclick="datectrol('距離元旦日期','Jan 1,2019')">元旦</button><br /> <input type="button" name="" id="userdate" value="查詢" onclick="convertdate(this.value)" class="inputcss"/> <input type="date" id="datetime" value="" placeholder="自己輸入" class="layui_input" onchange="valdate()"/> </div>
css程式碼：
div{text-align: center;} label{font-size: 2rem;font-family: "agency fb";} label:hover{color: #1E9FFF;} button {display: inline-block;height: 38px;line-height: 38px;padding: 0 18px; background-color: #1E9FFF; color: #fff;white-space: nowrap; text-align: center; font-size: 14px;border: none;border-radius: 2px;cursor: pointer;opacity: .9; width: 8rem;height: 4rem;margin-left: 1rem;margin-top: 1rem;} button:hover{width: 9rem;height: 4.5rem;border-color: #F72359;} .inputcss{display: inline-block;height: 38px;line-height: 38px;padding: 0 18px; background-color: #1E9FFF; color: #fff;white-space: nowrap; text-align: center; font-size: 14px;border: none;border-radius: 2px;cursor: pointer;opacity: .9; width: 8rem;height: 4rem;margin-left: 1rem;margin-top: 1rem;} .inputcss:hover{width: 9rem;height: 4.5rem;border-color: #F72359;} .input_date{margin-left: 1rem;} .layui_input{display: block;width: 12rem;padding-left: 10px;height: 38px;line-height: 38px;line-height: 36px\9; border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;margin-top: 1rem;margin-left: 45%;}
js程式碼：
/*計算時間*/ function datectrol(name,val){ BirthDay=new Date(val);//元旦的日期 today=new Date();//當前的日期 timeold=(-today.getTime()+BirthDay.getTime()); sectimeold=timeold/1000; secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000; d_daysold=timeold/msPerDay; daysold=Math.floor(d_daysold); d_hrsold=(d_daysold-daysold)*24; hrsold=Math.floor(d_hrsold); d_minsold=(d_hrsold-hrsold)*60; minsold=Math.floor((d_hrsold-hrsold)*60); seconds=Math.floor((d_minsold-minsold)*60); layer.open({ skin: 'demo-class', title:name, content: ''+name+'還有:'+daysold+'天'+hrsold+'小時'+minsold+'分'+seconds+'秒' }); } /*將時間填進去*/ function valdate(){ $("#userdate").val($("#datetime").val()); } /*日期元件*/ function datechooice(){ laydate.render({ elem: '#datetime' ,type: 'date' //預設，可不填 }); } /*時間轉換*/ function convertdate(val){ console.log(val); if(val == "查詢" || val == null || val == undefined){ layer.msg("請選擇日期再操作"); return false; } var condate = val.split("-"); var year = condate[0]; var month = condate[1]; var day = condate[2]; var conmonth; switch(month){ case "01": month = "Jan"; break; case "02": month = "Feb"; break; case "03": month = "Mar"; break; case "04": month = "Apr"; break; case "05": month = "May"; break; case "06": month = "Jun"; break; case "07": month = "Jul"; break; case "08": month = "Aug"; break; case "09": month = "Sep"; break; case "10": month = "Oct"; break; case "11": month = "Nov"; break; case "12": month = "Dec"; break; default: month = "|" } /*將資料格式化成需要的格式*/ var userdatetime = month+" "+day+","+year; datectrol(name,userdatetime) }
PS：這裡的時間處理方面是這樣的，可能有人沒理解我的做法，我解釋一下！就是計算日期的時候的格式是這樣的：英文+空格+天+,+年份，我寫到這裡的時候發現layui提供給我的時間的格式是這樣的：年-月-天，是不可以直接使用計算的，那麼這個時候我需要做的就是將這個時間格式轉為可以用的格式，做法是先將-分割的地方分離出來：
var condate = val.split("-");分別拿到年月日，這裡有人會說了，你怎麼知道分割以後就是一個數組呢？這個很簡單，可以打印出來看格式，他是一個[]包圍的陣列，那麼既然是陣列，分別拿到陣列下標對應的資料就順理成章了：
var year = condate[0];
var month = condate[1];
var day = condate[2];拿到以後呢，我們需要做的就是將月份對應的英文轉換一下，這個時候兩種寫法，可以使用if(){}else{}只要不覺得麻煩，當然也可以使用switch（）{case}，我建議使用這個，程式碼簡單，其次不會寫亂：
最後就是將資料格式化為我們需要的，這裡拼接字串就可以了：
var userdatetime = month+" "+day+","+year;最後呼叫計算的函式就OK了！
喜歡寫小工具和研究新技術的可以聯絡我，共同進步！雖然技術含量不高，但是寫程式碼還是很有樂趣的！
下面是我的名片，掃碼可見：
