最近和同事吹水時常以xh代指距下班時間還有多久，想了想干脆寫一個組件。

window.offWork = () => {
    let time = new Date().toTimeString().substr(0, 8).split(":"),
        ms =
            (17 - +time[0]) * 60 * 60 * 1000 - +time[1] * 60 * 1000 - +time[2] * 1000,
        h = parseInt(ms / (60 * 1000 * 60)),
        min = parseInt((ms % (1000 * 60 * 60)) / (1000 * 60)),
        s = Math.floor((ms % (1000 * 60)) / 1000);
    return "距下班還有:" + h + "小時" + min + "分鐘" + s + "秒";
};

計算時間很簡單，分別計算時分秒就行。寫代碼寫麻了就控制臺來個offWork()。

<!--
 * @Author: CelestialProof
 * @Description: POWERED BY CELESTIALPROOF
 * @Date: 2020-09-16 14:01:37
-->
<template>
    <div>{{ msg }}</div>
</template>

<script>
export default {
    name: "male",
    data: () => {
        return {
            msg: "",
        };
    },
    mounted() {
        let that = this;
        setInterval(function() {
            that.msg = that.offWork();
        }, 1000);
        that.msg = that.offWork();
    },
    methods: {
        offWork: () => {
            let time = new Date()
                    .toTimeString()
                    .substr(0, 8)
                    .split(":"),
                ms =
                    (17 - +time[0]) * 60 * 60 * 1000 -
                    +time[1] * 60 * 1000 -
                    +time[2] * 1000;
            let h = parseInt(ms / (60 * 1000 * 60)),
                min = parseInt((ms % (1000 * 60 * 60)) / (1000 * 60)),
                s = Math.floor((ms % (1000 * 60)) / 1000);
            return "還有:" + h + "小時" + min + "分鐘" + s + "秒";
        },
    },
};
</script>

<style></style>

vue組件形式，可以掛個窗口看。

image.png

更新

git地址,更新了距離周末時間
https://gitee.com/han_wu_xian/off-work