`

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 日期时间控件是一种在Web应用程序中用于用户交互式选择日期和时间的组件。它通常以日历或时钟的图形用户界面呈现,提供了一种直观且易于使用的交互方式,使得用户能够方便地输入或选择日期和时间值。在这...

    javascript实现的日期控件

    本篇将详细介绍如何使用JavaScript实现一个日期控件。 1. **HTML基础** 首先,我们需要在HTML页面中创建一个用于显示日期控件的容器。可以使用`&lt;input&gt;`标签,并设置`type="date"`,这样浏览器会自动提供一个基本...

    JavaScript日期时间选择控件

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

    js(javascript) 日期控件

    在网页中,JS可以极大地增强用户交互性,其中日期控件是常见的一种功能,用于帮助用户方便地选择日期,常用于日历插件、表单验证或时间相关的功能。下面将详细讨论JS日期控件的相关知识点。 1. **内置Date对象**:...

    Javascript日期时间选择控件

    JavaScript日期时间选择控件是网页开发中常用的一种交互元素,它允许用户在界面上方便地选取日期和时间,常用于表单输入、日程安排或事件预订等场景。本控件通常通过JavaScript库实现,例如jQuery UI、Bootstrap ...

    javascript时间控件

    压缩包子文件的文件名称"javascript日期"可能包含了实现JavaScript时间控件的具体代码或者资源文件。这些文件可能包括JavaScript源码(.js)、CSS样式表(.css)用于定义控件的外观,以及HTML模板(.html)用于展示...

    JavaScript开发的日期控件

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

    javascript 日期控件

    JavaScript 日期控件是网页开发中常用的一种交互元素,它允许用户在网页上方便地选择日期,常用于表单填写、日程安排等场景。在本案例中,我们有两个文件:`date.html` 和 `setday.js`。前者是HTML页面,后者是...

    javascript时间选择控件

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

    javascript日期控件源码

    在JavaScript中实现日期控件,开发者通常会使用内置的Date对象来处理日期和时间的操作。Date对象提供了各种方法,如getFullYear()获取年份,getMonth()获取月份(注意,月份是从0开始的),getDate()获取日期,以及...

    兼容多种IE的javascript日期控件

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

    javascript日期控件

    JavaScript日期控件是Web开发中常见的一种功能,用于在网页上提供用户友好的日期和时间选择界面。在JavaScript中,日期处理主要依赖于内置的`Date`对象,它提供了多种方法来创建、操作和格式化日期。这篇内容将深入...

    javascript日期控件二

    JavaScript日期控件是一种在网页上实现用户交互式选择日期或时间的工具,它极大地提高了用户的输入体验,尤其在处理表单或需要用户指定特定日期的场景下。在本主题中,我们将深入探讨“javascript日期控件二”,了解...

    两个javascript的滑动杆控件

    在JavaScript的世界里,滑动杆(Slider)控件是一种常见的用户界面元素,它允许用户通过拖动一个可移动的柄来选择一个值或范围。在本主题中,我们将深入探讨两个JavaScript滑动杆控件,它们可以提升网页的交互性和...

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

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

    javascript控件

    JavaScript控件是网页开发中常用的一种元素,它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言,常被嵌入HTML页面中,以实现动态内容的生成和用户交互。在这个主题中,我们将深入探讨...

    H5单个日期控件

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

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

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

    javascript日期控件五

    JavaScript日期控件是一种在网页上实现用户交互式选择日期或时间的工具,它极大地提高了用户在填写表单时的体验。在网页开发中,日期控件通常用于预订系统、日历应用、事件管理等场景。JavaScript,作为一种轻量级的...

    上下午显示时间控件

    "上下午显示时间控件"是一个针对此类需求的解决方案,它基于jQuery Mobile的日期插件进行扩展,专门设计用于显示和选择上午或下午的时间段。这个控件特别适合于网页时间输入、手机页面的时间选择,以及在手机网页...

Global site tag (gtag.js) - Google Analytics