How to use Yuansheng JS to implement a birth date drop-down menu

This time I will show you how to use Yuansheng JS to implement the birth date drop-down menu . What are the precautions for using Yuansheng JS to implement the birth date drop-down menu. Here is the actual combat Let’s take a look at the case.

When making a web page, you may need to provide users with a registration account page. There is a lot of information in the user registration design, including the date of birth. For the sake of user experience, we do not want users to enter it manually, and HTML5 date, At present, many browsers do not support it very well, so you can use JS to implement date selection in the three drop-down boxes of year, month, and day. The specific code is as follows:

1. Create a new js file, such as birthday.js;

function DateSelector(selYear, selMonth, selDay) {//定义函数
  this.selYear = selYear;
  this.selMonth = selMonth;
  this.selDay = selDay;
  this.selYear.Group = this;
  this.selMonth.Group = this;
// 给年份、月份下拉菜单添加处理onchange事件的函数
  if (window.document.all != null) // IE
  {
    this.selYear.attachEvent("onchange", DateSelector.Onchange);
    this.selMonth.attachEvent("onchange", DateSelector.Onchange);
  }
  else // Firefox
  {
    this.selYear.addEventListener("change", DateSelector.Onchange, false);
    this.selMonth.addEventListener("change", DateSelector.Onchange, false);
  }
  if (arguments.length == 4) // 如果传入参数个数为4，最后一个参数必须为Date对象
    this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
  else if (arguments.length == 6) // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
    this.InitSelector(arguments[3], arguments[4], arguments[5]);
  else // 默认使用当前日期
  {
    var dt = new Date();
    this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
  }
}
// 增加一个最小年份的属性--最老年份
DateSelector.prototype.MinYear = 1960;
// 增加一个最大年份的属性--最新年份，即当前时期getFullYear()
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function () {
// 循环添加OPION元素到年份select对象中
  for (var i = this.MaxYear; i >= this.MinYear; i--) {
// 新建一个OPTION对象
    var op = window.document.createElement("OPTION");
// 设置OPTION对象的值
    op.value = i;
// 设置OPTION对象的内容
    op.innerHTML = i;
// 添加到年份select对象
    this.selYear.appendChild(op);
  }
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function () {
// 循环添加OPION元素到月份select对象中
  for (var i = 1; i 2. On the page in the registration form, Quoting the js<p style="text-align: left;"></p><pre class="brush:php;toolbar:false"><script></script>
<select></select>年
<select></select>月
<select></select>日
<!--完成出生日期的选择--需写在</body>前-->
<script>
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一个DateSelector类的实例，将三个select对象传进去
new DateSelector(selYear, selMonth, selDay, 1995, 1, 17);
</script>

The above is the detailed content of How to use Yuansheng JS to implement a birth date drop-down menu. For more information, please follow other related articles on the PHP Chinese website!