javascript - 为什么js中的定时器在手机上不起作用？

Question

我在 Vue.js 中制作了一个计时器组件，但它在手机上不起作用（我在 iPhone 或 Android 上都试过）。

我不知道为什么它不工作，但它在浏览器上工作。

手机是否可能无法使用 new.Date() 提供新日期？

如果需要，我可以制作一个 jsfiddle。

错误的示例页面：https ://www.ceformed.fr/formation/tm-22-07-21

定时器.vue

<template>
   <div class="inline font-gtamerica text-noir text-lg leading-tight p">
    <div v-show ="statusType !== 'expired'">

    <span class="number text-bleu text-xl">{{ days }}</span>
    <span class="format">{{ wordString.day }}</span>


    <span class="number text-bleu text-xl">{{ hours }}</span>
    <span class="format">{{ wordString.hours }}</span>


    <span class="number text-bleu text-xl">{{ minutes }}</span>
    <span class="format">{{ wordString.minutes }}</span>

   </div>
  <div class="message mb-4">{{ message }}</div>


 </div>
</template>

<script>
  import moment from 'moment'

  export default {
    props: ['starttime','endtime','trans'],
    data() {
      return {
        timer:"",
        wordString: {},
        start: "",
        end: "",
        interval: "",
        days:"",
        minutes:"",
        hours:"",
        seconds:"",
        message:"",
        statusType:"",
        statusText: "",
      }
    },
    created: function () {
      this.wordString = JSON.parse(this.trans);
    },
    mounted(){
      this.start = new Date(this.starttime).getTime();
      console.log(this.start);
      this.end = moment(this.endtime).valueOf();
      console.log(this.end);
      // Update the count down every 1 second
      this.timerCount(this.start,this.end);
      this.interval = setInterval(() => {
        this.timerCount(this.start,this.end);
      }, 1000);
    },
    methods: {
      timerCount: function(start,end){
        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        var distance = start - now;
        var passTime =  end - now;

        if(distance < 0 && passTime < 0){
          this.message = this.wordString.expired;
          this.statusType = "expired";
          this.statusText = this.wordString.status.expired;
          clearInterval(this.interval);
          return;

        }else if(distance < 0 && passTime > 0){
          this.calcTime(passTime);
          this.message = this.wordString.running;
          this.statusType = "running";
          this.statusText = this.wordString.status.running;

        } else if( distance > 0 && passTime > 0 ){
          this.calcTime(distance);
          this.message = this.wordString.upcoming;
          this.statusType = "upcoming";
          this.statusText = this.wordString.status.upcoming;
        }
      },
      calcTime: function(dist){
        // Time calculations for days, hours, minutes and seconds
        this.days = Math.floor(dist / (1000 * 60 * 60 * 24));
        this.hours = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((dist % (1000 * 60)) / 1000);
      }

    }
  }
</script>

页面.vue 提取

<template>
    <Timer
          starttime="Nov 5, 2018 15:37:25"
          :endtime="timestamp"
          trans='{
         "day":"jours, ",
         "hours":"heures & ",
         "minutes":"minutes ",
         "seconds":"",
         "expired":"Les préinscriptions sont fermées",
         "running":" avant la fin des inscriptions",
         "upcoming":"",
         "status": {
            "expired":"Expired",
            "running":"Running",
            "upcoming":"Future"
           }}'
        ></Timer>
</template>

export default {
 computed: {
  timestamp: function() {
        const dateString = this.date.ACF.date_fin_inscription;

        let date = new Date(dateString);
        let dateFormatee = moment(date).format('MMM DD, yyyy HH:mm:ss')

        return dateFormatee;
      }
    }
}

谢谢你的帮助，

标签： javascriptvue.jsmobilenuxt.js