年/月/日三级联动JS代码-网页特效-懒人建站

年/月/日三级联动JS代码

分为年、月、日的三级联动下拉选择菜单JS代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>年/月/日三级联动JS代码-懒人建站</title>
<meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，JS广告代码，网页特效，导航菜单，焦点幻灯片代码，原创视频教程与网页模板和CSS技巧。" />
  <style>
	body {
		margin: 0px;
		padding: 50px;
		font-size: 12px;
	}
	#year, #month, #date{
		width: 60px;
		margin-right: 3px;
	}
  </style>
  <script>
	var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; };
	var Extend = function(destination, source) {
		for(var pro in source) {
			destination[pro] = source[pro];
		}
		return destination;
	}
	var addEvent = function(obj, type, fn) {
		if(obj.addEventListener) {
			obj.addEventListener(type, fn, false);
			return true;
		}else if(obj.attachEvent) {
			obj['e'+type+fn] = fn;
			obj[type+fn] = function(){
				obj['e'+type+fn](window.event);
			}
			obj.attachEvent('on'+type, obj[type+fn]);
			return true;
		}
		return false;
	}
	/*!
	 *	DateSelector
	 *	http://www.cnblogs.com/goodness2010/
	 *
	 *  Copyright (c) 2009 GoodNess2010
	 *  Date: 2009-12-15 (星期二)
	 */
	function DateSelector(idYear, idMonth, idDate, options) {
		var D = new Date();
		this.year = $(idYear);
		this.month = $(idMonth);
		this.date = $(idDate);
		this.nowYear = D.getFullYear();
		this.nowMonth = D.getMonth() + 1;
		this.nowDate = D.getDate();
		Extend(this, this.setOptions(options));
	};
	DateSelector.prototype = {
		setOptions: function(options){
			// 默认项
			this.options = {
				floorYear: 5,			// 距当前年份前5年
				ceilYear: 7,			// 距当前年份后7年
				onStart: function(){},  // 前置事件
				onEnd: function(){}		// 结束事件
			};
			return Extend(this.options, options || {});
		},
		createOption: function(container, start, end, sign){
			sign = sign || start;
			var _num = parseInt(end-start+1, 10); container.options.length = _num; 
			for(var i = 0; i < _num; i++) {
				container.options[i].text = container.options[i].value = start + i;
			}
			container.selectedIndex = (sign-start >= _num ? _num-1 : sign-start);
		},
		getDate: function(y, m){
			return new Date(y, m, 0).getDate();
		},
		getSelText: function(sel) {
			return sel.options[sel.selectedIndex].text;
		},
		changeDate: function(bindO){
			var _this = this;
			addEvent(bindO, 'change', function(){
				var y = _this.getSelText(_this.year), m = _this.getSelText(_this.month), d = _this.getSelText(_this.date);
				_this.createOption(_this.date, 1, _this.getDate(y, m), d);
				_this.onEnd();
			});

},
		bindEvents: function(){
			var _this = this;
			this.changeDate(this.year); this.changeDate(this.month);
			addEvent(this.date, 'change', function(){ _this.onEnd(); });
		},
		init: function(){
			var _startYear = parseInt(this.nowYear - this.floorYear, 10);
			var _endYear = parseInt(this.nowYear + this.ceilYear, 10);
			var _endDate = this.getDate(this.nowYear, this.nowMonth, 0);
			this.createOption(this.year, _startYear, _endYear, this.nowYear);
			this.createOption(this.month, 1, 12, this.nowMonth);
			this.createOption(this.date, 1, _endDate, this.nowDate);
			this.bindEvents();
			this.onStart();
		}
	};
  </script>
 </head>
 <body>
	<select id="year"></select><select id="month"></select><select id="date"></select>
	<span id="info"></span>
	<script>
		var dateSelector = new DateSelector('year', 'month', 'date', {floorYear: 1});		
		dateSelector.onStart = dateSelector.onEnd = function(){
			$('info').innerHTML = this.getSelText(this.year) + '年' + 
								  ('0' + this.getSelText(this.month)).slice(-2) + '月' + 
								  ('0' + this.getSelText(this.date)).slice(-2) + '日';
		}
		dateSelector.init();
	</script>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/js/">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>，
<a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>，
<a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和
<a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>

</body>
</html>

代码说明:

分为年、月、日的三级联动下拉选择菜单JS代码。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2010-03-25|热度：次|收藏|报错

相关文章 国家/省/市三级联动JS源码