使用Vue Cli4.3.1脚手架实现vue移动端开发中的设定闹铃向用户提示时分的分析

最新推荐文章于 2022-11-02 13:05:04 发布
最新推荐文章于 2022-11-02 13:05:04 发布
阅读量833 收藏 3
点赞数 4
文章标签： vue.js javascript node.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46115723/article/details/106010824
版权

实现思路,先获取到当前时间以及需要设定的时间,然后计算出来总分钟数,然后将其除以60取整后得到的就是小时,模60得到的就是除了小时外的剩余的不足60的分钟数

请注意:此篇文档只是实现了设定好闹铃后向用户提示还有多长时间的功能,并没有实现设定好之后到时间向用户提醒

一、当设定小时大于当前小时,则为今天就会提醒的闹钟

则有从当前时间到设定时间的
  • 距离被提醒总分钟数 = (设定小时 - 当前小时) * 60 + 设定分钟 - 当前分钟

则有距离被提醒的小时数 = parseInt(总分总数 / 60) ===> 除以每小时60然后取整
则有距离被提醒的除小时以外的分钟数 = 总分钟数 % 60 ===> 总分钟数取模每分钟60即为剩余分钟数

  • 然后可以根据 parseInt(总分钟数 / 60) 相除值以及 总分钟数 % 60 取模的值 继续细化分

取整等于0: 只须向用户提示分钟
取整大于0且取模不等于0: 须向用户提示小时 + 分钟
取整大于0取模等于0: 只需向用户提示小时

  • 分析

当前: 10: 20
设定: 11: 40
====> (11 - 10) * 60m + 40m - 20m = 80m ===> 1h20m

当前: 10: 20
设定: 11: 20
====> (11 - 10) * 60m + 20m - 20m = 60m ===> 1h

当前: 10: 40
设定: 11: 20
====> (11 -10) * 60m + 20m - 40m = 40m ===> 40m

二、当设定小时小于当前小时,则为明天才会提醒的闹钟

则有从当前时间到设定时间的
  • 距离被提醒的总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟

则有距离被提醒小时数 = parseInt(总分钟数 / 60) ===> 除以每小时60然后取整
则有距离被提醒的除小时以外的分钟数 = 总分钟数 % 60 ===> 总分钟数取模每分钟60即为剩余分钟数

  • 然后可以根据 总分钟数 / 60 所得到的值来继续细分

取整等于0: 只须向用户提示分钟
取整大于0且取模不等于0: 须向用户提示小时 + 分钟
取整大于0取模等于0: 只需向用户提示小时

  • 例子

当前: 22: 20
设定: 01: 40
====>今天(24点即0点之前): (24 - 22) * 60m - 20m = 100m ===>1h40m
====>明天(0点之后): (1 - 0) * 60m + 40m = 100m ===> 1h40m
====>总分钟数 = 200m ===> 3h20m

当前: 22: 20
设定: 01: 20
===>今天: (24 - 22) * 60m - 20m = 100m ===>1h40m
===>明天: (1 - 0) * 60m + 20m = 80m ===>1h20m
===>总分钟数 = 180m ===> 3h

当前: 22: 40
设定: 01: 20
===>今天: (24 - 22) * 60m - 40m = 80m = 1h20m
===>明天: (1 - 0) * 60m + 20m = 80m = 1h20m
===>总分钟数 = 160m ===> 2h40m

三、当设定小时等于当前小时,则为一小时以内或者是第二天才会提醒的闹钟

则直接根据分钟数来判断

  • 当设定分钟大于当前分钟 = 设定分钟 - 当前分钟 ===> 直接向用户提示剩余分钟数

  • 当设定分钟等于当前分钟 = 24小时 ===> 直接小时数

  • 当设定分钟小于当前分钟 总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟 ===> 需向用户提示小时 + 分钟

  • 例子

当前: 22: 20
设定: 22: 40
===> 40m - 20m = 20m

当前: 22:20
设定: 22:20
===> 24h

当前: 22: 40
设定: 22: 20
===> 今天: (24 - 22) * 60m - 40m = 80m ===> 1h20m
===> 明天:(22 - 0) * 60m + 20m = 1340m ===> 22h20m
===> 总分钟数 = 1420m ===> 23h40m

四、实现代码

使用的是Vue Cli4.3.1 脚手架 Vant组件UI库 css使用scss库
<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>

五、运行结果

1、设定时间大于现在时间则为今天
  • parseInt(总分钟数 / 60)取整等于0,只须向用户提示分钟
    在这里插入图片描述
    在这里插入图片描述
  • parseInt(总分钟数 / 60)取整大于0且 总分钟数 % 60 取模不等于0: 须向用户提示小时 + 分钟
    在这里插入图片描述
    在这里插入图片描述
  • parseInt(总分钟数 / 60)取整大于0且 总分钟数 % 60 取模等于0，只需向用户提示小时
    在这里插入图片描述
    在这里插入图片描述
