Vue根据时间戳制作倒计时15分钟

合集 - Vue(17)

1.Vue跨域详解2023-05-162.Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘2023-05-163.TypeError: Cannot read property 'upgrade' of undefined2023-04-234.Vue选日期滚动条自动定位到选定的日期位置2023-03-28

5.Vue根据时间戳制作倒计时15分钟2023-03-27

6.防抖节流utils2023-03-137.一些JS过滤方法2022-10-088.Vue全局公共服务类mixin2022-10-089.npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`2022-06-1610.vue一直处在2.9.6版本卸载不了升级不了解决方案2022-06-0811.Vue 全局避免按钮重复点击2022-05-2712.Vue2 去除定时器之常用三种方式及特殊方式2022-05-1613.Vue Element-ui 之 el-table自动滚动2022-05-1114.el-table自适应列宽2022-05-1315.vue工程内下载路由2021-08-0616.40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.2021-08-1117.Vue监听系统是否为暗黑模式2023-12-14

收起

废话不多说直接上代码

<script>
    export default {
        data() {
            return {
                downTimeShow: true,
                timer: null,
                downTime: '',
                nowTime: '',
　　　　　　　　　 orderList:[
　　　　　　　　　　　　{addTime:'2023.03.27 13:55'},

　　　　　　　　　　　　{addTime:'2023.03.27 11:16'},

],

            }
        },
        //在挂载时启动定时器
        mounted() {
            let that = this;
            this.timer = setInterval(() => {
                that.nowTime = new Date().getTime()
                this.operaDownTime()
            }, 1000);
        },
        //实例销毁之前清除定时器
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        created() {

        },
        methods: {
            //处理倒计时
            operaDownTime() {
                var ndate = new Date()
                this.orderList.forEach((item, index) => {
                    // 对列表每一项的addtime转成时间戳并用当前时间戳减去addtime时间戳，得到时间差。
                    // 若是时间差大于15分钟，则不显示剩余时间，小于15分钟则显示。
                    item.downTimeShow = false
                    // item的年月日
                    var dd = new Date(item.addTime)
                    var ddYear = dd.getFullYear()
                    var ddMonth = dd.getMonth() + 1
                    var ddDay = dd.getDate()
                    // 当前年月日
                    var td = new Date()
                    var year = td.getFullYear()
                    var month = td.getMonth() + 1
                    var day = td.getDate()
                    // 当年当月当日
                    if(year - ddYear === 0 && ddMonth - month === 0 && ddDay-day === 0){
                        item.downTime = this.nowTime - dd.getTime()
                        var minutes = (item.downTime % (1000 * 60 * 60)) / (1000 * 60)
                        var secondes = (item.downTime % (1000 * 60)) / (1000)
                        // 限制15分钟
                        var limitMinutes = (900000 % (1000 * 60 * 60)) / (1000 * 60)
                        // 剩余时间
                        var remainMinutes = limitMinutes - minutes
                        var remainSecondes = 60 - secondes
                        // 向下取整 如果分小于0则表示倒计时已结束 关闭展示倒计时
                        if (Number(Math.floor(remainMinutes)) < 0) {
                            item.downTimeShow = false
                        } else {
                            item.downTimeShow = true
                            item.downTime = Math.floor(remainMinutes) + ':' + Math.floor(remainSecondes) + ''
                        }
                    }
                })
            }
        }
    }
</script>