前端实现一个钟表功能

小半 • 2023年2月3日下午5:51 • 微信精选 • 阅读 386

今日鸡汤

你人生一百次谨小慎微，你要有一次拍案而起；人生一百次放浪形骸，要认真地爱一次；人生一百次不越雷池一步，也要潇洒走一回！一定要在人生的内存，给自己，给致爱的人，留一个百分之一空间，不随波逐流。

需求：前端需要实现一个钟表功能，实时展示当前时间。

思路：当页面加载时，获取一下系统时间。定义一个定时器，每一秒执行一次，将当前时间+1秒。

为了演示，这里的获取时间我直接在前端获取时间。

vue代码

<el-row :gutter="20">
    <el-col :span="12">
        <div id="content" class="grid-content bg-purple">
        	{{ currentYmd }} {{ currentHMS }}
        </div>
    </el-col>
</el-row>

js代码

export default {
 mounted() {
        this.timer = setInterval(() => {
            this.getCurrentTime();
        }, 1000);
    },
    beforeDestroy() {
        /* 离开页面前销毁定时器 */
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    data() {
        return {
            currentYmd: "",
            currentHMS: "",
            indexTime: "",
        };
    },
    created() {
        this.indexTime = new Date(+new Date() + 8 * 3600 * 1000)
            .toJSON()
            .substr(0, 19)
            .replace("T", " ");
    },
    methods: {
        getCurrentTime() {
            // 每次加1秒
            this.doAdd(this.indexTime, 1);
        },
        doAdd(date, num) {
            var d = new Date(
                date.substring(0, 4),
                date.substring(5, 7) - 1,
                date.substring(8, 10),
                date.substring(11, 13),
                date.substring(14, 16),
                date.substring(17, 19)
            );
            d.setTime(d.getTime() + num * 1000);
            const currentTime =
                d.getFullYear() +
                "-" +
                this.checkTime(d.getMonth() + 1) +
                "-" +
                this.checkTime(d.getDate()) +
                " " +
                this.checkTime(d.getHours()) +
                ":" +
                this.checkTime(d.getMinutes()) +
                ":" +
                this.checkTime(d.getSeconds());
            this.indexTime = currentTime;
            this.currentYmd = currentTime.substring(0, 10);
            this.currentHMS = currentTime.substring(11, 19);
        },
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        },
}