下班倒计时组件

最近和同事吹水时常以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