我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript实现时间范围效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript实现时间范围效果

本文实例为大家分享了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);
}

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript实现时间范围效果

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

下载Word文档

猜你喜欢

Android实现动态定值范围效果的控件

先来看看效果:一、添加依赖库的步骤 1.项目的gradle文件内的做以下改动allprojects {repositories {...maven { url "https://jitpack.io" }}} 2.添加最新版本的依赖库,最新
2022-06-06

javascript怎么实现暂停时间的效果

JavaScript 停止时间JavaScript 是一门广受欢迎的编程语言,常常用于构建动态网页和交互式应用程序。在 Web 开发中,控制时间是重要的一部分,因为时间会影响到页面的元素、动画以及用户交互等方面。在 JavaScript 中,我们有多种方式来控制时间,包括定时器、延时器以及动画框架等。但有时候,我们需要暂停时间,以便进行一些特定的操作,比如等待异步任务完成或者等
2023-05-14

MySQL时间范围比较:实例与解析

MySQL是一种常用的关系型数据库管理系统,用于存储和管理数据。在实际应用中,经常会涉及到对时间范围进行比较和筛选的操作。本文将从实例和解析两个方面,详细介绍如何在MySQL中进行时间范围比较,并提供具体的代码示例。实例假设有一张名为o
MySQL时间范围比较:实例与解析
2024-03-01

MySQL时间范围查询实践与技巧

MySQL时间范围查询实践与技巧在实际开发中,时间范围查询是数据库操作中常见的需求之一。MySQL作为流行的开源关系型数据库管理系统,在处理时间范围查询时提供了多种灵活实用的功能和技巧。本文将介绍MySQL时间范围查询的实践方法和相关技巧
MySQL时间范围查询实践与技巧
2024-03-01

在MongoDB中实现时间范围查询的代码详解

目录引言一、准备数据二、构建时间范围查询示例1:查询指定日期内的所有事件示例2:查询今天发生的所有事件三、使用聚合管道进行复杂查询四、注意事项五、总结引言MongoDB作为一个高性能、开源、无模式的文档型数据库,广泛应用于各种需要灵活数据
在MongoDB中实现时间范围查询的代码详解
2024-08-22

javascript效果实现

随着互联网的不断发展和普及,网站越来越注重用户体验,其中JavaScript成为了网站开发中不可或缺的一部分。它能够为网站带来各种炫酷的效果和强大的交互功能,大大提升了网站的用户体验和互动性。下面我们就来探讨一些常见的JavaScript效果。一、轮播图效果轮播图是网站中非常常见的一种效果,它能够吸引用户的眼球,同时也能够为网站展示产品、资讯等内容。在JavaScript中通过
2023-05-17

JavaScript如何实现动态时钟效果

本篇内容主要讲解“JavaScript如何实现动态时钟效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript如何实现动态时钟效果”吧!配置设计var config={ la
2023-07-02

编程热搜

目录