`
JavaSam
  • 浏览: 951955 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS时间下拉列表-------只显示年份

 
阅读更多
var Calendar = {};
Calendar.$ = function (id){
	return document.getElementById(id);//id选择器
}
/**
 * 初始化方法
 * @param context
 * @param startYear
 * @param floatYear
 */
Calendar.init = function (startYear,floatYear,context){
	try {
		this.constructor = Calendar.init;
		this.context = this.defaultContext;//默认执行上下文
		this.context = context ?  context.nodeType === 1 ? context : this.$(context):context||this.$("calendarSelect");//选择要渲染的空间
		this.context.style.width = "100px";//默认长度
		this.startYear = startYear||new Date().getFullYear();//开始的年份,默认当前年
		this.floatYear = floatYear || 10;//浮动多少年
		this.createOption = createOption(this.startYear,this.floatYear);//创建option
	} catch (e) {
		alert(e);
	}
	return this;
}
/**
 * 创建option
 * @param startYear
 */
function createOption(startYear,floatYear){
	var fragment = document.createDocumentFragment();
	fragment = tempCreateOption(fragment,floatYear,true);
	var currenYearOption = document.createElement("option");
	currenYearOption.selected = 'selected';//设置当前年为选中
	currenYearOption.appendChild(document.createTextNode(startYear))
	fragment.appendChild(currenYearOption);
	fragment = tempCreateOption(fragment,floatYear,false);
	Calendar.context.appendChild(fragment);
	return this;
}


function tempCreateOption(fragment,floatYear,flag){
	for(var i = flag?floatYear:1 ;flag?i>=1:i < floatYear ; flag?i--:i ++){
		var option = document.createElement("option");
		var tmp = flag ? this.startYear+ i : this.startYear-i;
		var text = document.createTextNode(Calendar.startYear + (flag?i:-i));	
		option.appendChild(text);
		fragment.appendChild(option);
	}
	return fragment;
}

 

0
2
分享到:
评论

相关推荐

    js实现起始年份下拉列表

    在JavaScript编程中,创建一个动态的起始年份下拉列表功能是一项常见的需求,尤其在构建日期选择器或者填写表单时。这个实例的核心在于利用JavaScript的事件监听、DOM操作和数组方法来实现动态更新结束年份的下拉...

    javascript下拉列表 显示时间

    在JavaScript编程中,下拉列表(Select...通过这种方式,我们可以实现一个完整的JavaScript下拉列表,其中包含了特定格式的日期,并且可以响应用户的交互。这个功能对于任何需要用户选择日期的网页应用都是非常实用的。

    单击文本框显示时间下拉列表Data.js

    "单击文本框显示时间下拉列表Data.js"是一个JavaScript实现的功能,主要用于用户界面交互,为用户提供一个方便的时间选择方式。这个功能的核心是通过点击文本框来触发一个下拉时间列表,用户可以从列表中选择一个...

    设置年份javaScript下拉列表框内容

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份

    下拉列表关于年月日的显示

    根据提供的文件信息,本文将详细解析“下拉列表关于年月日的显示”这一主题,主要涉及以下几个方面:实现年份、月份、日期选择器的基本原理;JavaScript代码解读及其功能;以及如何根据不同的年份来动态调整月份和...

    下拉列表自动跳转超链接网页

    接下来,我们需要使用JavaScript来监听下拉列表的`change`事件,当用户选择一个新选项时,触发跳转操作。可以使用以下代码: ```javascript document.getElementById('dropdown').addEventListener('change', ...

    jsp出生日期三级级联下拉列表

    2. 编写JavaScript函数,监听年份下拉列表的`onchange`事件。 3. 当年份变化时,使用AJAX向服务器发送请求,请求中包含选定的年份。 4. 服务器端的Servlet接收到请求后,查询数据库并返回对应年份的月份数据,格式...

    利用jsp关联下拉列表日期

    在本文中,我们将探讨如何使用JSP(JavaServer Pages)技术实现关联下拉列表的功能,具体来说是如何根据用户选择的年份和月份动态更新显示的日期列表。这是一个实用且常见的功能,在很多需要用户输入日期的应用场景...

    js级联下拉列表(日历控件)

    帮朋友写的:下拉式列表日期控件,只有年份是写死的,月份和日都是在加载时js动态添加的。同时也根据月份的不同修改天数(包括闰年平年二月的天数);点击按钮后在文本域里显示了js调用后台函数的方法(这个是查到的...

    javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 代码如下: [removed] [removed]=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 ...

    一个简易js日期下拉选择菜单

    例如,为12个月生成下拉列表可以这样做: ```html ``` ```javascript for (let i = 0; i ; i++) { let month = new Date(2000, i, 1).toLocaleString('default', { month: 'long' }); document.getElementById...

    年月日下拉列表实现

    3. **组件设计**:每个下拉列表应该有独立的选择,年份、月份和日期分别对应三个下拉框。可以通过CSS进行样式定制,确保视觉一致性。 4. **事件处理**:当用户在下拉列表中选择时,需要捕获选中事件并更新日期值。...

    js 函数大全--一些常用的就是函数

    - 使用 `document.forms[0].selectName.options[n].value` 获取下拉列表中指定索引的值。 - 示例:`document.forms[0].mySelect.options[1].value`. 35. **创建字符串对象**: - 可以通过 `new String()` 构造...

    vue时间插件 中datepicker.js 修改过支持年,年月,年月日的选择

    vue时间插件 中datepicker.js 修改过支持年,年月,年月日的选择

    javascript为下拉列表动态添加数据项

    本文将详细介绍如何使用JavaScript为下拉列表动态添加数据项。 首先,需要了解的是JavaScript中操作DOM(文档对象模型)的能力。通过DOM,我们能够对网页中的HTML元素进行查询、修改、添加或删除。在这个过程中,最...

    年月日三级联动下拉列表

    这个功能通过三个下拉列表分别展示年、月、日,当用户在其中一个列表中做出选择时,其他两个列表会自动更新,以显示合法的选项。例如,选择一个特定的年份后,月份列表只会显示该年份实际存在的月份,而不会出现不...

    js时间控件年月日时分秒

    JavaScript时间控件是一种在网页上实现用户交互式选取时间的工具,它允许用户根据需要选择年、月、日、小时、分钟和秒。这样的控件在网页表单中非常常见,用于用户输入与时间相关的数据,例如预约、事件安排或者...

    javascript经典例子.txt

    - 实现方法:使用JavaScript的`setInterval`函数定时更新页面上的时间显示。 - **1.5 显示动态显示时钟效果(图像,像手表)** - 描述:通过图像模拟手表的形式显示时间。 - 实现方法:使用HTML5的`canvas`标签...

    省市,年月日级联(JS)

    3. JavaScript实现:类似省市级联,监听年份选择事件并更新月份下拉列表。 ```javascript document.getElementById('year').addEventListener('change', function() { var year = this.value; var monthSelect =...

Global site tag (gtag.js) - Google Analytics