/**
* 获取时间格式为:1970-01-01 00:00
* @param {参数} params
* 属性 类型 默认值 必填 说明
* date Date new Date() 否 Date对象
* ms int 0 否 获取距当前ms毫秒时间
* dateFormat String / 否 日期分隔符
* timeFormat string : 否 时间分隔符
*
*/
const formatTime = (params) => {
const ms = (!params.ms ? 0 : params.ms);
const date = !params.data ? new Date(new Date().getTime() + ms) : new Date(params.date.getTime() + ms);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const dateFormat = (!params.dateFormat) ? "/" : params.dateFormat;
const timeFormat = (!params.timeFormat) ? ":" : params.timeFormat;
return [year, month, day].map(formatNumber).join(dateFormat) + ' ' + [hour, minute, second].map(formatNumber).join(timeFormat);
} const formatNumber = n => {
n = n.toString();
return n[1] ? n : '0' + n;
}

测试案例:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" name="viewport" content="width=device-width;initscale=1.0" />
<title>js获取当前/未来时间</title>
</head> <body>
<h1>5分钟前时间:<span id="beforeFiveMinuteTime"></span></h1>
<h1>当前时间:<span id="nowTime"></span></h1>
<h1>5分钟后时间:<span id="afterFiveMinuteTime"></span></h1> <script type="text/javascript">
/**
* 获取时间格式为:1970-01-01 00:00
* @param {参数} params
* 属性 类型 默认值 必填 说明
* date Date new Date() 否 Date对象
* ms int 0 否 获取距当前ms毫秒时间
* dateFormat String / 否 日期分隔符
* timeFormat string : 否 时间分隔符
*
*/
const formatTime = (params) => {
const ms = (!params.ms ? 0 : params.ms);
const date = !params.data ? new Date(new Date().getTime() + ms) : new Date(params.date.getTime() + ms);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const dateFormat = (!params.dateFormat) ? "/" : params.dateFormat;
const timeFormat = (!params.timeFormat) ? ":" : params.timeFormat;
return [year, month, day].map(formatNumber).join(dateFormat) + ' ' + [hour, minute, second].map(formatNumber).join(timeFormat);
} const formatNumber = n => {
n = n.toString();
return n[1] ? n : '0' + n;
} window.onload = () => {
document.getElementById("beforeFiveMinuteTime").innerHTML = formatTime({
date: new Date(),
ms: -5 * 60 * 1000,
dateFormat: "-"
}); document.getElementById("nowTime").innerHTML = formatTime({
date: new Date(),
timeFormat: "/"
});
document.getElementById("afterFiveMinuteTime").innerHTML = formatTime({
date: new Date(),
ms: 5 * 60 * 1000
});
}
</script> </body> </html>

结果:

JS获取时间(当前-过去-未来)的更多相关文章

  1. js获取时间相关函数

    js获取时间函数 var myDate = new Date; var year = myDate.getFullYear();//获取当前年 var yue = myDate.getMonth()+ ...

  2. js 获取时间 new Date()详细介绍

    javaScript系列:js中获取时间new Date()详细介绍 (2012-03-31 09:54:25) 转载▼ 标签: js时间 new date() 字符类型 转换 分类: study-j ...

  3. js 获取时间对象代码

    /** * 获取时间对象 */function getDateObj(addDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+addDa ...

  4. js获取时间加多山天和时间戳转换成日期

    function huoqu(){    var data = $("#data").val();//获取的时间    var day = $('#day').val();//往后 ...

  5. js获取时间,循环执行任务,延迟执行任务

    一.获取时间 核心方法创建一个时间对象:new Date() 时间对象相关操作 时间对象.函数名 函数名 功能 getYear() 获取四位数的年份 getMonth() 获取2位数的月数, 这个是从 ...

  6. js获取时间及转化

    有关Javascript的本地时间获取,下面我直接用代码来进行举例吧 let time = new Date(); let month = time.getMonth()+1; //获取的月份0~11 ...

  7. js 获取时间比较全,留备用(zhuan)

    var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();    //获取完整的年份(4位 ...

  8. 【巩固】JS获取时间的一些基础知识

    就是一个new Date()对象,要注意的有以下几点; 直接给oDate对象设置年月日时分秒的时候要分成两步,oDate.setFullYear()接受三个参数分别是年月日,注意月份是从0开始计一月的 ...

  9. js获取时间天数

    date2必须大于date1 function getDays(date1,date2){ /*获取之间的天数*/ /*date1,date2都是date格式*/ var getd=(date2.ge ...

随机推荐

  1. SUM and COUNT -- SQLZOO

    SUM and COUNT 注意:where语句中对表示条件的需要用单引号, 下面的译文使用的是有道翻译如有不正确,请直接投诉有道 01.Show the total population of th ...

  2. SparkSQL和hive on Spark

    SparkSQL简介 SparkSQL的前身是Shark,给熟悉RDBMS但又不理解MapReduce的技术人员提供快速上手的工具,hive应运而生,它是当时唯一运行在Hadoop上的SQL-on-h ...

  3. 解决Jenkins的html样式不生效问题的终极方案

    本文从四个步骤来分享我们在自行搭建jenkins过程中遇到的报表样式不全(即html报告展示不正确)的问题: 1.问题现象 2.问题原因 3.问题原因补充 4.解决方法(可以直接跳到第四步解决问题) ...

  4. 《Head First 设计模式》:单件模式

    正文 一.定义 单件模式确保一个类只有一个实例,并提供一个全局访问点. 要点: 定义持有唯一单件实例的类变量. 私有化构造,避免其他类产生实例. 对外提供获取单件实例的静态方法. 二.实现步骤 1.创 ...

  5. asp.net core 2.1的全局模型验证统一方案

    网上的统一模型验证,有效到asp.net core 2.0 2.1的mvc还可以用 webapi嘛,想想就好,自己琢磨了一顿,才发现这东西应该这样玩 首先吧api上面的特性注释了 //[ApiCont ...

  6. Android html5和Android之间的交互

    今天补充了会昨天的问题,然后搞半天又出现莫名其妙的问题. 今天讲的是交互,先说html5在Android的调用. 上面的hello world上面的部分都是安卓里的布局 然后按这些布局自动生成代码. ...

  7. “随手记”开发记录day09

    今天完成了关于我们页面和更新查找页面 效果

  8. 《linux下的计算器:bc用法入门篇》

    说起电脑上的计算器,可能所有人的印象都是这样的:

  9. CSS学习第三天

    定位布局: 相对定位:相对于自身的位置进行偏移position需要搭配left right top bottom      position: relative; 绝对定位:相对于有position属 ...

  10. Vue 给页面加水印指令(directive)

    页面需要水印 import Vue from 'vue' /** * watermark 指令 * 解决: 给页面生成水印 * 基本原理:给选择器添加背景图片 * 用法:v-watermark=&qu ...