请采纳,谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>根据年月日判断属于当年的第几天</title>
</head>
<body>
<select name="year" id="year">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<select name="mongth" id="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day" id="day"></select>
<div id="result"></div>
<script>
var yearSel = document.getElementById('year');
var monthSel = document.getElementById('month');
var daySel = document.getElementById('day');
var resultElm = document.getElementById('result');
// 判断是否是闰年
function isLeapYear(n) {
return ((n % 4 == 0 && n % 100 != 0) || n % 400 == 0);
}
function calculate(year, month, day) {
var num = new Date(year+'/' + month + '/'+ day +' 24:0:0').getTime() - new Date(year+'/1/1 0:0:0').getTime();
num = num/24/3600/1000;
resultElm.innerHTML = '今天是'+year+'年第'+num+'天';
}
// 设置天数下拉框
function setDaySelOptions(year, month) {
var html = '';
var max;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: max=31;break;
case 4:
case 6:
case 9:
case 11: max=30;break;
case 2:
if (isLeapYear()) {
max = 29;
} else {
max = 28;
}
break;
}
for (var i=0;i<max;i++) {
html+='<option value="'+(i+1)+'">'+(i+1)+'</option>'
}
daySel.innerHTML = html;
}
// 初始化
setDaySelOptions(+yearSel.value, +monthSel.value);
calculate(+yearSel.value, +monthSel.value, +daySel.value);
yearSel.onchange = function() {
var year = parseInt(yearSel.value);
var month = parseInt(monthSel.value);
setDaySelOptions(year, month);
var day = parseInt(daySel.value);
calculate(year, month, day);
}
monthSel.onchange = function() {
var year = parseInt(yearSel.value);
var month = parseInt(monthSel.value);
setDaySelOptions(year, month);
var day = parseInt(daySel.value);
calculate(year, month, day);
}
daySel.onchange = function() {
var year = parseInt(yearSel.value);
var month = parseInt(monthSel.value);
var day = parseInt(daySel.value);
calculate(year, month, day);
}
</script>
</body>
</html>