从服务器获取时间的年月日三级联动

最新推荐文章于 2024-11-13 01:18:00 发布

AbnerLv

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量1.5k

点赞数

分类专栏： Web前端文章标签： jsp javascript tomcat 三级联动

本文链接：https://blog.csdn.net/u010077865/article/details/42196735

版权

Web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

把闰年怎么计算，二月的天数是怎么变化和怎么获取服务器（Tomcat）的时间弄明白了，就很简单。

js代码：

var monthNumber = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//开始加载
window.onload = function()
{
    var now = getServerTime();
    var y = now.getFullYear();
    
	//以服务器时间今年为准，前30年
    for (var i = y; i >= y - 30; i--) {
        document.getElementById("year").options.add(new Option(i,i));
    }
  
    //月份的下拉框
    for (var i = 1; i <= 12; i++){
        document.getElementById("month").options.add(new Option(i,i));
    }
    
   
    for (var i=1; i <= 30; i++){
         document.getElementById("day").options.add(new Option(i,i));
    }
};

//获取服务器时间
function getServerTime(){	
    var xmlHttp = null;  
    //获取服务器时间  
    try {  
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (e) {  
        try {  
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
        } catch (e2) {  
        }  
    }  
     
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  
        xmlHttp = new XMLHttpRequest();  
    }  
     
    xmlHttp.open("GET", window.location.href.toString(), false);  
    xmlHttp.setRequestHeader("If-None-Match", "bytes=-1");  
    xmlHttp.setRequestHeader("Cache-Control","no-cache");  
    xmlHttp.send(null);   
    return new Date(xmlHttp.getResponseHeader("Date"));  
}  

//年联动月，日
function yearMonth(str){
    if(str != ""){
       var monthvalue = document.getElementById("month").options[window.document.getElementById("month").selectedIndex].value;
       monthDay(monthvalue);
    } 
}

//月联动日
function monthDay(str) {
    if(str != ""){
        var yearvalue = document.getElementById("year").options[window.document.getElementById("year").selectedIndex].value;
        var n = monthNumber[str - 1];
        alert(str +" hfdgbh "+n);
        if (str==2 && isLeapYear(yearvalue)) n++;
           selectDay(n);
    } 
}

//据条件显示日
function selectDay(n) {
    document.getElementById("day").options.length = 1;
    for (var i=1; i<=n; i++){
         document.getElementById("day").options.add(new Option(i,i));
    }
}

//判断是否闰平年
function isLeapYear(year){ 
   return (year%4 == 0 && (year%100 !=0 || year%400 == 0));
}

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
 <script type="text/javascript" src="time_level3linkage.js" charset="utf-8"></script>
</head>

<body>
<form name="form1">
    <select name="year" id="year" οnchange="yearMonth(this.value)"><option value="">选择年份</option></select>
    <select name="month" id="month" οnchange="monthDay(this.value)"><option value="">选择月份</option></select>
	<select name="day" id="day"><option value="">选择日期</option></select>
</form>
</body>
</html>