JavaScript实现时间范围效果
更新时间：2021年05月03日 07:53:49 作者：七海桑城
这篇文章主要为大家详细介绍了JavaScript实现时间范围效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现时间范围效果的具体代码，供大家参考，具体内容如下
当前时间往前的时间范围（六个月之前）
效果图
js文件代码片
/*查询日期区间（当前时间往前） Add By Vivian 2020/12/04 */
//rangeVal:两个日期的间隔符 num：隔多少 timeType：相隔时间类型
function funGetRangeDateByLess(rangeVal,num,timeType){
var returnVal="";
var otherVal="";
var otherTime="";
var curTime = new Date();
var curTimeVal= curTime.getFullYear() + '-' + PrefixZero((curTime.getMonth() + 1), 2) + '-' + PrefixZero(curTime.getDate(), 2);
switch (timeType) {
case 1://分
var addMinutes = curTime.setMinutes(curTime.getMinutes() - num);
otherTime=new Date(addMinutes);
break;
case 2://时
var addMinutes = curTime.setHours(curTime.getHours() - num);
otherTime=new Date(addMinutes);
break;
case 3://天
var addDate = curTime.setDate(curTime.getDate() - num);
otherTime=new Date(addDate);
break;
case 4://月
var addMonth = curTime.setMonth(curTime.getMonth() - num);
otherTime=new Date(addMonth);
break;
case 5://年
var addYear = curTime.setFullYear(curTime.getFullYear() - num);
otherTime=new Date(addYear);
break;
default:
break;
}
otherVal= otherTime.getFullYear() + '-' + PrefixZero((otherTime.getMonth() + 1), 2) + '-' + PrefixZero(otherTime.getDate(), 2);
return returnVal=otherVal+rangeVal+curTimeVal;
}
/*自动补零 Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
使用代码片
var fillhelptime=funGetRangeDateByLess(" , ",6,4);
laydate.render({
elem: "#fillhelptime",
range: ",",
type: 'date',
value:fillhelptime,//默认值
});
某个日期的时间范围（前后多少天）
效果图
js文件代码片
/*查询日期区间（某个日期前后多少天） Add By Vivian 2021/04/06 */
//rangeVal:两个日期的间隔符 date：某个日期 beforeDays：前N天 afterDays：后N天
function funGetRangeDateByBeforeAndAfter(rangeVal,date,beforeDays,afterDays){
var dateVaule1 = new Date(date);//转换成时间格式
var dateVaule2 = new Date(date);//转换成时间格式
var startDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeDays));//前N天
var endDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterDays));//后N天
var date1= startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
var date2= endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
var returnVal=date1+rangeVal+date2;
return returnVal;
}
/*自动补零 Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
某个时间点的时间范围（前后多少天）
效果图
js文件代码片
/*查询日期区间（某个时间点前后多少时间） Add By Vivian 2021/04/06 */
//rangeVal:两个日期的间隔符 timeType：相隔时间类型 date：某个日期 beforeDays：前N天 afterDays：后N天
function funGetRangeDateByBeforeAndAfter(rangeVal,timeType,date,beforeNum,afterNum){
var dateVaule1 = new Date(date);//转换成时间格式
var dateVaule2 = new Date(date);//转换成时间格式
var startDate = "";
var endDate = "";
switch (timeType) {
case 1://分
startDate = new Date(dateVaule1.setMinutes(dateVaule1.getMinutes() - beforeNum));//前N分钟
endDate = new Date(dateVaule2.setMinutes(dateVaule2.getMinutes() + afterNum));//后N分钟
break;
case 2://时
startDate = new Date(dateVaule1.setHours(dateVaule1.getHours() - beforeNum));//前N小时
endDate = new Date(dateVaule2.setHours(dateVaule2.getHours() + afterNum));//后N小时
break;
case 3://天
startDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeNum));//前N天
endDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterNum));//后N天
break;
case 4://月
startDate = new Date(dateVaule1.setMonth(dateVaule1.getMonth() - beforeNum));//前N月
endDate = new Date(dateVaule2.setMonth(dateVaule2.getMonth() + afterNum));//后N月
break;
case 5://年
startDate = new Date(dateVaule1.setFullYear(dateVaule1.getFullYear() - beforeNum));//前N年
endDate = new Date(dateVaule2.setFullYear(dateVaule2.getFullYear() + afterNum));//后N年
var addYear = curTime.setFullYear(curTime.getFullYear() - num);
break;
default:
break;
}
var returnVal1= startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
var returnVal2= endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
var returnVal=returnVal1+rangeVal+returnVal2;
return returnVal;
}
/*自动补零 Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript中cookie对象用法,实例分析了javascript针对cookie对象的写入、读取及删除等操作的使用方法,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序实现滑动侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS实现斐波那契数列的五种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。2021-05-05
这篇文章主要为大家详细介绍了JavaScript实现字符雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JavaScript回调函数callback用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
取一个DOM元素的兄弟节点,仿jQuery的siblings方法,用原生JS代码完成2011-08-08
这篇文章主要介绍了Js跳出两级循环方法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
本文主要介绍了js实现带农历和八字等信息的日历特效,小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
在做交友中心的页面的时候，有一个javascript函数，它的第二个参数是动态的。2008-12-12
最新评论