JS/jQuery实现获取时间的方法及常用类完整示例
程序员文章站
2023-12-24 15:22:27
本文实例讲述了js jquery实现获取时间的方法及常用类。分享给大家供大家参考，具体如下：
效果图
源码解析
...
本文实例讲述了js jquery实现获取时间的方法及常用类。分享给大家供大家参考，具体如下：
效果图
源码解析
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js获取时间的方法及常用类</title>
<style type="text/css">
input{
color:red;
min-width: 250px;
}
/*设置placeholder的颜色*/
::-webkit-input-placeholder { /* webkit browsers */
color: #999;
}
:-moz-placeholder { /* mozilla firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* mozilla firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* internet explorer 10+ */
color: #999;
}
p{
width:100%;height:0px;border-top:1px orange dashed;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h2>js获取时间的方法及常用类</h2>
<h4>获取当前日期+时间</h4>
<input type="text" name="mydate">
<hr>
<h4>使用内置的date函数获取javascript时间</h4>
当前年：<input type="text" name="getfullyear">
<br>
当前月：<input type="text" name="getmonth"> <font color="green">0-11,0代表一月份</font>
<br>
当前日：<input type="text" name="getdate">
<br>
当前星期：<input type="text" name="getday"> <font color="green">0-6,0代表周日</font>
<br>
当前时间戳(精确毫秒)：<input type="text" name="gettime"> <font color="green">从1970.1.1开始的毫秒数</font>
<br>
当前小时：<input type="text" name="gethours"> <font color="green">0-23</font>
<br>
当前分钟：<input type="text" name="getminutes"> <font color="green">0-59</font>
<br>
当前秒数：<input type="text" name="getseconds"> <font color="green">0-59</font>
<br>
当前毫秒数：<input type="text" name="getmilliseconds"> <font color="green">0-999</font>
<br>
当前日期：<input type="text" name="nowdate">
<br>
当前时间：<input type="text" name="nowtime">
<br>
当前日期+时间：<input type="text" name="nowdateaddnowtime">
<br>
<hr>
<h4>日期时间脚本库方法列表</h4>
判断闰年：
<input type="radio" name="isleapyears" value="1">闰年
<input type="radio" name="isleapyears" value="0">非闰年
<p></p>
日期格式化：
<br/>
年份(yyyy/yyyy):<input type="text" name="formatyear1"> (yy/yy)：<input type="text" name="formatyear2">
<br/>
月份(mm):<input type="text" name="formatmonth1"> (m):<input type="text" name="formatmonth2">
<br/>
星期(w/w):<input type="text" name="formatweek">
<br/>
日(dd/dd):<input type="text" name="formatday1"> (d/d)：<input type="text" name="formatday2">
<br/>
时(hh/hh):<input type="text" name="formathour1"> (h/h)：<input type="text" name="formathour2">
<br/>
分(mm):<input type="text" name="formatminute1"> (m)：<input type="text" name="formatminute2">
<br/>
秒(ss/s):<input type="text" name="formatsecond1"> (ss/s)：<input type="text" name="formatsecond2">
<br/>
<p></p>
日期天数差:日期格式yyyy-mm-dd
<br>
起始日期:<input type="text" name="s_date" value="2018-08-01" />
截止日期:<input type="text" name="e_date" value="2018-08-06" />
日期差天数:<input type="text" name="diff_date">
<p></p>
日期计算:返回对象数据格式:"2018-08-06t06:29:49.000z",可以调用对象的方法，比如getfullyear();
<br>
当前日期:<input type="text" name="date_now"><br/>
2秒后的时间:<input type="text" name="second_now"><br/>
2小时后的时间:<input type="text" name="hour_now"><br/>
2天后的时间:<input type="text" name="day_now"><br/>
2周后的时间:<input type="text" name="week_now"><br/>
一季度后的时间:<input type="text" name="quarter_now"><br/>
一个月后的时间:<input type="text" name="month_now"><br/>
一年后的时间:<input type="text" name="year_now"><br/>
<p></p>
重载tostring方法:"一"=====>"星期一"
<br>
<input type="text" name="reset_string">
<p></p>
日期合法性校验(年月日):正确格式yyyy-mm-dd 或者 yyyy/mm/dd
<br>
输入日期：
<input type="text" name="checkdate" placeholder="yyyy-mm-dd或yyyy/mm/dd">
<input type="button" name="checkinputdate" value="检验" style="width:50px;">
<p></p>
日期合法性校验(年月日 时分秒):正确格式yyyy-mm-dd hh:ii:ss
<br>
输入日期：
<input type="text" name="checkdate1" placeholder="yyyy-mm-dd hh:ii:ss">
<input type="button" name="checkinputdate1" value="检验1" style="width:50px;">
<hr>
日期分割成数组:
<input type="text" name="splitdate"> <font color="green">取年份</font>
<script type="text/javascript">
$(function(){
//获取当前日期+时间
var mydate = new date();
var t = mydate.tolocalestring();
inputtovalue('text','mydate',t);
//============================================================
//使用内置的date函数获取javascript时间
var newdate = new date();
var getfullyear = newdate.getfullyear();//当前年
inputtovalue('text','getfullyear',getfullyear);
var getmonth = newdate.getmonth();//当前月
inputtovalue('text','getmonth',getmonth);
var getdate = newdate.getdate();//当前日
inputtovalue('text','getdate',getdate);
var getday = newdate.getday();//当前星期
inputtovalue('text','getday',getday);
var gettime = newdate.gettime();//当前时间戳(精确毫秒)
inputtovalue('text','gettime',gettime);
var gethours = newdate.gethours();//当前小时
inputtovalue('text','gethours',gethours);
var getminutes = newdate.getminutes();//当前分钟
inputtovalue('text','getminutes',getminutes);
var getseconds = newdate.getseconds();//当前秒数
inputtovalue('text','getseconds',getseconds);
var getmilliseconds = newdate.getmilliseconds();//当前毫秒数
inputtovalue('text','getmilliseconds',getmilliseconds);
var nowdate = newdate.tolocaledatestring();//当前日期
inputtovalue('text','nowdate',nowdate);
var nowtime = newdate.tolocaletimestring();//当前时间
inputtovalue('text','nowtime',nowtime);
var nowdateaddnowtime = newdate.tolocalestring();//当前时间
inputtovalue('text','nowdateaddnowtime',nowdateaddnowtime);
//============================================================
//检测是否为闰年，方法一
date.prototype.isleapyears = function(){
return (this.getyear() % 4 == 0) && (this.getyear() % 100 != 0 || this.getyear() % 400 == 0);
}
var dd1 = new date();
//检测是否为闰年，方法二
function checkyear(year){
return (year % 4 == 0 && (year % 100 !=0 || year % 400 !=0));
}
if(dd1.isleapyears()){//checkyear(2018)
$("input[type='radio'][name='isleapyears'][value='1']").prop("checked",true);
}else{
$("input[type='radio'][name='isleapyears'][value='0']").prop("checked",true);
}
//日期格式化
date.prototype.format = function(formatstr){
var str = formatstr;
var week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|yyyy/,this.getfullyear());
str=str.replace(/yy|yy/,(this.getyear() % 100)>9?(this.getyear() % 100).tostring():'0' + (this.getyear() % 100));
str=str.replace(/mm/,this.getmonth()>9?this.getmonth().tostring():'0' + this.getmonth());
str=str.replace(/m/g,this.getmonth());
str=str.replace(/w|w/g,week[this.getday()]);
str=str.replace(/dd|dd/,this.getdate()>9?this.getdate().tostring():'0' + this.getdate());
str=str.replace(/d|d/g,this.getdate());
str=str.replace(/hh|hh/,this.gethours()>9?this.gethours().tostring():'0' + this.gethours());
str=str.replace(/h|h/g,this.gethours());
str=str.replace(/mm/,this.getminutes()>9?this.getminutes().tostring():'0' + this.getminutes());
str=str.replace(/m/g,this.getminutes());
str=str.replace(/ss|ss/,this.getseconds()>9?this.getseconds().tostring():'0' + this.getseconds());
str=str.replace(/s|s/g,this.getseconds());
return str;
}
var dd2 = new date();
inputtovalue('text','formatyear1',dd2.format('yyyy'));//yyyy/yyyy
inputtovalue('text','formatyear2',dd2.format('yy'));//yy/yy
inputtovalue('text','formatmonth1',dd2.format('mm'));//mm
inputtovalue('text','formatmonth2',dd2.format('m'));//m
inputtovalue('text','formatweek',dd2.format('w'));//w/w
inputtovalue('text','formatday1',dd2.format('dd'));//dd/dd
inputtovalue('text','formatday2',dd2.format('d'));//dd/d
inputtovalue('text','formathour1',dd2.format('hh'));//hh/hh
inputtovalue('text','formathour2',dd2.format('h'));//h/h
inputtovalue('text','formatminute1',dd2.format('mm'));//mm
inputtovalue('text','formatminute2',dd2.format('m'));//m
inputtovalue('text','formatsecond1',dd2.format('ss'));//ss/ss
inputtovalue('text','formatsecond2',dd2.format('s'));//s/s
//日期天数差:日期格式yyyy-mm-dd
var s_date = $("input[type='text'][name='s_date']").val();
var e_date = $("input[type='text'][name='e_date']").val();
function daysbetween(dateone,datetwo)
{
var onemonth = dateone.substring(5,dateone.lastindexof ('-'));
var oneday = dateone.substring(dateone.length,dateone.lastindexof ('-')+1);
var oneyear = dateone.substring(0,dateone.indexof ('-'));
var twomonth = datetwo.substring(5,datetwo.lastindexof ('-'));
var twoday = datetwo.substring(datetwo.length,datetwo.lastindexof ('-')+1);
var twoyear = datetwo.substring(0,datetwo.indexof ('-'));
var cha=((date.parse(onemonth+'/'+oneday+'/'+oneyear)- date.parse(twomonth+'/'+twoday+'/'+twoyear))/86400000);
return math.abs(cha);
}
inputtovalue('text','diff_date',daysbetween(s_date,e_date));
//日期计算，返回一段日期时间后的对象
date.prototype.dateadd = function(strinterval, number) {
var dttmp = this;
switch (strinterval) {
case 's' :return new date(date.parse(dttmp) + (1000 * number));
case 'n' :return new date(date.parse(dttmp) + (60000 * number));
case 'h' :return new date(date.parse(dttmp) + (3600000 * number));
case 'd' :return new date(date.parse(dttmp) + (86400000 * number));
case 'w' :return new date(date.parse(dttmp) + ((86400000 * 7) * number));
case 'q' :return new date(dttmp.getfullyear(), (dttmp.getmonth()) + number*3, dttmp.getdate(), dttmp.gethours(), dttmp.getminutes(), dttmp.getseconds());//一个季度
case 'm' :return new date(dttmp.getfullyear(), (dttmp.getmonth()) + number, dttmp.getdate(), dttmp.gethours(), dttmp.getminutes(), dttmp.getseconds());//一个月
case 'y' :return new date((dttmp.getfullyear() + number), dttmp.getmonth(), dttmp.getdate(), dttmp.gethours(), dttmp.getminutes(), dttmp.getseconds());
}
}
var dd3 = new date();
inputtovalue('text','date_now',dd3.dateadd('s',0));
inputtovalue('text','second_now',dd3.dateadd('s',2));//2秒后
inputtovalue('text','hour_now',dd3.dateadd('h',2));//2小时后
inputtovalue('text','day_now',dd3.dateadd('d',2));//2天后
inputtovalue('text','week_now',dd3.dateadd('w',2));//2周后
inputtovalue('text','quarter_now',dd3.dateadd('q',1));//一季度后
inputtovalue('text','month_now',dd3.dateadd('m',1));//一个月后
inputtovalue('text','year_now',dd3.dateadd('y',1));//一个年后
//重载系统的tostring方法
date.prototype.tostring = function(showweek)
{
var mydate= this;
var str = mydate.tolocaledatestring();//保留年/月/日
if (showweek)
{
var week = ['日','一','二','三','四','五','六'];
str += ' 星期' + week[mydate.getday()];
}
return str;
}
var dd4 = new date();
inputtovalue('text','reset_string',dd4.tostring("一"));
//日期合法性校验，格式:yyyy-mm-dd或者yyyy/mm/dd,特殊情况如yyyy-mm/dd也能通过，后期处理
function checkandgetvalue(datestr)
{
var sdate=datestr.replace(/(^\s+|\s+$)/g,''); //去两边空格;
if(sdate=='')
return false;
//正则表达式
patter = /^[\d]{4,4}[-/]{1}[\d]{1,2}[-/]{1}[\d]{1,2}$/;//不能加双引号
if(patter.test(sdate)){
var t = new date(sdate.replace(/\-/g,'/'));
var ar = sdate.split(/[-/:]/);
if(ar[0] != t.getfullyear() || ar[1] != t.getmonth()+1 || ar[2] != t.getdate()){
return false;
}else{
return ar.join("-");
}
}else{
return false;
}
}
$("input[type='button'][name='checkinputdate']").click(function(){
$_a = $("input[type='text'][name='checkdate']");
var getcheckdatevalue = $_a.val();
if(checkandgetvalue(getcheckdatevalue)){
alert("校验通过：" + checkandgetvalue(getcheckdatevalue));
}else{
$_a.val("");//不通过，清空输入的值
alert("校验不通过");
}
});
//日期合法性校验 yyyy-mm-dd hh:ii:ss
function checkdatetime(datestr)
{
var reg = /^(\d+)-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = datestr.match(reg);
if(r==null) return false;
r[2] = r[2]-1;
var d = new date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getfullyear() != r[1]) return false;
if(d.getmonth() != r[2]) return false;
if(d.getdate() != r[3]) return false;
if(d.gethours() != r[4]) return false;
if(d.getminutes() != r[5]) return false;
if(d.getseconds() != r[6]) return false;
return true;
}
$("input[type='button'][name='checkinputdate1']").click(function(){
$_a = $("input[type='text'][name='checkdate1']");
var getcheckdatevalue1 = $_a.val();
if(checkdatetime(getcheckdatevalue1)){
alert("校验通过");
}else{
$_a.val("");//不通过，清空输入的值
alert("校验不通过");
}
});
//把日期分割成数组
date.prototype.toarray = function()
{
var mydate = this;
var myarray = array();
myarray[0] = mydate.getfullyear();
myarray[1] = mydate.getmonth() + 1;
myarray[2] = mydate.getdate();
myarray[3] = mydate.gethours();
myarray[4] = mydate.getminutes();
myarray[5] = mydate.getseconds();
return myarray;
}
var dd5 = new date();
$("input[name='splitdate']").val(dd5.toarray()[0]);
//通用函数
function inputtovalue(type,name,value){
$("input[type="+ type +"][name="+ name +"]").val(value);
}
})
</script>
</body>
</html>
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
ps：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：
在线日期/天数计算器：
在线日期计算器/相差天数计算器：
在线日期天数差计算器：
在线天数计算器：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript时间与日期操作技巧总结》、《javascript+html5特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。