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 日期时间控件是一种在Web应用程序中用于用户交互式选择日期和时间的组件。它通常以日历或时钟的图形用户界面呈现,提供了一种直观且易于使用的交互方式,使得用户能够方便地输入或选择日期和时间值。在这...
本篇将详细介绍如何使用JavaScript实现一个日期控件。 1. **HTML基础** 首先,我们需要在HTML页面中创建一个用于显示日期控件的容器。可以使用`<input>`标签,并设置`type="date"`,这样浏览器会自动提供一个基本...
JavaScript日期时间选择控件是一种常见的前端开发工具,用于在网页上提供用户友好的日期和时间输入界面。在网页设计中,这种控件可以极大提升用户体验,因为它允许用户通过直观的日历视图和时间选择器来设定日期和...
在网页中,JS可以极大地增强用户交互性,其中日期控件是常见的一种功能,用于帮助用户方便地选择日期,常用于日历插件、表单验证或时间相关的功能。下面将详细讨论JS日期控件的相关知识点。 1. **内置Date对象**:...
JavaScript日期时间选择控件是网页开发中常用的一种交互元素,它允许用户在界面上方便地选取日期和时间,常用于表单输入、日程安排或事件预订等场景。本控件通常通过JavaScript库实现,例如jQuery UI、Bootstrap ...
压缩包子文件的文件名称"javascript日期"可能包含了实现JavaScript时间控件的具体代码或者资源文件。这些文件可能包括JavaScript源码(.js)、CSS样式表(.css)用于定义控件的外观,以及HTML模板(.html)用于展示...
这篇内容我们将深入探讨如何使用JavaScript来开发各种日期控件。 1. **基础日期处理** JavaScript中的`Date`对象是处理日期和时间的核心。你可以通过构造函数创建一个新的`Date`对象,或者使用现有的日期和时间。...
JavaScript 日期控件是网页开发中常用的一种交互元素,它允许用户在网页上方便地选择日期,常用于表单填写、日程安排等场景。在本案例中,我们有两个文件:`date.html` 和 `setday.js`。前者是HTML页面,后者是...
JavaScript时间选择控件是一种在网页上提供用户交互式时间选择功能的组件,通常用于收集用户的日期和时间输入,如在填写表单时选择生日。这种控件通过CSS(层叠样式表)和JavaScript来实现,使得用户界面既美观又...
在JavaScript中实现日期控件,开发者通常会使用内置的Date对象来处理日期和时间的操作。Date对象提供了各种方法,如getFullYear()获取年份,getMonth()获取月份(注意,月份是从0开始的),getDate()获取日期,以及...
"兼容多种IE的javascript日期控件"这个主题就是针对这个问题的一个解决方案。它是一个经过改造的calendar日期控件,旨在确保在不同版本的Internet Explorer(如IE6、IE8、IE9)中能够正常运行,尽管在Google浏览器中...
JavaScript日期控件是Web开发中常见的一种功能,用于在网页上提供用户友好的日期和时间选择界面。在JavaScript中,日期处理主要依赖于内置的`Date`对象,它提供了多种方法来创建、操作和格式化日期。这篇内容将深入...
JavaScript日期控件是一种在网页上实现用户交互式选择日期或时间的工具,它极大地提高了用户的输入体验,尤其在处理表单或需要用户指定特定日期的场景下。在本主题中,我们将深入探讨“javascript日期控件二”,了解...
在JavaScript的世界里,滑动杆(Slider)控件是一种常见的用户界面元素,它允许用户通过拖动一个可移动的柄来选择一个值或范围。在本主题中,我们将深入探讨两个JavaScript滑动杆控件,它们可以提升网页的交互性和...
JavaScript控件,通常简称为JS控件,是Web开发中常用的一种技术,它利用JavaScript语言来实现用户界面的交互和动态功能。JavaScript控件能够增强网页的用户体验,提供丰富的图形界面,以及各种用户输入和数据处理...
JavaScript控件是网页开发中常用的一种元素,它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言,常被嵌入HTML页面中,以实现动态内容的生成和用户交互。在这个主题中,我们将深入探讨...
其中,"H5单个日期控件"是用于用户输入日期的交互组件,常见于在线预订、表单填写等场景,如酒店预定时间选择。这种控件的出现,使得用户在移动端或桌面端进行日期选择时更加直观和方便。 在HTML5中,`...
JavaScript时间控件和日期控件是网页开发中常用的交互元素,尤其在表单提交、事件调度等场景下,用户友好的日期和时间选择器能够极大提升用户体验。本篇将详细介绍"js时间控件"和"js日期控件"的相关知识点,并结合...
JavaScript日期控件是一种在网页上实现用户交互式选择日期或时间的工具,它极大地提高了用户在填写表单时的体验。在网页开发中,日期控件通常用于预订系统、日历应用、事件管理等场景。JavaScript,作为一种轻量级的...
"上下午显示时间控件"是一个针对此类需求的解决方案,它基于jQuery Mobile的日期插件进行扩展,专门设计用于显示和选择上午或下午的时间段。这个控件特别适合于网页时间输入、手机页面的时间选择,以及在手机网页...