计算日期的时间差

最新推荐文章于 2024-04-09 11:03:27 发布

Ether_x

最新推荐文章于 2024-04-09 11:03:27 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Etherege_x/article/details/107834221

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript在网页上实时计算并显示自页面加载以来的服务时间的方法。通过存储和读取本地时间，结合时间格式转换，实现了精确到秒的时间差显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算日期的时间差

页面加载获取当前时间

function setime(){
             var date = new Date();   //获取打开页面的时间 - 原始时间戳
             var currentdate  = ''
                //如果已经存在直接显示getstorage('nowtime')
            if(localStorage.getItem('nowtime') != undefined || localStorage.getItem('nowtime') != ''){
                currentdate =  localStorage.getItem('nowtime')
            }else{
                // 如果不存在则存储setstorage('nowtime'）
                currentdate = rulerTime(date)  //rulerTime(date)  时间格式转化
                localStorage.setItem('nowtime',currentdate) 
            } 
            // 返回经过转化的时间
            return currentdate
        }

时间格式转换 - > xxxx-xx-xx xx:xx:xx

//时间格式转化
function rulerTime(date){
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var rentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();
    return  rentdate 
}

字符串转日期格式

将storage存储的时间字符串转化为日期格式

//字符串转日期格式，strDate要转为日期格式的字符串
function getDate(strDate) {
     var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,
         function(a) {
             return parseInt(a, 10) - 1;
         }).match(/\d+/g) + ')');
    return date
 }

页面已经服务的时间

//页面已经服务时间
function chaTime(){
    //获取开始时间
    var start = getDate(localStorage.getItem('nowtime'))  //获取一开始存储的时间，并转化为日期格式
    var end = new Date()                        //获取现在的的时间
    var cha = end.getTime() - start.getTime();	//调用getTime()方法获取毫秒数
    var showtime = formatDuring(cha)

    return showtime
}

显示时间差

//时间转化格式
function formatDuring(mss) {
     var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
     var seconds = Math.round((mss % (1000 * 60)) / 1000);
     
     return  hours + " : " + minutes + " : " + seconds 
 }

已经服务时间差每秒调用

//获取已经服务时间
var over = setInterval(function(){
    $('.overtime').val(chaTime())
},1000)

//获取开始时间
var newTime = setime()
$('.starttime').val(newTime)

HTML代码

 <div class="input-row">
     <label>开始服务时间</label>
     <input type="text" class="starttime" value="" disabled>
 </div>
 <div class="input-row">
     <label>已经服务时间</label>
     <input type="text" class="overtime" value="" disabled>
 </div>
 
 <button class="endgo">结束服务</button>

结束服务按钮，停止时间计算

$('.start-div').on('tap','.endgo',function(){
//--------------结束服务
clearInterval(over)   //清除定时器
localStorage.setItem('nowtime','')    //清除打开页面的时间
})