js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)
用Html實(shí)現(xiàn)人人網(wǎng)注冊(cè)界面 ,Js實(shí)現(xiàn)生日欄表單三級(jí)聯(lián)動(dòng)
1. 效果
2.Html代碼部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>人人網(wǎng)日期表單聯(lián)動(dòng)</title> <style> select { font:20px/40px '宋體'; } option {width: 100px;} </style> </head> <body> <form method = "get" onchange="changeMonth()"> <b><h3 align="center"> 免費(fèi)開(kāi)通人人網(wǎng)賬號(hào) </h3></b> <table align="center" height = "500"> <tr ><td>注冊(cè)郵箱: </td><td> <input type = "text" name = "name"/></td></tr> <tr><td> </td><td>你還可以使用 <a >賬號(hào)</a> 注冊(cè)或者 <a >手機(jī)號(hào)</a> 注冊(cè)</td></tr> <tr><td>創(chuàng)建密碼: </td><td><input type = "password" name = "password"/></td></tr> <tr><td>真實(shí)姓名: </td><td><input type = "password" name = "name"/></td> <tr><td align="right">性別: </td><td>男<input type = "radio" value = "male" name = "gender"/> 女<input type = "radio" value = "female" name = "gender"/></td></tr> <tr><td align="right">生日: </td><td> <div id="box"> <select name="sel1" id="sel1"> <option value="year">年</option> </select> <select name="sel2" id="sel2"> <option value="month">月</option> </select> <select name="sel3" id="sel3"> <option value="day">日</option> </select> <span id="result"></span> </div></td></tr> <tr><td align="right">我現(xiàn)在: </td> <td><select name = "subject"> <option value = "xu">正在上學(xué)</option> <option value = "cz">工作</option> <option value = "gz">賦閑</option> <option value = "bk">經(jīng)商</option> </select></td></tr> <tr><td></td><td> <a >看不清換一張?</a> </td></tr> <tr><td>驗(yàn)證碼:</td><td><input type = "password" name = "yanzheng"/></td></tr> <tr><td></td><td><a > </a></td></tr> </table> </form> </body> </html>
3.JavaScript代碼
<script> //生成日期 function creatDate() { //生成1900年-2100年 for(var i = 2016; i >= 1950; i--) { //創(chuàng)建select項(xiàng) var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel1.appendChild(option); } //生成1月-12月 for(var i = 1; i <=12; i++){ var option1 = document.createElement('option'); option1.setAttribute('value',i); option1.innerHTML = i; sel2.appendChild(option1); } //生成1日—31日 for(var i = 1; i <=31; i++){ var option2 = document.createElement('option'); option2.setAttribute('value',i); option2.innerHTML = i; sel3.appendChild(option2); } } creatDate(); //保存某年某月的天數(shù) var days; //年份點(diǎn)擊 綁定函數(shù) sel1.onclick = function() { //月份顯示默認(rèn)值 sel2.options[0].selected = true; //天數(shù)顯示默認(rèn)值 sel3.options[0].selected = true; } //月份點(diǎn)擊 綁定函數(shù) sel2.onclick = function() { //天數(shù)顯示默認(rèn)值 sel3.options[0].selected = true; //計(jì)算天數(shù)的顯示范圍 //如果是2月 if(sel2.value == 2) { //判斷閏年 if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) { days = 29; } else { days = 28; } //判斷小月 }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){ days = 30; }else{ days = 31; } //增加或刪除天數(shù) //如果是28天,則刪除29、30、31天(即使他們不存在也不報(bào)錯(cuò)) if(days == 28){ sel3.remove(31); sel3.remove(30); sel3.remove(29); } //如果是29天 if(days == 29){ sel3.remove(31); sel3.remove(30); //如果第29天不存在,則添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),null) } } //如果是30天 if(days == 30){ sel3.remove(31); //如果第29天不存在,則添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),null) } //如果第30天不存在,則添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),null) } } //如果是31天 if(days == 31){ //如果第29天不存在,則添加第29天 if(!sel3.options[29]) { sel3.add(new Option('29','29'),null) } //如果第30天不存在,則添加第30天 if(!sel3.options[30]) { sel3.add(new Option('30','30'),null) } //如果第31天不存在,則添加第31天 if(!sel3.options[31]) { sel3.add(new Option('31','31'),null) } } } //結(jié)果顯示 設(shè)置好日期時(shí)間后 彈窗通知 box.onclick = function() { //當(dāng)年、月、日都已經(jīng)為設(shè)置值時(shí) if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day') { alert("日期時(shí)間已經(jīng)設(shè)定好"); } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js中的hasOwnProperty和isPrototypeOf方法使用實(shí)例
這篇文章主要介紹了js中的hasOwnProperty和isPrototypeOf方法使用實(shí)例,需要的朋友可以參考下2014-06-06前端如何實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果
這篇文章主要介紹了前端如何實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果,幫助大家更好的理解和學(xué)習(xí)前端開(kāi)發(fā)網(wǎng)頁(yè),感興趣的朋友可以了解下2021-02-02JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04按鍵測(cè)試,支持像 Ctrl+Alt+Shift+T 的組合鍵
按鍵測(cè)試,支持像 Ctrl+Alt+Shift+T 的組合鍵...2006-10-10ES6入門(mén)教程之Iterator與for...of循環(huán)詳解
最近在學(xué)習(xí)ES6,剛剛看到Iterator和for...of循環(huán)這一章,所以想要跟大家略微分享一下,下面這篇文章主要給大家介紹了關(guān)于ES6入門(mén)學(xué)習(xí)中Iterator與for...of循環(huán)的相關(guān)資料,不足之處還望大家多多指正,需要的朋友們可以參考學(xué)習(xí)。2017-05-05JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07JS中使用apply、bind實(shí)現(xiàn)為函數(shù)或者類傳入動(dòng)態(tài)個(gè)數(shù)的參數(shù)
這篇文章主要介紹了JS中使用apply、bind實(shí)現(xiàn)為函數(shù)或者類傳入動(dòng)態(tài)個(gè)數(shù)的參數(shù)的相關(guān)資料,需要的朋友可以參考下2016-04-04