使用Vue Cli4.3.1腳手架實現vue移動端開發中的設定鬧鈴向用戶提示時分的分析

實現思路,先獲取到當前時間以及需要設定的時間,然後計算出來總分鐘數,然後將其除以60取整後得到的就是小時,模60得到的就是除了小時外的剩餘的不足60的分鐘數

請注意:此篇文檔只是實現了設定好鬧鈴後向用戶提示還有多長時間的功能,並沒有實現設定好之後到時間向用戶提醒

 

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="定時提醒"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <!-- 內容 -->
    <div class="content">
      <!-- 定時內容 -->
      <div class="contentTop">
        <!-- <div v-for="(item,index) in ReminderTime" :key="index" class="ReminderTime">
          <span>提醒時間</span>
          <span>{{item}}</span>
        </div> -->
        <van-swipe-cell  v-for="(item,index) in ReminderTime" :key="index" right-width=".40rem">
          <van-cell :border="false" title="提醒時間" :value=item />
          <template #right>
            <!-- 點擊刪除調用刪除事件並傳參 -->
            <van-button square type="danger" text="刪除" @click="del(index)" />
          </template>
        </van-swipe-cell>
      </div>
      <!-- 添加定時 -->
      <div class="contentBottom" @click="SelectTimeFn">
        +添加提醒
      </div>
      <!-- 時間選擇彈出層 -->
      <van-popup v-model="SelectTime" position="bottom">
        <van-datetime-picker
          v-model="currentTime"
          type="time"
          title="選擇時間"
          :min-hour="0"
          :max-hour="23"
          @confirm="confirm"
          @cancel='cancel'
        />
        <!-- confirm: 點擊確定觸發的事件 -->
        <!-- cancel: 點擊取消觸發的事件 -->
      </van-popup>
    </div>
  </div>
</template>

