快捷導(dǎo)航

js實(shí)現(xiàn)年月日表單三級聯(lián)動

更新時(shí)間：2020年04月17日 16:39:11 作者：北斗星

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)年月日表單三級聯(lián)動，生日欄表單三級聯(lián)動，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用Html實(shí)現(xiàn)人人網(wǎng)注冊界面，Js實(shí)現(xiàn)生日欄表單三級聯(lián)動

1. 效果

2.Html代碼部分

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>人人網(wǎng)日期表單聯(lián)動</title>
 <style>
 select
 {
  font:20px/40px '宋體';
 }
 option {width: 100px;}
 </style>
</head>
<body>
<form method = "get" onchange="changeMonth()">
 <b><h3 align="center">
 免費(fèi)開通人人網(wǎng)賬號  
 </h3></b>

 <table align="center" height = "500">

 <tr ><td>注冊郵箱: </td><td> <input type = "text" name = "name"/></td></tr>
 <tr><td> </td><td>你還可以使用 <a >賬號</a> 
  注冊或者 <a >手機(jī)號</a> 注冊</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>![](verycode.gif) <a >看不清換一張？</a>
 </td></tr>
 <tr><td>驗(yàn)證碼:</td><td><input type = "password" name = "yanzheng"/></td></tr>
 <tr><td></td><td><a > ![](btn_reg.gif)</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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: