您的位置：首页 > Web前端 > JavaScript

JS实现生日选择下拉列表

2015-01-12 15:46 489 查看

相信大家浏览过、关注过各式各类的网站，也不乏在其中的个别网站中有过注册！注册的时候有时候需要选择自己的出生日期，当然大部分人并不会注意其的实现过程。本人用JS简单实现下该小功能，希望对有用的着的朋友、小伙伴们有所帮助！

图例：

示例代码（用JS实现）：

<html>

<head>
<script type="text/javascript">
window.onload=function(){
var selects = document.getElementsByTagName("select");//通过标签名获取select对象
var date = new Date();
var nowYear = date.getFullYear();//获取当前的年
for(var i=nowYear-100;i<=nowYear;i++){
var optionYear = document.createElement("option");
optionYear.innerHTML=i;
optionYear.value=i;
selects[0].appendChild(optionYear);
}
for(var i=1;i<=12;i++){
var optionMonth = document.createElement("option");
optionMonth.innerHTML=i;
optionMonth.value=i;
selects[1].appendChild(optionMonth);
}
getDays(selects[1].value,selects[0].value,selects);
}
// 获取某年某月存在多少天
function getDaysInMonth(month,year){
var days;
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) {
days=31;
}else if (month==4 || month==6 || month==9 || month==11){
days=30;
}else{
if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) { // 判断是否为润二月
days=29;
}else {
days=28;
}
}
return days;
}
function setDays(){
var selects = document.getElementsByTagName("select");
var year = selects[0].options[selects[0].selectedIndex].value;
var month = selects[1].options[selects[1].selectedIndex].value;
getDays(month,year,selects);
}
function getDays(month,year,selects){
var days = getDaysInMonth(month,year);
selects[2].options.length = 0;
for(var i=1;i<=days;i++){
var optionDay = document.createElement("option");
optionDay.innerHTML=i;
optionDay.value=i;
selects[2].appendChild(optionDay);
}
}
</script>
<style type="text/css">
.date1{
width:350px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="date1">
<span>出生日期:</span>
<select onchange="setDays()">
</select>
<span>年</span>
<select onchange="setDays()">
</select>
<span>月</span>
<select>
</select>
<span>日</span>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航