[HTML+Bootstrap+CSS+jQuery] 时差计算器（计算时差、验证格式、当前时间、历史记录……）

• 需求： 用户输入起止时间，点击计算按钮输出时差（…天…时…分…秒）；验证输入值的格式，仅当格式符合时间类型时才能输出正确结果，否则显示警告；提供按钮获取当前时间并填充到输入框内，可以计算当前时间开始或结束的时差；自动叠加历史记录，点击三角按钮展开查看，再点击收起
• 美化： 面板、输入框、按钮等样式优化
• 技术： HTML + Bootstrap + CSS + jQuery

HTML代码：

<!-- 本案利用bootstrap布局和样式 -->
<div class="container-fluid">
    <!-- 卡片组件作为计算器面板 -->
    <div class="card m-3" style="width: 430px;">
        <div class="card-header text-center">简单时差计算器</div>
        <div class="card-body">
            <!-- 内联表单输入框 -->
            <form class="form-inline">
                <div class="form-group m-2">
                    <label for="startTime">开始时间：</label>
                    <input type="text" id="startTime" placeholder="YYYY/MM/DD hh:mm:ss" class="form-control">&nbsp;
                    <!-- form中的button有一个点击刷新的默认动作，添加type="button"可阻止刷新 -->
                    <button type="button" id="startNow" class="btn btn-outline-dark btn-sm">当前时间</button>
                </div>
                <div class="form-group m-2">
                    <label for="endTime">结束时间：</label>
                    <input type="text" id="endTime" placeholder="YYYY/MM/DD hh:mm:ss" class="form-control">&nbsp;
                    <button type="button" id="endNow" class="btn btn-outline-dark btn-sm">当前时间</button>
                </div>
            </form>
        </div>
        <div class="card-footer">
            <!-- 添加浮动，强制按钮与输入框一行显示 -->
            <button id="calc" class="btn btn-primary float-left ml-2">计算</button>
            <!-- 结果显示区域设置为只读 -->
            <input type="text" id="result" readonly class="text-center form-control float-left ml-2">
            <!-- 同时要有一个样式完全相同的历史记录显示区域 -->
            <span type="text" id="history" readonly class="text-center form-control float-left ml-2"></span>
            &nbsp;
            <!-- 点击展开/收起历史记录的按钮 -->
            <button id="tglBtn" class="btn btn-light px-1" style="color: #ced4da;">
                <!-- 向下三角/向上三角两个符号用于切换 -->
                <span id="downBtn">&#9660</span>
                <span id="upBtn">&#9650</span>
            </button>
        </div>
    </div>
</div>

CSS代码：

#result {
    width: 270px;
}
#history {
    width: 270px;
    height: 300px;    /* 限制高度，可显示最新的12条记录 */
    overflow: hidden;    /* 溢出内容隐藏 */
    display: none;    /* 历史记录默认不可见 */
}
#upBtn {
    display: none;    /* 向上三角符号默认不可见 */
}

JS代码：

$(function(){
    //计算时差的方法
    function timeDiff(s,e){
        var sDate = new Date(s);    //将参数转换为标准时间数据
        var eDate = new Date(e);
        var millDiff = eDate.getTime() - sDate.getTime();    //计算毫秒差
        var dayDiff = Math.floor(millDiff / (1000*60*60*24));    //计算天数差
        var dayRem = millDiff % (1000*60*60*24);
        var hourDiff = Math.floor(dayRem / (1000*60*60));    //计算小时差
        var hourRem = dayRem % (1000*60*60);
        var minDiff = Math.floor(hourRem / (1000*60));    //计算分钟差
        var minRem = hourRem % (1000*60);
        var secDiff = Math.round(minRem / 1000);    //计算秒数差
        return dayDiff + " 天 " + hourDiff + " 时 " + minDiff + " 分 " + secDiff + " 秒 ";    //返回结果
    };
    //验证格式的方法
    function testPattern(t){
        var reg = /^(?:(?!0000)[0-9]{4}([-/.])(?:(?:0[1-9]|1[0-2])([-/.])(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])([-/.])(?:29|30)|(?:0[13578]|1[02])([-/.])31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-/.])02([-/.])29)\s([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;    //日期格式YYYY-/.MM-/.DD（考虑闰年月日规则，并允许"-""/""."三种分隔符），时间格式hh:mm:ss
        return reg.test(t);    //匹配正则表达式，返回true
    };
    //“计算”按钮绑定点击事件
    $("#calc").click(function(){
        var stVal = $("#startTime").val();    //获取输入框的值
        var etVal = $("#endTime").val();
        var st = stVal.replace(/[-.]/g, "/");    //将用户可能输入的"-"或"."分隔符替换为标准格式的"/"分隔符
        var et = etVal.replace(/[-.]/g, "/");
        if(testPattern(stVal) && testPattern(etVal)){    //仅当起止时间匹配都为true时
            $("#result").val(timeDiff(st,et));    //显示计算结果
            $("#history").prepend(timeDiff(st,et) + "<br>");    //同时添加一行到历史记录开头
        }
        else{
            $("#result").val("未获得结果（输入格式错误）").css("color", "red");    //否则显示红色的警告文字
        };
    });
    //输入框绑定获得焦点事件
    $("#startTime, #endTime").focus(function(){
        $("#result").val("").css("color", "");    //清除结果区域的内容和颜色属性
    });
    //填充为当前时间的方法
    function nowTime(){
        var nt = new Date();    //获取当前时间数据
        var year = nt.getFullYear();    //获取此年
        var month = nt.getMonth()+1;    //获取此月
        var day = nt.getDate();    //获取此日
        var hour = nt.getHours();    //获取此时
        var min = nt.getMinutes();    //获取此分
        var sec = nt.getSeconds();    //获取此秒
        month = month>9 ? month : "0"+month;    //当不足两位数时在前面补0
        day = day>9 ? day : "0"+day;
        hour = hour>9 ? hour : "0"+hour;
        min = min>9 ? min : "0"+min;
        sec = sec>9 ? sec : "0"+sec;
        return year + "/" + month + "/" + day + " " + hour + ":" + min + ":" + sec;    //返回符合格式要求的数据
    };
    //“当前时间”按钮绑定点击事件，填充值到对应的输入框
    $("#startNow").click(function(){
        $("#startTime").val(nowTime());
    });
    $("#endNow").click(function(){
        $("#endTime").val(nowTime());
    });
    //三角按钮绑定点击事件
    $("#tglBtn").click(function(){
        $("#result, #history, #downBtn, #upBtn").toggle();    //切换历史记录和上/下三角是否可见
    });
})

效果示例：