计算时间差小工具

最新推荐文章于 2024-11-08 14:35:14 发布

花一样的阿衰

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量206

点赞数

分类专栏：前端

欢迎转载

本文链接：https://blog.csdn.net/qq_33242956/article/details/126478695

版权

javascript 前端开发语言

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

计算时间差ms
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算时间差</title>
    <style>
        body {
            margin: 0;
        }

        .time {
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="time">
        <span>Start time: </span>
        <input id="startTime" type="text" name="StartTime"><br><br>
        <span>End time: </span>
        <input id="endTime" type="text" name="EndTime"><br><br>
        <button onclick="btnRun()">计算时间差</button><br><br>
        <span id="diffTime">时间差: </span>
    </div>

    <script>
        const start =  document.getElementById("startTime");
        const end =  document.getElementById("endTime");
        var diff = document.getElementById("diffTime");
        function btnRun() {
            function getDiff() {
                if (start.value.length == 0 || end.value.length == 0) return 0;
                const startTime = start.value.split(":");
                const endTime = end.value.split(":");
                if (startTime.length != 3 || endTime.length != 3) return 0;
                const startMs = (startTime[0] * 60 * 60 * 1000) + (startTime[1] * 60 * 1000) + (startTime[2] * 1000);
                const endMs = (endTime[0] * 60 * 60 * 1000) + (endTime[1] * 60 * 1000) + (endTime[2] * 1000);
                return (endMs - startMs);
            }
            diff.innerHTML= "时间差: " + getDiff() + " ms";
        }
    </script>
</body>
</html>