这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现年月日表单三级联动,生日栏表单三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用 html 实现人人网注册界面 ,Js 实现生日栏表单三级联动
1. 效果
2.Html 代码部分
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- 人人网日期表单联动
- </title>
- <style>
- select { font:20px/40px '宋体'; } option {width: 100px;}
- </style>
- </head>
- <body>
- <form method="get" onchange="changeMonth()">
- <b>
- <h3 align="center">
- 免费开通人人网账号
- </h3>
- </b>
- <table align="center" height="500">
- <tr>
- <td>
- 注册邮箱:
- </td>
- <td>
- <input type="text" name="name" />
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- 你还可以使用
- <a href="https://www.baidu.com">
- 账号
- </a>
- 注册或者
- <a href="https://www.baidu.com">
- 手机号
- </a>
- 注册
- </td>
- </tr>
- <tr>
- <td>
- 创建密码:
- </td>
- <td>
- <input type="password" name="password" />
- </td>
- </tr>
- <tr>
- <td>
- 真实姓名:
- </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">
- 我现在:
- </td>
- <td>
- <select name="subject">
- <option value="xu">
- 正在上学
- </option>
- <option value="cz">
- 工作
- </option>
- <option value="gz">
- 赋闲
- </option>
- <option value="bk">
- 经商
- </option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- ![](verycode.gif)
- <a href="https://www.baidu.com">
- 看不清换一张?
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 验证码:
- </td>
- <td>
- <input type="password" name="yanzheng" />
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <a href="https://www.baidu.com">
- ![](btn_reg.gif)
- </a>
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
3.JavaScript 代码
- <script>
- //生成日期
- function creatDate() {
- //生成1900年-2100年
- for (var i = 2016; i >= 1950; i--) {
- //创建select项
- 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();
- //保存某年某月的天数
- var days;
- //年份点击 绑定函数
- sel1.onclick = function() {
- //月份显示默认值
- sel2.options[0].selected = true;
- //天数显示默认值
- sel3.options[0].selected = true;
- }
- //月份点击 绑定函数
- sel2.onclick = function() {
- //天数显示默认值
- sel3.options[0].selected = true;
- //计算天数的显示范围
- //如果是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;
- }
- //增加或删除天数
- //如果是28天,则删除29、30、31天(即使他们不存在也不报错)
- 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)
- }
- }
- }
- //结果显示 设置好日期时间后 弹窗通知
- box.onclick = function() {
- //当年、月、日都已经为设置值时
- if (sel1.value != 'year' && sel2.value != 'month' && sel3.value != 'day') {
- alert("日期时间已经设定好");
- }
- }
- </script>
来源: http://www.phperz.com/article/17/0704/326884.html