Html+Css+Js计算时间差,返回相差的天/时/分/秒(从未来的一个日期时间到当前日期时间的差)。

Html+Css+Js计算时间差,返回相差的天/时/分/秒(从未来的一个日期时间到当前日期时间的差)。_第1张图片

 Html部分


    
        
        
        
        
    
    
        

例如 : 2022-8-4 12:00:00

请输入时间 :
Css部分
* {
    margin: 0;
    padding: 0;
}

#box {
    width: 30%;
    height: 300px;
    margin: 100px auto;
    border: solid 1px #ccc;
    padding-top: 100px;
}

#mytime {
    height: 30px;
    margin-top: 30px;
}

#box button {
    width: 40px;
    height: 30px;
    margin-top: 10px;
}
#box div{
    margin: 20px auto;
    text-align: center;
}
p,span,button{
    margin-left: 25%;
}
Js部分
function panduan() {
    var result = document.getElementById('result');
    var mytime = new Date(document.getElementById('mytime').value);
    // 获取当前日期
    var date = new Date();
    var day, hour, minute, second, interval;
    // 计算相差几天的算法
    interval = mytime - date;
    interval /= 1000;
    day = Math.round(interval / 60 / 60 / 24);
    hour = Math.round(interval / 60 / 60 % 24);
    minute = Math.round(interval / 60 % 60);
    second = Math.round(interval % 60);
    // 页面显示结果
    result.innerHTML = day + "天" + hour + "时" + minute + "分" + second + "秒";
}

你可能感兴趣的:(html,css,javascript)