广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现时间范围效果
  • 802
分享到

JavaScript实现时间范围效果

2024-04-02 19:04:59 802人浏览 薄情痞子
摘要

本文实例为大家分享了javascript实现时间范围效果的具体代码,供大家参考,具体内容如下 当前时间往前的时间范围(六个月之前) 效果图 js文件代码片 //rangeVa

本文实例为大家分享了javascript实现时间范围效果的具体代码,供大家参考,具体内容如下

当前时间往前的时间范围(六个月之前)

效果图

js文件代码片



//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;
}


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文件代码片



//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;
}


function PrefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

某个时间点的时间范围(前后多少天)

效果图

js文件代码片



//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;
}


function PrefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现时间范围效果

本文链接: https://www.lsjlt.com/news/125096.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现时间范围效果
    本文实例为大家分享了JavaScript实现时间范围效果的具体代码,供大家参考,具体内容如下 当前时间往前的时间范围(六个月之前) 效果图 js文件代码片 //rangeVa...
    99+
    2022-11-12
  • Vue实现开始时间和结束时间范围查询
    本文实例为大家分享了Vue实现开始时间和结束时间范围的查询方法,供大家参考,具体内容如下 效果图: 代码实现: OrderList.Vue <a-col :xl="6" ...
    99+
    2022-11-12
  • Android实现动态定值范围效果的控件
    先来看看效果: 一、添加依赖库的步骤 1.项目的gradle文件内的做以下改动 allprojects { repositories { ... mave...
    99+
    2022-06-06
    动态 Android
  • JavaScript如何生成指定范围的时间列表
    这篇文章将为大家详细讲解有关JavaScript如何生成指定范围的时间列表,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备 date对象有很多的方法,用到了以下: &n...
    99+
    2022-10-19
  • javascript怎么实现暂停时间的效果
    JavaScript 是一门广受欢迎的编程语言,常常用于构建动态网页和交互式应用程序。在 Web 开发中,控制时间是重要的一部分,因为时间会影响到页面的元素、动画以及用户交互等方面。在 JavaScript 中,我们有多种方式来控制时间,包...
    99+
    2023-05-14
  • Vue实现时间轴效果
    本文实例为大家分享了Vue实现时间轴效果的具体代码,供大家参考,具体内容如下 时间轴上的时间点数和描述文本均可自定义设置 效果图如下: ①创建时间轴组件Timeline.vue: ...
    99+
    2022-11-13
  • ElementUI日期选择器时间选择范围限制的实现
    目录单个输入框的情景1: 设置选择今天以及今天之后的日期情景2: 设置选择今天以及今天以前的日期情景3: 设置选择今天之后的日期(不能选择当天时间)两个输入框情景1: 限制结束日期不...
    99+
    2022-11-13
  • vue+swiper实现时间轴效果
    本文实例为大家分享了vue+swiper实现时间轴效果的具体代码,供大家参考,具体内容如下 效果: 首先引入,有淘宝镜像的用 cnpm install swiper --save ...
    99+
    2022-11-12
  • TP6 时间范围查询实例【每周注册用户】
    前言:本文原写,未知网络是否有重合等情况,如有侵权等其他问题请告知,秒删 当想做个统计图显示一周内每天注册了多少用户时可以实现查询的方法有很多,本文采用简洁代码, ...
    99+
    2023-09-12
    php 开发语言
  • javascript+jQuery如何实现360开机时间显示效果
    小编给大家分享一下javascript+jQuery如何实现360开机时间显示效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!实现效果:实现原理:  给关闭按钮绑定点击事件,点击以后触发...
    99+
    2022-10-19
  • shell下获取上一个月,星期时间和时间戳的范围实例
    如下所示: #!/bin/bash #一月前 historyTime=$(date "+%Y-%mGqbmK-%d %H" -d '1 month ago') echo ${historyTime} historyT...
    99+
    2022-06-04
    shell 时间戳
  • vue实现物流时间轴效果
    本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下 son组件(物流时间轴组件) <template> <div class...
    99+
    2022-11-12
  • Android如何实现时间线效果
    目录1、背景2、分析2.1功能分析2.2细节分析2.3方案设想3、编码3.1第一版3.2第二版4、结语1、背景 这天下班前,老板找到小庄:“有个页面要优化,小需求,你跟进一下。” 小...
    99+
    2022-11-12
  • JavaScript实现动态时钟效果
    目录演示配置设计旋转功能设计更新每日演示 时间是非常有限的,过去时光永远不会再回来。要在有限的时间里面,去面对生活的困难和生存的竞争,是需要强化自我的。而这些强化学习是最需时间的。而...
    99+
    2022-11-13
  • Mysql获取指定时间范围数据的各种实例
    目录前言1、今天(TO_DAYS())2、今天昨天(TO_DAYS())3.近7天(DATE_SUB())4.本月(DATE_FORMAT())5.上一月(PERIOD_DIFF()...
    99+
    2023-05-19
    mysql获取指定时间范围数据 mysql获取时间函数 mysql获取指定时间范围数据的方法
  • SQL Server中查询结果超出了查询时间范围解决方法
    废话少说,直接上SQL代码(有兴趣的测试验证一下),下面这个查询语句为什么将2008-11-27的记录查询出来了呢?这个是同事遇到的一个问题,个人设计了一个例子。 USE AdventureWorks2...
    99+
    2022-10-18
  • mysql中时间范围查询,以及为什么小于等于不生效
    首先,我们要看一下我们数据库中的事件类型是什么格式:是date,还是datetime 为什么小于等于不生效 如果数据库中的格式是:datetime,带时分秒:条件查询是: yyyy-mmm-dd, 原因:这里查询小于等于就是:2023-05...
    99+
    2023-10-08
    mysql java sql
  • Flutter通过Container实现时间轴效果
    目录时间轴是前端UI经常用到的效果,先看下效果图:实现 一、借助 Container 中 decoration 属性,设置左侧的 border,可以实现时间轴高度随着 item 变化...
    99+
    2022-11-12
  • Android如何实现时间线效果(下)
    目录1、前言2、分析2.1提出功能2.2需求分析2.3方案设想3、编码3.1第三版3.2第四版3.3最终版1、前言 上回Android如何实现时间线效果 说到,小庄吭哧吭哧的撸完了需...
    99+
    2022-11-12
  • JavaScript canvas实现七彩时钟效果
    利用canvas写七彩时钟! 1、题目 (1)、拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现) 2、思路 (1)、首先我们要充分了解到ca...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作