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：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：
在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器：
http://tools.jb51.net/jisuanqi/datecalc
在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
在线天数计算器：
http://tools.jb51.net/jisuanqi/datejsq
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript+HTML5特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
jQuery扩展方法实现Form表单与Json互相转换的实例代码
JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\]
-
浅谈JS和jQuery的区别
一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,
-
JS与jQuery判断文本框还剩多少字符可以输入的方法
本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法.分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function checkMaxInput(){ if($("summary").value.length>maxLen){ $("summary").value=$("summ
-
jquery.pagination.js分页使用教程
简单介绍一下在动态网页里面的jquery.pagination.js分页的使用,具体内容如下 添加下载的js和样式,主要是先添加jquery.js 再添加jquery.pagination.js,我这是下载好的,放在本地 <link rel="stylesheet" href="<%=path%>css/pagination.css" type="text/css"> <script type="text/
-
js jquery 获取某一元素到浏览器顶端的距离实现方法
如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod
-
jQuery序列化form表单数据为JSON对象的实现方法
jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs
-
用jQuery将JavaScript对象转换为querystring查询字符串的方法
在get方式的参数传递中,常常需要将JavaScript对象,转换成查询字符串,比如: { method: 'get', state: '200' } 会转换成 ?method=get&state=200 方法1:用JavaScript serialize = function(obj) { var str = []; for (var p in obj) if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=&q
-
JS/jQuery实现获取时间的方法及常用类完整示例
本文实例讲述了JS jQuery实现获取时间的方法及常用类.分享给大家供大家参考,具体如下: 效果图 源码解析 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS获取时间的方法及常用类</title> <style type="text/css"> input{ color:red; min-width: 25
-
js(jQuery)获取时间的方法及常用时间类搜集
复制代码 代码如下: $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); /*alert(t);*/ $("#time").text(t); $("#time").load("Untitled-1.html"); }); <P id="time">afwef</P> 获取JavaScript 的时间使用内置的Date
-
使用jquery如何获取时间
这篇文章主要介绍了jquery获取当前时间,月份,年份等,涉及针对日期时间的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下. js(jQuery)获取时间的方法及常用时间类 $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); /*alert(t);*/ $("#time").text(t); $("#time").load("Untitled-1.html&quo
-
JS获取时间的方法
本文实例讲述了JS获取时间的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function Case(i) { if (i
-
js动态获取时间的方法分析
本文实例讲述了js动态获取时间的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> function show_cur_times(){ //获取当前日期 var date_time = new Date(); //定义星期 var week; //switch判断 switch (date_time.getDay()){ case 1: week="星期一"; break; case 2: week=
-
js设置和获取自定义属性的方法
Js操作自定义属性的方法: var testEle = document.getElementByIdx_x("test") testEle.setAttribute("test","aaa"); // 设置 testEle.getAttribute("test"): //获取 testEle.attributes["test"].nodeValue; // 获取 Jquery操作自定义属性的方法: $(&
-
js+ajax实现获取文件大小的方法
本文实例讲述了js+ajax实现获取文件大小的方法.分享给大家供大家参考,具体如下: 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件大小)有些问题,具体大家试下就知道了,在此整理了一下ajax的获取文件大小的方法,比较好用,再调试过程中,出现了c:/fakepath/ 的错误,也将解决方案罗列在下面,以供大家参考 废话少说,代码如下 JS如下: <script language="Jscript"
-
jquery实时获取时间的简单实例
实例如下: $(document).ready(function(){ function time(){ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); $('div').eq(0).html(h); $('div').eq(1).html(m); $('div').eq(2).html(s); for(var i=0;i<$('div').length;i
-
jQuery异步获取json数据方法汇总
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: 复制代码 代码如下: { "one" : "Hello", "two" : "World" } ■ 通过$.getJSON方法获取json数据 复制代码 代码如下: <script src="Scr
-
jquery中获取id值方法小结
复制代码 代码如下: <div id="product_shift_out_{m}"> </div><script language = "JavaScript" type="text/javascript">$(document).ready(function(){name = $('div').eq(0).attr('id');alert(name)});</script> eq(0)是取第一个