javascript帶有星期的年月日級聯選單效果

admin發表於2017-04-12
JavaScript

本章節分享一段程式碼例項它實現了年月日級聯選單功能。

並且此級聯選單帶有星期，這相對而言還是比較少見的，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var arr = "日一二三四五六".split("")
function toDate() {
  with (document.all) {
    vYear = parseInt(year.options[year.selectedIndex].text)
    vMonth = parseInt(month.options[month.selectedIndex].text)
    day.length = 0;
    for (i = 0; i < (new Date(vYear, vMonth, 0)).getDate() ; i++) {
      day.options[day.length++].value = day.length; day.options[day.length - 1].text = day.length;
    }
  }
  toDay();
}
function toDay() {
  vDay = parseInt(document.all.day.options[document.all.day.selectedIndex].value)
  document.all("weekday").value = "星期" + arr[new Date(vYear, vMonth - 1, vDay).getDay()]
  year.onchange = toDate;
  month.onchange = toDate;
  day.onchange = toDate;
}
window.onload = toDate;
</script>
</head>
<body topmargin="10" leftmargin="0">
  <form>
    <select id=year>
      <script>
        for (i = 1970; i <= 2010; i++) {
          document.write("<option>" + i + "</option>")
        }
      </script>
    </select>
    <select id=month>
      <script>
      for (i = 1; i <= 12; i++) {
        document.write("<option>" + i + "</option>")
      }
      </script>
    </select>
    <select id=day></select>
    <input name=weekday>
  </form>
</body>
</html>

相關文章