溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現簡單的天數計算器。分享給大家供大家參考，具體如下：
剛學了JS，想做個計算兩個日期之間相差天數的東西，因為本人總是要算距離XX還有多少天。。
開始用很笨的方法寫了一個，寫完百度了一下，發現用 Date() 的話 幾行代碼就可以搞定。自己看語法的時候一掃而過，覺得會了，其實是不會的，至少在該用它的時候都想不到他有這個功能，這就是掌握類庫的重要性吧。
先放上寫的很笨的那種方法：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天數計算器</title>
<script src="../lib/js/jquery-2.1.1.js"></script>
<script src="year.js"></script>
</head>
<body>
<h3>天數計算器</h3>
<div>
<label>起:</label>
<input type="text" id="beginYear">
<label >年</label>
<input type="text" id="beginMonth">
<label >月</label>
<input type="text" id="beginDay">
<label >日</label>
</div>
<br>
<div>
<label>止:</label>
<input type="text" id="endYear">
<label >年</label>
<input type="text" id="endMonth">
<label >月</label>
<input type="text" id="endDay">
<label >日</label>
</div>
<br>
<div>
<input type="button" id="submit" value="確定" onclick="days()">
<input type="button" id="cancel" value="取消">
</div>
<script>
function days() {
// 一年的第幾天
var day1 = YEAR.dayOfYear( Number($("#beginYear").val()), Number($("#beginMonth").val()) ) + Number($("#beginDay").val());
var day2 = YEAR.dayOfYear( Number($("#endYear").val()), Number($("#endMonth").val()) ) + Number($("#endDay").val());
var year1 = Number($("#beginYear").val());
var year2 = Number($("#endYear").val());
if ( year1 < year2 ) {
var sum = YEAR.yearCount( Number($("#beginYear").val()), Number($("#endYear").val()) );
if ( YEAR.isLeapYear( year1 ) )
sum = sum + (366 - day1) + day2;
else
sum = sum + (365 - day1) + day2;
alert("之間有" + sum + "天！");
} else if ( year1 == year2 ) {
sum = day2 - day1;
alert("之間有" + sum + "天！");
} else {
$(function() {
alert("請輸入正確的起止時間！");
});
}
}
</script>
</body>
</html>
year.js
window.YEAR = {
// 判斷是不是閏年
isLeapYear : function (year) {
if((year % 4 == 0 && year % 100 !=0 ) || year % 400 == 0)
return true;
else
return false;
},
// 相差的整年數，換算成天數
yearCount : function (yearBefore, yearAfter) {
var year = yearBefore + 1;
var sum = 0;
while (year < yearAfter) {
if ( YEAR.isLeapYear(year) )
sum = sum + 366;
else
sum = sum + 365;
year++;
}
return sum;
},
// 一年中的第幾天，只計算到月份
dayOfYear : function (year, month ) {
var myYear = year;
var sum = 0;
for(var i = 1; i < month; i++) {
switch(i) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
sum = sum + 31;
break;
case 4:
case 6:
case 9:
case 11:
sum = sum + 30;
break;
case 2:
if(YEAR.isLeapYear(myYear))
sum = sum + 29;
else
sum = sum + 28;
break;
}
}
return sum;
},
};
下面說另一種方法，主要用到Date里面的Date.parse（），具體使用詳情，w3school上面有。下面代碼~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天數計算器</title>
<script src="../lib/js/jquery-2.1.1.js"></script>
<script src="year.js"></script>
</head>
<body>
<h3>天數計算器</h3>
<div>
<label>起:</label>
<input type="text" id="beginYear">
<label >年</label>
<input type="text" id="beginMonth">
<label >月</label>
<input type="text" id="beginDay">
<label >日</label>
</div>
<br>
<div>
<label>止:</label>
<input type="text" id="endYear">
<label >年</label>
<input type="text" id="endMonth">
<label >月</label>
<input type="text" id="endDay">
<label >日</label>
</div>
<br>
<div>
<input type="button" id="submit" value="確定" onclick="test()">
<input type="button" id="cancel" value="取消">
</div>
<script>
function test() {
var minutes = 1000 * 60
var hours = minutes * 60
var days = hours * 24
var y1 = Number($("#beginYear").val());
var m1 = Number($("#beginMonth").val());
var d1 = Number($("#beginDay").val());
var y2 = Number($("#endYear").val());
var m2 = Number($("#endMonth").val());
var d2 = Number($("#endDay").val());
var date1 = $("#beginYear").val() +',' + $("#beginMonth").val() +','+ $("#beginDay").val();
var date2 = $("#endYear").val() +','+ $("#endMonth").val() + ','+$("#endDay").val();
var day1 = Date.parse(date1);
var day2 = Date.parse(date2);
d = day2 - day1;
d = d / days;
alert("之間有" + d + "天！");
}
</script>
</body>
</html>
以后要繼續優化界面，爭取使用起來感覺更好，尤其是界面~
PS：這里再為大家推薦幾款比較實用的天數計算在線工具供大家使用：
在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
在線天數計算器：
http://tools.jb51.net/jisuanqi/datejsq
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
