时间转化

src/views/Timestamp.vue

@@ -80,6 +80,41 @@
                  @click="copyText('copy-timestamp2')">复制时间戳</el-button>
 
     </div>
+    <el-divider></el-divider>
+    <div class="mt20">
+      时间转化：
+      <el-input v-model="time"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"
+                maxlength="13"
+                :style="{width:'150px'}"></el-input>
+      <el-select v-model="timeType"
+                 size="mini"
+                 :style="{width:'100px'}">
+        <el-option label="毫秒"
+                   value="1"></el-option>
+        <el-option label="秒"
+                   value="2"></el-option>
+        <el-option label="分"
+                   value="3"></el-option>
+        <el-option label="时"
+                   value="4"></el-option>
+        <el-option label="天"
+                   value="5"></el-option>
+      </el-select>
+      <el-button type="primary"
+                 size="mini"
+                 class="ml20"
+                 @click="transformClick">转化</el-button>
+    </div>
+    <div class="mt20">
+      <div>毫秒：{{timeObj.ms}}</div>
+      <div>秒：{{timeObj.s}}</div>
+      <div>分：{{timeObj.min}}</div>
+      <div>时：{{timeObj.hour}}</div>
+      <div>天：{{timeObj.day}}</div>
+    </div>
   </div>
 </template>
 
@@ -104,6 +139,9 @@ export default {
       timestamp2: 0,
       dateStr1: "",
       dateStr2: "",
+      time: 86400,
+      timeType: "2",
+      timeObj:{},
     }
   },
   //监听属性 类似于data概念
@@ -121,7 +159,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   async mounted () {
     this.nowTime();
-
+    this.transformClick ();
     let curr = dayjs();
     this.timestamp1 = curr.unix();
     this.timestamp2 = curr.unix();
@@ -179,6 +217,52 @@ export default {
         return false;
       }
       this.timestamp2 = dayjs(this.dateStr2).unix();
+    },
+    ms2Time (ms) {
+      let s = ms / 1000;
+      let min = s / 60;
+      let hour = min / 60;
+      let day = hour / 24;
+
+      return {
+        ms,
+        s,
+        min,
+        hour,
+        day
+      }
+    },
+    transformClick () {
+      let time = Number(this.time);
+      if (!time) {
+        this.$message.error("格式不正确！");
+        return false;
+      }
+      let ms = 0;
+      let timeObj = {};
+      switch (Number(this.timeType)) {
+        case 1:
+          ms = time;
+          timeObj = this.ms2Time(ms);
+          break;
+        case 2:
+          ms = time * 1000;
+          timeObj = this.ms2Time(ms);
+          break;
+        case 3:
+          ms = time * 1000 * 60;
+          timeObj = this.ms2Time(ms);
+          break;
+        case 4:
+          ms = time * 1000 * 60 * 60;
+          timeObj = this.ms2Time(ms);
+          break;
+        case 5:
+          ms = time * 1000 * 60 * 60 * 24;
+          timeObj = this.ms2Time(ms);
+          break;
+      }
+      this.timeObj = timeObj;
     }
   },
   //当前页面的filter
@@ -202,6 +286,9 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
+.ml20 {
+  margin-left: 20px;
+}
 </style>
 <style>
 </style>