Js achieves three levels of interaction between year, month, and day forms,

Js achieves three levels of interaction between year, month, and day forms,

Use Html to implement Renren registration interface and Js to implement three-level linkage of birthday bar forms

1. Effect

2. Html code section

<! DOCTYPE html> 
3. JavaScript code

<Script> // generate the date function creatDate () {// generate the 1900-2100 for (var I = 2016; I> = 1950; I --) {// create select item var option = document. createElement ('option'); option. setAttribute ('value', I); option. innerHTML = I; sel1.appendChild (option) ;}// generate January-December for (var I = 1; I <= 12; I ++) {var option1 = document. createElement ('option'); option1.setAttribute ('value', I); option1.innerHTML = I; sel2.appendChild (option1) ;} // Generate 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 (); // Save the number of days in a month in a year var days; // click the binding function sel1.onclick = function () {// The default value of sel2.options [0] is displayed in a month. selected = true; // display the default value of sel3.options in days [0]. selected = true;} // month click the binding function sel2.onclick = function () {// Number of days display default value sel3.opt Ions [0]. selected = true; // display range of computing days // if it is February if (sel2.value = 2) {// determine the leap year if (sel1.value % 4 ===0 & sel1.value % 100! = 0) | sel1.value % 400 = 0) {days = 29;} else {days = 28 ;} // determine the minor month} else if (sel2.value = 4 | sel2.value = 6 | sel2.value = 9 | sel2.value = 11) {days = 30 ;} else {days = 31;} // add or delete days // Delete 29, 30, or 31 days for 28 days (no error is reported even if they do not exist) if (days = 28) {sel3.remove (31); sel3.remove (30); sel3.remove (29) ;}// if it is 29 days if (days = 29) {sel3.remove (31); sel3.remove (30); // if 29th days do not exist, add 29th days if (! Sel3.options [29]) {sel3.add (new Option ('29', '29'), null)} // if it is 30 days if (days = 30) {sel3.remove (31); // if 29th days do not exist, add 29th days if (! Sel3.options [29]) {sel3.add (new Option ('29', '29'), null)} // if 30th days do not exist, add 30th days if (! Sel3.options [30]) {sel3.add (new Option ('30', '30'), null)} // if it is 31 days if (days = 31) {// if 29th days do not exist, add 29th days if (! Sel3.options [29]) {sel3.add (new Option ('29', '29'), null)} // if 30th days do not exist, add 30th days if (! Sel3.options [30]) {sel3.add (new Option ('30', '30'), null)} // if 31st days do not exist, add 31st days if (! Sel3.options [31]) {sel3.add (new Option ('31', '31'), null) }}// The result shows the pop-up notification box after the date and time are set. onclick = function () {// if (sel1.value! = 'Year' & sel2.value! = 'Month' & sel3.value! = 'Day') {alert ("the date and time have been set") ;}}</script>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.