封装倒计时及获取当前页面url参数

1、封装倒计时

image.png

  • utils/countDown
<template>
    <div class="Date">
        <span>{{ `${d || 0}天${h || 0}小时${m || 0}分${s || 0}秒` }}</span>
    </div>
</template>
<script>
export default {
    props: {
        stopTime: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            d: '',
            h: '',
            m: '',
            s: '',
            timer: null,
        }
    },
    mounted() {
        clearTimeout(this.timer);
        this.countTime();

    },
    beforeDestroy() {
        clearTimeout(this.timer);
    },
    methods: {
        countTime: function () {
            //获取当前时间
            let date = new Date()
            let now = date.getTime()
            //设置截止时间
            let endDate = new Date(this.stopTime);
            let end = endDate.getTime()
            //时间差
            let leftTime = end - now;
            //定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
                this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)//天数我没用到,暂且写上
                this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
                this.m = Math.floor((leftTime / 1000 / 60) % 60)
                this.s = Math.floor((leftTime / 1000) % 60)
                // console.log(this.s)
                //递归每秒调用countTime方法,显示动态时间效果
                this.timer = setTimeout(this.countTime, 1000)
            }
        },
    },
}
</script>
复制代码
  • 使用 传的格式 2022-02-25 23:59:59
  <!-- 倒计时 -->
    <div class="stop-time">
        报价剩余时间:
        <count-down
            v-if="routeData.quotationDeadline"
            :stopTime="routeData.quotationDeadline"
        ></count-down>
        <span v-else>0天0小时0分0秒</span>
    </div>
复制代码

2、获取当前页面url参数

/**
 * 获取当前页面URL参数
 * @param 传入参数key返回value
 */
export function getUrlKey(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [""])[1].replace(/\+/g, '%20')) || null
}
复制代码

3、判断是否是ie浏览器

// 判断是否是ie浏览器
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
  if (!sessionStorage.getItem('ieBrowser')) {
    this.ieBrowser = true
  }
} else {
  this.ieBrowser = false
}
复制代码

Guess you like

Origin juejin.im/post/7062899143366148110