实现内容:

1、时间戳 1587024986952 转成年月日时分秒 2020-04-16 16:16:46

2、当前时间new Date()转成年月日时分秒2019-04-17 10:27:27

3、2020-5-16 17:00:00与当前时间new Date()比较时间差

4、2020-5-16 17:00:00 与 2020-04-16 16:21:53 的时间差

效果:

代码1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1、JS结束时间与当前时间间隔</title>
</head>
<body>
<div class='divClass' id='timeCont'>
<p>当前时间 <span id='nowTime'></span></p>
<p>结束时间 <span id='end'></span></p>
<p style='background:#f00;width: 300px;line-height: 2rem;'>相差时间 <span id='interval'></span></p>
</div>
<script>
//1、当前时间new Date()转成年月日时分秒2019-04-17 10:27:27 function time(now){
var yy = now.getFullYear(); //年
var mm = now.getMonth() + 1; //月
var dd = now.getDate(); //日
var hh = now.getHours(); //时
var ii = now.getMinutes(); //分
var ss = now.getSeconds(); //秒
var time = yy + "-";
if (mm < 10) time += "0";
time += mm + "-";
if (dd < 10) time += "0";
time += dd + " ";
if (hh < 10) time += "0";
time += hh + ":";
if (ii < 10) time += '0';
time += ii + ":";
if (ss < 10) time += '0';
time += ss;
return time;
}
setInterval(function(){
var nowTime = time(new Date())
var end_time = '2020-5-16 17:00:00';
document.querySelector('#nowTime').innerHTML = nowTime;
document.querySelector('#end').innerHTML = end_time;
document.querySelector('#interval').innerHTML = timeDown(end_time);
},1000) // 2、结束时间2020-5-16 17:00:00与当前时间new Date()比较时间差
function timeDown(endDateStr) {
//结束时间
var endDate = new Date(endDateStr);
//当前时间
var nowDate = new Date();
//相差的总秒数
var totalSeconds = parseInt((endDate - nowDate) / 1000);
//天数
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模(余数)
var modulo = totalSeconds % (60 * 60 * 24);
//小时数
var hours = Math.floor(modulo / (60 * 60));
modulo = modulo % (60 * 60);
//分钟
var minutes = Math.floor(modulo / 60);
//秒
var seconds = modulo % 60;
//输出到页面
this.timeCon=days + " 天 " + hours + " 小时 " + minutes + " 分 " + seconds + " 秒";
return this.timeCon;
} </script>
</body>
</html>

代码二:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2、JS结束时间与当前时间间隔</title>
</head>
<body>
<div class='divClass' id='timeCont'>
<p>当前时间 <span id='nowTime'></span></p>
<p>结束时间 <span id='end'></span></p>
<p style='background:#f00;width: 300px;line-height: 2rem;'>相差时间 <span id='interval'></span></p>
</div>
<script>
//1、时间戳 1587024986952 转成年月日时分秒 2020-04-16 16:16:46
function timestampToTime(timestamp) {
var date = new Date();//时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
strDate = Y+M+D+h+m+s;
return strDate;
};
// 2020-5-16 17:00:00 与 2020-04-16 16:21:53 的时间差
function timeInterval(endTime,startTime){
var time1=startTime.replace(new RegExp(/-/gm) ,"/");
var time2=endTime.replace(new RegExp(/-/gm) ,"/");
var stime=new Date(time1).getTime();
var etime = new Date(time2).getTime();
var usedTime = etime - stime;
var days=Math.floor(usedTime/(24*3600*1000));
var leave1=usedTime%(24*3600*1000);
var hours=Math.floor(leave1/(3600*1000))+'';
hours= hours.length==1 ? '0'+hours:hours;
var leave2=leave1%(3600*1000);
var minutes=Math.floor(leave2/(60*1000))+'';
minutes= minutes.length==1 ? '0'+minutes:minutes;
var leave3=leave2%(60*1000);
var seconds=(Math.round(leave3/1000))+'';
seconds= seconds.length==1 ? '0'+seconds:seconds;
var time = days + "天"+hours+"时"+minutes+"分"+seconds+'秒';
return time;
}
setInterval(function(){
var end_time = '2020-5-16 17:00:00';
var nowTime=self.timestampToTime( new Date().getTime()); //2020-04-16 16:21:53
document.querySelector('#nowTime').innerHTML = nowTime;
document.querySelector('#end').innerHTML = end_time;
document.querySelector('#interval').innerHTML = self.timeInterval(end_time,nowTime);
},1000) </script>
</body>
</html>