<script>
// 安裝好vue的ui庫後在這裏引入模塊, 使用vant ui庫組件三部曲引入vue 引入組件 使用組件
import Vue from 'vue'
import { NavBar, Popup, DatetimePicker, SwipeCell, Cell, Button, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Popup)
Vue.use(DatetimePicker)
Vue.use(SwipeCell)
Vue.use(Cell)
Vue.use(Button)
Vue.use(Toast)
export default {
  // 設置data初始值
  data () {
    return {
      currentTime: '12:00',
      SelectTime: false, // 是否彈出選擇時間的彈出層
      ReminderTime: [] // 設定的時間,通過觸發事件,添加鬧鈴
    }
  },
  // 註冊組件
  components: {},
  // 生命週期鉤子函數
  mounted () {},
  // 計算屬性
  methods: {
    // 點擊添加提醒,彈出時間選擇
    SelectTimeFn () {
      this.SelectTime = true
    },
    // 時間選擇中點擊確認按鈕觸發的事件
    // vlue即爲選擇的時間
    confirm (value) {
      // console.log('確認')
      console.log(value)
      this.ReminderTime.push(value)
      this.SelectTime = false
      const SetUpH = value.substring(0, 2) * 1 // 設定時
      const SetUpM = value.substring(3, 5) * 1 // 設定分
      const CurrentH = new Date().getHours() // 當前時
      const CurrentM = new Date().getMinutes() // 當前分
      // const time = `${H}:${M}` // 時 + 分
      // console.log('當前時間', time)
      // console.log(value === time) // 判斷當前時間與設定時間是否相等
      // 設置成功後自動計算時間,然後向用戶提示一個還有多長時間的提示

      // 實現思路,先獲取到當前時間以及需要設定的時間,然後計算出來總分鐘數,然後將其除以60取整後得到的就是小時,模60得到的就是除了小時外的剩餘的不足60的分鐘數
      // 一、當設定小時大於當前小時,則爲今天就會提醒的鬧鐘
      /**
       * 則有從當前時間到設定時間的
       *    距離被提醒總分鐘數 = (設定小時 - 當前小時) * 60 + 設定分鐘 - 當前分鐘
       *    則有距離被提醒的小時數 = parseInt(總分總數 / 60) ===> 除以每小時60然後取整
       *    則有距離被提醒的除小時以外的分鐘數 = 總分鐘數 % 60 ===> 總分鐘數取模每分鐘60即爲剩餘分鐘數
       * 然後可以根據 parseInt(總分鐘數 / 60) 相除值以及 總分鐘數 % 60 取模的值 繼續細化分
       *    取整等於0: 只須向用戶提示分鐘
       *    取整大於0且取模不等於0: 須向用戶提示小時 + 分鐘
       *    取整大於0取模等於0: 只需向用戶提示小時
       */
      // 二、當設定小時小於當前小時,則爲明天才會提醒的鬧鐘
      /**
       * 則有從當前時間到設定時間的
       *    距離被提醒的總分鐘數 = 今天剩餘總分鐘數 = (24 - 當前小時) * 60 - 當前分鐘數 + 明天的總分鐘數 = 設定小時 * 60 + 設定分鐘
       *    則有距離被提醒小時數 = parseInt(總分鐘數 / 60) ===> 除以每小時60然後取整
       *    則有距離被提醒的除小時以外的分鐘數 = 總分鐘數 % 60 ===> 總分鐘數取模每分鐘60即爲剩餘分鐘數
       * 然後可以根據 總分鐘數 / 60 所得到的值來繼續細分
       *    大於1 小於1 等於1
       */
      // 三、當設定小時等於當前小時,則爲一小時以內或者是第二天才會提醒的鬧鐘
      /**
       * 則直接根據分鐘數來判斷
       *    當設定分鐘大於當前分鐘 = 設定分鐘 - 當前分鐘 ===> 直接向用戶提示剩餘分鐘數
       *    當設定分鐘等於當前分鐘 = 24小時 ===> 直接小時數
       *    當設定分鐘小於當前分鐘 總分鐘數 = 今天剩餘總分鐘數 = (24 - 當前小時) * 60 - 當前分鐘數 + 明天的總分鐘數 = 設定小時 * 60 + 設定分鐘 ===> 需向用戶提示小時 + 分鐘
       */
      if (SetUpH > CurrentH) { // 設定大於現在則爲今天
        // 距離被提醒總分鐘數 = (設定小時 - 當前小時) * 60 + 設定分鐘 - 當前分鐘
        const time = (SetUpH - CurrentH) * 60 + SetUpM - CurrentM
        const timeH = parseInt(time / 60)
        const timeM = time % 60
        if (parseInt(time / 60) === 0) { // 取整等於0,只須向用戶提示分鐘
          Toast(`鬧鈴將在${timeM}分鐘後提醒`)
        } else if (parseInt(time / 60) > 0 && time % 60 !== 0) { // 取整大於0且取模不等於0: 須向用戶提示小時 + 分鐘
          Toast(`鬧鈴將在${timeH}小時${timeM}分鐘後提醒`)
        } else if (parseInt(time / 60) > 0 && time % 60 === 0) { // 取整大於0取模等於0: 只需向用戶提示小時
          Toast(`鬧鈴將在${timeH}小時後提醒`)
        }
      } else if (SetUpH < CurrentH) { // 設定小於現在則爲明天
        // 距離被提醒的總分鐘數 = 今天剩餘總分鐘數 = (24 - 當前小時) * 60 - 當前分鐘數 + 明天的總分鐘數 = 設定小時 * 60 + 設定分鐘
        const time = (24 - CurrentH) * 60 - CurrentM + SetUpH * 60 + SetUpM
        const timeH = parseInt(time / 60)
        const timeM = time % 60
        if (parseInt(time / 60) === 0) { // 取整等於0,只須向用戶提示分鐘
          Toast(`鬧鈴將在${timeM}分鐘後提醒`)
        } else if (parseInt(time / 60) > 0 && time % 60 !== 0) { // 取整大於0且取模不等於0: 須向用戶提示小時 + 分鐘
          Toast(`鬧鈴將在${timeH}小時${timeM}分鐘後提醒`)
        } else if (parseInt(time / 60) > 0 && time % 60 === 0) { // 取整大於0取模等於0: 只需向用戶提示小時
          Toast(`鬧鈴將在${timeH}小時後提醒`)
        }
      } else { // 相等的時候爲當前時間則判斷是否比現在的分鐘數大或者下,原理一樣
        if (SetUpM > CurrentM) { // 當設定分鐘大於當前分鐘 = 設定分鐘 - 當前分鐘,直接向用戶提示剩餘分鐘數
          const timeM = SetUpM - CurrentM
          Toast(`鬧鈴將在${timeM}分鐘後提醒`)
        } else if (SetUpM < CurrentM) { // 當設定分鐘小於當前分鐘 總分鐘數 = 今天剩餘總分鐘數 = (24 - 當前小時) * 60 - 當前分鐘數 + 明天的總分鐘數 = 設定小時 * 60 + 設定分鐘 ===> 需向用戶提示小時 + 分鐘
          const time = (24 - CurrentH) * 60 - CurrentM + SetUpH * 60 + SetUpM
          const timeH = parseInt(time / 60)
          const timeM = time % 60
          Toast(`鬧鈴將在${timeH}小時${timeM}分鐘後提醒`)
        } else { // 當設定分鐘等於當前分鐘 = 24小時 ===> 直接小時數
          Toast('鬧鈴將在24小時後提醒')
        }
        // if (SetUpM * 1 > M * 1) {
        //   const time = SetUpM * 1 - M * 1
        //   Toast(`鬧鈴將在${time}分鐘後提醒`)
        // } else if (SetUpM * 1 < M * 1) {
        //   const time = 24 - H * 1 + SetUpH * 1 - 1
        //   const timeM = 60 - (M * 1 - SetUpM * 1)
        //   Toast(`鬧鈴將在${time}小時${timeM}分鐘後提醒`)
        // } else { // 如果相等的話直接提示用戶24小時後纔會響
        //   Toast('鬧鈴將在24小時後提醒')
        // }
      }
    },
    // 時間選擇中點擊取消按鈕觸發的事件
    cancel () {
      this.SelectTime = false
      console.log('取消')
    },
    // 刪除鬧鈴事件
    del (index) {
      console.log(index)
      // 獲取到當前下標,然後刪除當前下標位的數據,當後期右後端數據的時候就根據id值來刪除後端數據庫中數據,然後重更新執行請求數據的函數再重新渲染即可
      this.ReminderTime.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// 樣式
  @import "@/lib/reset.scss";
  // 頭部導航
  /deep/ .van-nav-bar {
    @include rect(100%, .70rem);
    @include background-color(#FDD949);
    font-size: .18rem;
    line-height: .70rem;
    // 左側內容
    /deep/ .van-nav-bar__left {
      // 左側小箭頭
      /deep/ .van-icon {
        font-size: .18rem;
        color: black;
      }
    }
  }
  // 內容
  .content {
    // 佈局爲flex彈性盒子
    @include flexbox();
    // 主軸佈局
    @include justify-content(space-between);
    // 主軸方式垂直
    @include flex-direction(column);
    background-color: #dad4d4;
    // 主內容區域
    .contentTop {
      // 定義寬高
      @include rect(100%, auto);
      // 溢出顯示滾動條
      @include overflow(auto);
      // 將主軸上除了最下邊的添加時間的按鈕得空間外所有得空間都分配給他
      flex: 1;
      // // 每個時間列表
      // .ReminderTime{
      //   // 定義寬高
      //   @include rect(100%, .49rem);
      //   @include border-radius(.06rem);
      //   // 佈局爲flex彈性盒子
      //   @include flexbox();
      //   // 主軸佈局
      //   @include justify-content(space-between);
      //   padding: 0 .15rem;
      //   background-color: #eeeeee;
      //   line-height: .49rem;
      // }
      // 顯示提醒時間的區域
      /deep/ .van-cell {
        padding: .20rem .15rem;
        @include border-radius(.06rem);
      }
      // 刪除按鈕
      /deep/ .van-button {
        width: .40rem;
        height: .68rem;
      }
      // 左滑刪除按鈕
      .van-swipe-cell__right {
        width: 2.0rem;
      }
    }
    // 添加定時
    .contentBottom {
      // 定義寬高
      @include rect(100%, .49rem);
      line-height: .49rem;
      text-align: center;
      background-color: #eeeeee;
    }
  }
</style>