TimeCalculator/pages/index.vue

<template>
<el-container>
  <el-header>
    <h1>XD</h1>
    <el-divider></el-divider>
  </el-header>
  <el-main>
    <div class="hidden-xs-only">
      <dater-larger :date="date" :anotherDate="anotherDate" :options="options" @calculate="calculate"/>
    </div>
    <div class="hidden-sm-and-up">
      <dater-smaller :date="date" :anotherDate="anotherDate" :options="options" @calculate="calculate"/>
    </div>
  </el-main>
  <el-footer>
    <div class="footer-line">
      <center>
        &copy;&nbsp;zbLiuLiu&nbsp;{{year}}&nbsp;-&nbsp;本项目完全开源免费，基于Vue.js、Nuxt.js、Element UI制作。
      </center>
    </div>
    <div class="footer-line">
      <center>
        <a href="http://git.zbliuliu.top/zbLiuLiu/TimeCalculator">http://git.zbliuliu.top/zbLiuLiu/TimeCalculator</a>
      </center>
    </div>
  </el-footer>
</el-container>
</template>

<script>
import Dater1 from '../components/DaterLarger.vue'
import DaterSmaller from '../components/DaterSmaller.vue'
export default {
  components: { Dater1 },
  data(){
    return {
      date: {
        year:0,
        month:0,
        day:0,
        hour:0,
        minute:0,
        second:0
      },
      anotherDate: {
        year:0,
        month:0,
        day:0,
        hour:0,
        minute:0,
        second:0
      },
      options:[
        {label:"加",value:"add", script:function(a,b) {
          return a+b
        }},
        {label:"减",value:"subtract", script:function(a,b) {
          return a-b
        }},
      ],
      option:"",
      year: (new Date()).getFullYear()
    }
  },
  methods:{
    calculate(d,a,o,component){
      var func = function(a){return a};
      for (const index in this.options) {
        if (Object.hasOwnProperty.call(this.options, index)) {
          const option = this.options[index];
          if(option.value==o){
            func = option.script;
            break;
          }
        }
      }
      var date = this.dater(d);
      var anotherDate = this.dater(a);

      // console.log(date,anotherDate)

      var year = func(date.getFullYear(),anotherDate.getFullYear()),
          month = func(date.getMonth(),anotherDate.getMonth()),
          day = func(date.getDate()-1,anotherDate.getDate()-1),
          hour = func(date.getHours(),anotherDate.getHours()),
          minute = func(date.getMinutes(),anotherDate.getMinutes()),
          second = func(date.getSeconds(),anotherDate.getSeconds());

      var thirdDate = new Date();
      thirdDate.setTime(0);
      thirdDate.setFullYear(year);
      thirdDate.setMonth(month);
      thirdDate.setDate(day+1);
      thirdDate.setHours(hour);
      thirdDate.setMinutes(minute);
      thirdDate.setSeconds(second);

      // console.log(thirdDate)

      this.date.year = thirdDate.getFullYear()
      this.date.month = thirdDate.getMonth()
      this.date.day = thirdDate.getDate()-1
      this.date.hour = thirdDate.getHours()
      this.date.minute = thirdDate.getMinutes()
      this.date.second = thirdDate.getSeconds()

      component.focus('anotherDateYear')
    },
    dater(date){
      var year = date.year||0,
          month = date.month||0,
          day = date.day+1||0,
          hour = date.hour||0,
          minute = date.minute||0,
          second = date.second||0;
      var dateObj = new Date();
      dateObj.setTime(0);
      dateObj.setFullYear(year);
      dateObj.setMonth(month);
      dateObj.setDate(day);
      dateObj.setHours(hour);
      dateObj.setMinutes(minute);
      dateObj.setSeconds(second);
      return dateObj;
    }
  },
  mounted(){
    setInterval(()=>{
      this.year = (new Date()).getFullYear()
    },100)
  }
}
</script>

<style scoped>
.footer-line{
  line-height: 1.8;
  color: #C0C4CC;
}
.footer-line *{
  color: inherit !important;
  text-decoration: inherit !important;
  transition: color .5s;
}
.footer-line *[href]:hover,
.footer-line *[href]:focus-visible
{
  color: #909399 !important;
  text-decoration: underline !important;
}
</style>