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

时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）

2014-06-27 14:45 387 查看

这个功能是大学时自己使用纯JavaScript写的，没有借助Jquery，呵呵呵，看起来有点繁琐，可是在当时依稀的记得功能实现后自己好好的高兴一把了呢

，从现在来看那时候的自己是多么的幼稚、多么的无知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>年月日三级联动（默认显示系统时间）</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function removeChilds(id){
var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的下面的for循环用于清除原来日的下拉列表的select中的对节点
for(var i=childs.length-1;i>=0;i--) {
document.getElementById(id).removeChild(childs[i]);
}
}
function setDay(){
var yearToDate=document.getElementById("year").value;
var monthToDate=document.getElementById("month").value;
//alert(yearToDate+":"+monthToDate);
var days=new Array(28,29,30,31);
var nowDate=new Date();
if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){
removeChilds("day");
for( i=1; i<=days[3]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){
removeChilds("day");
for( i=1; i<=days[2]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
if(monthToDate==2){
removeChilds("day");
if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年
for( i=1; i<=days[1]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
else{
for( i=1; i<=days[0]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
}
}
function getMonth(){
var m;
for(m=1;m<=12;m++) {
if((new Date().getMonth()+1)==m){
document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");
}else{
document.write("<option value="+m+">"+m+"</option>");
}
}
}
function getYear(){
var y;
var date=new Date();
var fullYear=date.getFullYear();
for(y=fullYear-60;y<=fullYear;y++){
if(y==fullYear){
document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");
}else{
document.write("<option value="+y+" >"+y+"</option>");
}
}
}
</script>
</head>
<body>
<select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年
<select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月
<select name="day" id="day"><script type="text/javascript">setDay();</script></select>日
</body>
</html>

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

标签： 年月日三级联动默认显示系统时间

相关文章推荐

新的分享

章节导航