`

javascript DateTimer 时间控件 生肖 星座

阅读更多

DateTimer = function(elem_id, current) {
			var local = new Date().getTime();
			this.current = current;
			this.diff = current - local;
			this.elem = document.getElementById(elem_id);
		}

		DateTimer.prototype.start = function() {
			var _self = this;
			var timerID = setTimeout(function() {
				_self.start()
			}, 1000);
			if (this.elem == null)
				return;
			if (this.elem == null)
				return;
			var value = new Date().getTime() + this.diff;
			var d = new Date(value);
			var hours = d.getHours();
			var minutes = d.getMinutes();
			var seconds = d.getSeconds();
			if (hours < 10)
				hours = '0' + hours;
			if (minutes < 10)
				minutes = '0' + minutes;
			if (seconds < 10)
				seconds = '0' + seconds;
			var innerstr = hours + ':' + minutes + ':' + seconds;
			this.elem.innerHTML = innerstr;
		}

		DateTimer.prototype.showTime = function() {
			if (this.elem.size() == 0)
				return;
			var ms = this.current;
			var s = h = m = 0;
			s = Math.floor(ms / 1000);
			if (s >= 60) {
				m = Math.floor(s / 60);
				s = s - m * 60
			}
			if (m >= 60) {
				h = Math.floor(m / 60);
				m = m - h * 60
			}
			if (s < 10)
				s = "0" + s;
			if (m < 10)
				m = "0" + m;
			if (h < 10)
				h = "0" + h;
			this.elem.each(function() {
				this.innerHTML = h + ":" + m + ":" + s;
			});
		}

		Timer = function(elem_id, current_ms, callback, showType) {
			this.current_ms = current_ms;
			this.elem = jQuery('[id=' + elem_id + ']');
			this.count = 0;
			this.delay = false;
			this.callback = callback;
			this.timerID = 0;
			this.showType = showType;
			console.info(this.elem);
		}

		Timer.prototype.start = function() {
			var _self = this;
			this.timerID = setTimeout(function() {
				_self.start()
			}, 1000);

			if (this.elem.size() == 0)
				return;
			if (this.showType == "itemTimer") {
				this.showTime2();
			} else {
				this.showTime();
			}
			this.current_ms -= 1000;
			if (this.current_ms <= 0) {
				if (this.showType == "show2") {
					this.elem.each(function() {
						// this.innerHTML = "还剩:0小时0分钟0秒";
							this.innerHTML = "已结束";
						});
				} else {
					this.elem.innerHTML = "00:00:00";
				}
				if (this.callback && typeof this.callback == 'function') {
					try {
						this.callback();
					} catch (err) {
					}
				}
				return;
			}
		}

		Timer.prototype.showTime = function() {
			if (this.elem.size() == 0)
				return;

			var ms = this.current_ms;
			if (ms <= 0) {
				this.innerHTML = "已结束";
				this.clear();
				return;
			}
			var s = h = m = d = 0;
			s = Math.floor(ms / 1000);
			if (s >= 60) {
				m = Math.floor(s / 60);
				s = s - m * 60;
			}
			if (m >= 60) {
				h = Math.floor(m / 60);
				m = m - h * 60;
			}
			if (h >= 24) {
				d = Math.floor(h / 24);
				h = h - d * 24;
			}
			this.elem.each(function() {
				this.innerHTML = "剩余时间:" + (d > 0 ? d + "天" : "") + h + ":" + m
						+ ":" + s + "";
			});
		}

		Timer.prototype.showTime2 = function() {
			if (this.elem.size() == 0)
				return;
			var ms = this.current_ms;
			if (ms <= 0) {
				this.innerHTML = "已结束";
				this.clear();
				return;
			}
			var s = h = m = d = 0;
			s = Math.floor(ms / 1000);
			if (s >= 60) {
				m = Math.floor(s / 60);
				s = s - m * 60;
			}
			if (m >= 60) {
				h = Math.floor(m / 60);
				m = m - h * 60;
			}
			if (h >= 24) {
				d = Math.floor(h / 24);
				h = h - d * 24;
			}
			this.elem.each(function() {
				this.innerHTML = "(剩余:<b>" + (d > 0 ? d + "</b>天<b>" : "") + h
						+ "</b>小时<b>" + m + "</b>分<b>" + s + "</b>秒)";
			});
		}

		Timer.prototype.clear = function() {
			window.clearTimeout(this.timerID);
			this.current_ms = 0;
		}

		function startTimer(id, time, callback, showType) {
			if (time < 0)
				return null;
			var timer = new Timer(id, time, callback, showType);
			timer.start();
			return timer;
		}
		// 调用方式:
		var date = new Date();
		date.addDays(3);

		var remainTime = date.getTime() - new Date().getTime();
		console.info(remainTime);
		startTimer('show_time', remainTime, "", 'itemTimer');

		var DateUtil = new Object();

		// 回去生肖,传入参数必须是四位的年
		DateUtil.getAnimals = function(year) {
			var arr = ['猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔', '龙', '蛇', '马',
					'羊']
			return /^\d{4}$/.test(year) ? arr[year] : null;
		};

		// 根据生日的月份和日期,计算星座。
		DateUtil.getConstellation = function(month, day) {
			var str = "魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";
			var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];
			return str.substr(month * 2 - (day < arr[month - 1] ? 2 : 0), 2)
					+ "座";
		}

		Date.prototype.format = function(format) {
			var o = {
				"M+" : this.getMonth() + 1, // month
				"d+" : this.getDate(), // day
				"h+" : this.getHours(), // hour
				"m+" : this.getMinutes(), // minute
				"s+" : this.getSeconds(), // second
				"q+" : Math.floor((this.getMonth() + 3) / 3), // quarter
				"S" : this.getMilliseconds()
			// millisecond
			}
			if (/(y+)/.test(format)) {
				format = format.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			}
			for (var k in o) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(RegExp.$1, RegExp.$1.length == 1
							? o[k]
							: ("00" + o[k]).substr(("" + o[k]).length));
				}
			}
			return format;
		};
 
分享到:
评论

相关推荐

    javascript日期时间输入控件

    JavaScript日期时间输入控件在网页开发中非常常见,它们提供了用户友好的界面,方便用户选择日期和时间。这里我们讨论的是一款名为"My97DatePicker3.0.1"的控件,它以其丰富的功能、可定制的皮肤和良好的稳定性而受...

    JavaScript日期时间选择控件

    JavaScript日期时间选择控件是一种常见的前端开发工具,用于在网页上提供用户友好的日期和时间输入界面。在网页设计中,这种控件可以极大提升用户体验,因为它允许用户通过直观的日历视图和时间选择器来设定日期和...

    javascript 日期控件带时间

    JavaScript 日期控件是网页开发中常用的一种交互元素,它允许用户方便地选择日期和时间。在JavaScript中,处理日期和时间主要依赖于内置的`Date`对象。本篇文章将详细探讨如何创建一个带有时间选择功能的JavaScript...

    JavaScript编写的日期控件

    JavaScript编写的日期控件是网页开发中常用的一种交互元素,它允许用户在网页上选择或输入日期,提高用户体验。在Web应用中,日期控件通常用于表单验证、日历功能、时间安排等场景。本资源集合了一些被认为优秀的...

    JavaScript开发的日期控件

    这篇内容我们将深入探讨如何使用JavaScript来开发各种日期控件。 1. **基础日期处理** JavaScript中的`Date`对象是处理日期和时间的核心。你可以通过构造函数创建一个新的`Date`对象,或者使用现有的日期和时间。...

    Javascript密码输入控件

    JavaScript密码输入控件是网页开发中常见的一种交互元素,它用于收集用户的安全信息,如登录密码、PIN码等。在Web应用中,正确地实现密码输入控件对于提高用户体验和保障数据安全至关重要。本文将深入探讨JavaScript...

    javascript时间选择控件

    JavaScript时间选择控件是一种在网页上提供用户交互式时间选择功能的组件,通常用于收集用户的日期和时间输入,如在填写表单时选择生日。这种控件通过CSS(层叠样式表)和JavaScript来实现,使得用户界面既美观又...

    兼容多种IE的javascript日期控件

    "兼容多种IE的javascript日期控件"这个主题就是针对这个问题的一个解决方案。它是一个经过改造的calendar日期控件,旨在确保在不同版本的Internet Explorer(如IE6、IE8、IE9)中能够正常运行,尽管在Google浏览器中...

    JavaScript日期控件01(日期选择器)

    JavaScript日期控件是一种常见的前端开发元素,用于在网页上提供日期选择功能,用户可以方便地选取日期,常用于表单填写、事件安排等场景。在这个案例中,我们关注的是一个名为"JavaScript日期控件01(日期选择器)...

    JS控件,JAVASCRIPT控件,实用控件!

    JavaScript控件,通常简称为JS控件,是Web开发中常用的一种技术,它利用JavaScript语言来实现用户界面的交互和动态功能。JavaScript控件能够增强网页的用户体验,提供丰富的图形界面,以及各种用户输入和数据处理...

    javascript控件开发之可见控件 1

    在JavaScript控件开发中,"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁,比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类,这是创建自定义、高级控件的基础。...

    H5单个日期控件

    其中,"H5单个日期控件"是用于用户输入日期的交互组件,常见于在线预订、表单填写等场景,如酒店预定时间选择。这种控件的出现,使得用户在移动端或桌面端进行日期选择时更加直观和方便。 在HTML5中,`...

    HTML中带时间的日期控件

    总的来说,创建一个HTML中的带时间日期控件涉及HTML5的日期和时间输入类型、JavaScript库的运用以及可能的CSS样式调整,以实现一个统一的用户体验。开发者可以根据项目需求选择不同的库或编写自定义代码来满足特定的...

    javascript下调用ocx控件

    编写了ocx控件之后。regsvr32注册之后。在注册表里获得该对象...然后再JavaScript下就可以调用了。具体代码参考程序。 比如说ocx控件里面有connection()方法。通过ocx控件的id来引用。即ocx的id.connection()来引用

    js时间控件日期控件支持多语言

    JavaScript时间控件和日期控件是网页开发中常用的交互元素,尤其在表单提交、事件调度等场景下,用户友好的日期和时间选择器能够极大提升用户体验。本篇将详细介绍"js时间控件"和"js日期控件"的相关知识点,并结合...

    几个经典JavaScript控件

    在网页设计中,JavaScript控件是不可或缺的一部分,它们为用户提供了丰富的交互体验。以下是一些基于JavaScript的经典控件及其相关的知识点: 1. **表格操作**: - `javascript 表格操作.html` 和 `操控表格.txt` ...

    关于javascript的日期控件

    JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,它的强大功能之一是处理日期和时间。在Web开发中,经常需要创建交互式的日期选择器,即日期控件,以提供用户友好的界面来输入或选择日期。"关于JavaScript...

    javascript右键菜单控件,树控件,日期控件

    javascript右键菜单控件,树控件,日期控件,有详细说明并有实例演示 树控件 右键菜单 日期控件 树控件:实现树型数据结构的基本展现方式,提供树节点的查找和维护 右键菜单:提供独立的右键菜单组件,可...

    3个js日期时间控件(2个可选小时分钟)

    在JavaScript编程中,日期时间控件是网页交互中不可或缺的一部分,它们允许用户方便地选择或输入日期和时间信息。本文将详细介绍三个JavaScript日期时间控件,特别关注其中两个支持选择小时和分钟的控件。 首先,...

Global site tag (gtag.js) - Google Analytics