2、设定时间小于现在时间则为明天
  • parseInt(总分钟数 / 60)取整等于0,只须向用户提示分钟
    在这里插入图片描述
    在这里插入图片描述
  • parseInt(总分钟数 / 60)取整大于0且 总分钟数 % 60 取模不等于0: 须向用户提示小时 + 分钟
    在这里插入图片描述
    在这里插入图片描述
  • parseInt(总分钟数 / 60)取整大于0且 总分钟数 % 60 取模等于0，只需向用户提示小时
    在这里插入图片描述
    在这里插入图片描述
2、设定时间等于现在时间
  • 当设定分钟大于当前分钟 = 设定分钟 - 当前分钟 ===> 直接向用户提示剩余分钟数
    在这里插入图片描述
    在这里插入图片描述
  • 当设定分钟等于当前分钟 = 24小时 ===> 直接小时数
    在这里插入图片描述
    在这里插入图片描述
  • 当设定分钟小于当前分钟 总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟 ===> 需向用户提示小时 + 分钟
    在这里插入图片描述
    在这里插入图片描述
阿兵呐
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue的一些总结（二）组件通信
qq_45814762的博客
08-05 225
文章目录组件通信父传子props子传父$emit$children / $parentprovide/injectref/$refseventBusvuex各个模块localStorage / sessionStorage$attrs / $listeners总结 组件通信 在知道组件之间是怎么通信的之前，我们先要知道组件之间都存在什么样的关系，对症下药才是王道。 在这里A-B A-C B-D C-E之间是父子关系 B-C是兄弟关系 A-D A-E是隔代关系，也就是爷爷和孙子的关系 D-E是堂兄
Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
最新发布
qq_46103732的博客
02-13 8377
在项目开发过程中，可能需要实现以下场景：未读消息提示、报警信息、消息通知等，这些功能往往是在页面的右上角设置一个铃铛，在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示。首先实现静态部分，需要一个容器，里面包含铃铛图标和显示消息数的文字标签。接下来实现呼吸灯效果，让显示消息数的标签闪烁跳动起来。在data中定义 opacity: 1,在methods中定义事件，实现呼吸灯效果。调整一下样式后就达到了静态的效果。这样就实现了一个简单的呼吸灯效果。在mounted中调用该方法。
vue的实现抖音闹钟
夕阳的云的博客
12-27 1240
早上没有事，来写一个抖音时钟 <template> <!-- 抖音闹钟 --> <div id="clock"> <div class="lock-content"> <hr class="line"> <ul class="hour" :style="...
简单时钟实现（vue3）
m0_53273062的博客
08-20 1086
【代码】简单时钟实现（vue3）
基于vue-cli4和vant搭建的移动端开发模板
02-19
在现代Web开发中，Vue.js是一个非常流行的...这个基于Vue CLI 4和Vant的移动端开发模板，不仅提供了快速启动项目的基础，还通过Vant简化了UI设计，使开发者能够更专注于业务逻辑和用户体验的提升，从而提高开发效率。
springboot+vue-cli脚手架开发-实现用户增删改查（前端脚手架代码）
12-19
在本项目中，我们主要探讨的是使用Spring Boot后端框架与Vue.js前端脚手架(Vue CLI)结合，来构建一个完整的用户管理系统的实现过程。这个系统具备基本的用户操作功能，包括用户增加、删除、修改和查询。下面将详细...
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
手把手教你使用vue-cli脚手架(图文解析)
08-28
手把手教你使用vue-cli脚手架（图文解析） 本篇文章主要介绍了使用vue-cli脚手架的详细教程，从环境搭建到项目初始化的每一步骤都进行了详细的解析。下面是本篇文章的知识点总结： 一、Vue-cli脚手架的优势 * 有...
移动端闹钟
10-15
移动端的一个mp3闹钟，具备定时、娱乐功能，体积小巧。
基于vuejs实现个性化时钟
12-24
基于vuejs实现个性化时钟
循环任意定时间闹钟
02-15
循环任意定时间闹钟 很方便的闹钟 自由定时间设置闹钟
vue实现日历表格（element-ui）
10-14
主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js数字时钟本地时间代码.zip
07-04
vue.js数字时钟本地时间代码是一款带有星期跟日期的数字时钟代码。
Vue.js实现炫酷时钟（带毫秒）
A programmer.
11-02 1079
8880086558264346234989898458608465656498943
vue3实现电子实时时钟（动态时钟）
gyz15731998001的博客
10-25 2866
vue3实现电子实时时钟（动态时钟）
vuewebsocket做消息提醒_可以设置闹钟每天提醒日程的手机电脑共享便签有什么软件...
weixin_39733146的博客
12-03 185
有人说年龄大了容易记性不好，小雪说自己才二十出头的年纪，记性已经不好了。前几天她忘了给贴吧签到，丢了吧主的位置，被领导批评了一顿，心里特别不爽呢！因为她每天的事情那么多，谁没事还顾得上每天去贴吧签到？可偏偏就是签到这样的小事，不做还不行！小雪下定决心，找一可以设置闹钟的便签，雷打不动地每天都能提醒自己签到。有人说，设置提醒用闹钟啊！差不多每个手机上都有闹钟，可是设置提醒事项用闹钟显然不合...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值