基于JavaScript實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)
更新時(shí)間：2021年06月22日 09:34:30 作者：妄癡夢(mèng)中
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年月日三級(jí)聯(lián)動(dòng)</title>
</head>
<body onload="initYear(),initMonth()">
<select id="year"></select>年
<select id="month" onchange="initDate()"></select>月
<select id="date"></select>日
<script>
/**
* 初始化年
*/
function initYear() {
//獲得當(dāng)前年份
let curYear = new Date().getFullYear();
//獲得年列表對(duì)象
let yearObj = document.getElementById("year");
yearObj.options.add(new Option("---請(qǐng)選擇年---", ""));
for (let year = curYear; year > curYear - 100; year--) {
let option = new Option(year, year);
yearObj.options.add(option);
}
}
/**
* 初始化月份
*/
function initMonth() {
//獲得年列表對(duì)象
let monthObj = document.getElementById("month");
monthObj.options.add(new Option("---請(qǐng)選擇月份---", ""));
for (let month = 1; month <= 12; month++) {
let option = new Option(month, month);
monthObj.options.add(option);
}
}
/**
* 初始化日
*/
function initDate() {
let dateObj = document.getElementById("date");
//獲得當(dāng)月選中月份
let month = document.getElementById("month").value;
//當(dāng)月份選擇完畢，再彈出對(duì)應(yīng)日期
dateObj.options.add(new Option("---請(qǐng)選擇日期---", ""));
//將month轉(zhuǎn)化成數(shù)字
month = parseInt(month);
//定義每月的天數(shù)
let days = 31;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
case 2:
//需要判斷是否為閏年，獲得當(dāng)前選中的年
let year = document.getElementById("year").value;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
days = 29;
} else {
days = 28;
}
break;
}
//將得到的天數(shù)，循環(huán)輸出
for (let i = 1; i <= days; i++) {
let option = new Option(i, i);
dateObj.options.add(option);
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了javascript如何判斷是否按回車鍵并解決瀏覽器之間的差異問題,需要的朋友可以參考下2014-05-05
js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
javascript實(shí)現(xiàn)超好看的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超好看的3D煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10 
小程序提供了豐富的基礎(chǔ)組件給開發(fā)者,開發(fā)者可以像搭積木一樣,組合各種組件拼合成自己的小程序,下面這篇文章主要給大家介紹了關(guān)于微信小程序視圖容器和基本內(nèi)容組件的相關(guān)資料,需要的朋友可以參考下
2022-07-07 
JS獲取時(shí)間的相關(guān)函數(shù)及時(shí)間戳與時(shí)間日期之間的轉(zhuǎn)換
時(shí)間戳和時(shí)間日期的轉(zhuǎn)換是常見的操作，下面就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)它們之間的相互轉(zhuǎn)換，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02 
three.js中g(shù)sap動(dòng)畫庫實(shí)現(xiàn)物體的動(dòng)畫
本文主要介紹了three.js中g(shù)sap動(dòng)畫庫實(shí)現(xiàn)物體的動(dòng)畫，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07 
JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法
這篇文章主要給大家介紹了JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法,好多知識(shí)寫下來也能加深一下自身的記憶,文中給出了詳細(xì)的實(shí)例代碼,對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-09-09 
這篇文章主要為大家介紹了JS語法也可以有C#的switch表達(dá)式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05