Vue小练习：记录任务所花费时间

第一版

效果展示（不只效果展示，还有点别的东西）
2024年3月26日14:14:21
存在的问题：

1. 不能回到梦开始的地方
2. 没连接后端

准备：学习路由，通过跳转界面，跳转到当前页面实现刷新页面的效果，从而重置界面,实现“再来一次”。

<template>
  <div>

    <table v-if="flagTask">
      <tr>
        <td>任务</td>
        <td colspan="2">{{ task }}</td>
      </tr>
      
      <tr>
        <td>开始时间</td>
        <td colspan="2">{{ startTimeStr }}</td>
      </tr>
      <tr v-if="flagSaveAndRefresh">
        <td>结束时间</td>
        <td colspan="2">{{ endTimeStr }}</td>
      </tr>
      <tr>
        <td>已花费时间</td>
        <td colspan="2">{{ Math.floor(elapsedTime / (1000*60))+":"+Math.floor(elapsedTime / 1000)%60+":"+elapsedTime%1000 }}</td>
      </tr>
      <tr>
        <td><button @click="endTask" :disabled="flagEndTiming">结束统计</button></td>
        <td><button @click="saveTaskInfo" :disabled="flagTiming">保存信息</button></td>
        <td><button @click="refresh" :disabled="flagTiming">再来一次</button></td>
      </tr>
    </table>
    
    <span v-else>
      <input v-model="task" placeholder="请输入要统计的任务" >
      <br>
      <div :class="startButton">
        <button @click="startTask">开始统计</button>
      </div>
      
    </span>
    
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
  let task = ref(null);//任务名
  let startTimeStr = ref(null);//用以显示当前时间（模拟）
  let startTime = ref(null);//记录任务开始时间
  let endTimeStr = ref(null);//用以显示结束时间（模拟）
  let endTime = ref(null);//记录截止时间
  let elapsedTime = ref(null);//保存所耗时间
  let timer = ref(null);
  /*timer 在这里用于存储一个定时器对象。
  在 startTask() 函数中，通过 setInterval() 方法创建了一个定时器，每隔1毫秒执行一次回调函数。
  这个回调函数计算任务开始时间与当前时间的差值，并将差值转换为所耗时间（毫秒）。
  当调用 endTask() 函数时，使用 clearInterval() 方法清除定时器，停止计算所耗时间。
  */
  let flagEndTiming=ref(false);//控制按钮 是否可以结束计时
  let flagTiming=ref(true);//控制按钮 是否可以重开和保存
  let flagTask = ref(false);//控制界面，开始计时之后，切换界面
  let flagSaveAndRefresh=ref(false);//控制 保存和重来 界面 进出

    /**
     * time：
     *    功能：要转换为字符串的时间
     *    易错：传入的时候，别加.value
     * 返回值：转完之后，要赋给谁
     */
    function getTimeStr(time) {
      let temp = new Date(time.value);
      temp.setHours(temp.getHours() + 8);
      return temp.toISOString().substr(0, 10) + " " + temp.toISOString().substr(11, 8);
    }

    function startTask() {
      startTime.value = new Date();
      startTimeStr.value = getTimeStr(startTime);
      timer.value = setInterval(() => {
        let now = new Date();
        let diff = now - startTime.value;
        elapsedTime.value = diff;
      }, 1);
      flagTask.value = true;
    }

    function endTask() {
      clearInterval(timer.value);
      endTime.value = new Date();
      endTimeStr.value = getTimeStr(endTime);
      flagEndTiming=true;
      flagTiming=false;
      flagSaveAndRefresh.value=true;
    }

    function saveTaskInfo() {
      let taskInfo = {
        task: task.value,
        startTime: startTime.value,
        endTime: endTime.value,
        elapsedTime: elapsedTime.value,
      };
      console.log(taskInfo); // 这里可以将 taskInfo 保存到数据库或其他地方
    }
    
    //回到梦开始的地方
    function refresh() {
      axios.get("index.html")
    }
</script>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
  }

  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    width: 100%;
  }

  table {
    border-collapse: collapse;
    text-align: center;
  }

  td{
      border: 1px solid black;
      padding: 8px;
  }
  .startButton {
    justify-content: center;
    
  }
</style>