JS结束时间与当前时间间隔的更多相关文章

  1. easyui 时间段校验,开始时间小于结束时间,并且时间间隔不能超过30天

    //对easyui datetimebox的验证,开始时间要小于结束时间function validateDateTime(beginTimeId,endTimeId,whichTimeId){ co ...

  2. JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内

    /* *JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内 *@param date1 date2(形如:'2015-01-01'类 ...

  3. 关于WdatePicker.js的结束时间大于开始时间

    简单笔记 : WdatePicker.js 要使结束时间大于开始时间只要在线束时间的 minDate:'#F{$dp.$D(\'stimeParam\')}' 即可:不多说 详细代码如下: <t ...

  4. js 获取开始时间和结束时间相隔小时及分钟(时间戳操作)

    js 获取开始时间和结束时间相隔小时及分钟(时间戳操作) 场景描述:获取开始时间和结束时间相隔小时及分钟 实例: TimeOnConfirm(curDate) { if(this.pickernum ...

  5. JS获取开始、结束时间

    /** * 获取本周.本季度.本月.上月的开始日期.结束日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay(); //今天 ...

  6. js获取本周、上周的开始结束时间

    这两天在做一个报表体统,其中涉及到了一个根据本周,上周,本月,上月的时间来进行查询的问题,在这个我就教一下大家怎么实现,大家如果有更好的实现方法的,我也希望大家能说出来,我们交流交流. 首先呢,我写了 ...

  7. js 開始时间,当前时间,结束时间的比較

    //開始时间不能小于当前时间 function startTimeIsBigThanTotay(startTime){ var startdate = new Date((startTime).rep ...

  8. JS判断开始时间不能大于检查结束时间

    //用来检验检查开始时间不能大于检查结束时间 function checkDate(date){ var startDate = $("#jcrwModel_rwfqsj").va ...

  9. My97DatePicker:开始时间和结束时间的最大间隔为1个月30天,并且不大于当前时间(3种方法)

    问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...

  10. sharepoint2010问卷调查(3)-实现问卷的开始和结束时间(采用自定义字段类型)

    接着上面的图片调查,sharepoint自带的问卷调查是没有开始和结束时间的.这个在项目过程不太实用.问卷一般有开始和结束时间的.因此需要自己 动手开发一个自定义字段类型字段.如下图: 开发添加栏目会 ...

随机推荐

  1. Microsoft.IO.RecyclableMemoryStream源码解读

    一.RecyclableMemoryStreamManager 源码地址:https://github.com/Microsoft/Microsoft.IO.RecyclableMemoryStrea ...

  2. 【每日一题】【队列的实现类】【每层元素个数】2022年1月11日-NC15 求二叉树的层序遍历

    描述给定一个二叉树,返回该二叉树层序遍历的结果,(从左到右,一层一层地遍历)例如:给定的二叉树是{3,9,20,#,#,15,7}, 注意:每一层上元素的个数 解答: import java.util ...

  3. 锂电池3.7V转3V,1.5V的稳压和降压芯片

    3.7V是常规我们知道的锂电池多,一般锂电池的放电电压是3V-4.2V之间,再降压转3V,1.5V的话,不需要担心升降压等其他问题,不像输出3.3V时,可能要考虑到升降压芯片的问题了,升降压芯片可考虑 ...

  4. 用 Java?试试国产轻量的 Solon v1.11.4(带视频)

    一个更现代感的 Java 应用开发框架:更快.更小.更自由.没有 Spring,没有 Servlet,没有 JavaEE:独立的轻量生态.主框架仅 0.1 MB. @Controller public ...

  5. PyTorch复现VGG学习笔记

    PyTorch复现ResNet学习笔记 一篇简单的学习笔记,实现五类花分类,这里只介绍复现的一些细节 如果想了解更多有关网络的细节,请去看论文<VERY DEEP CONVOLUTIONAL N ...

  6. 对象和类—Java世界的细胞

    对象和类-Java世界的细胞 今天向大家介绍我自己关于Java中对象和类的一些体会,中有不足还请大家多多指教 1.面向对象程序设计 为什么会产生面向对象 我认为人们在最初探索计算机世界时,常常会从计算 ...

  7. React报错之Element type is invalid

    总览 产生"Element type is invalid -- expected a string (for built-in components) or a class/functio ...

  8. java中的动态绑定机制

    本文主要讲述java中的动态绑定机制. 老韩ppt关于动态绑定机制: 示例代码如下: public class DynamicBinding { public static void main(Str ...

  9. week_1

    Andrew Ng机器学习笔记---by OrangeStar Week 1 A computer program is said to learn from experience E with re ...

  10. nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应

    最近一个需要用nuxt框架实现的pc自适应项目,从网上找了很多资料,最终完美实现 一.下载相关插件 npm i lib-flexible -Snpm i px2rem-loader -Dnpm ins ...