vue 倒计时效果，两个日期差计算

最新推荐文章于 2024-05-17 16:19:13 发布
最新推荐文章于 2024-05-17 16:19:13 发布
阅读量817 收藏
点赞数
分类专栏： vue 文章标签： vue倒计时 vue 时间差
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43292447/article/details/114403943
版权 
<template>
  <div style="">
    <div>
      <p class="p1" v-if="chkValue!='0-0'">投产倒计时</p>
    </div>
    <ul class="ul1" v-if="chkValue!='0-0'">
      <li>
        <span class="count">
          <img class="c1" :src="getTimeUrl(thousandDay)" alt="">
        </span>
        <span class="count">
          <img class="c1" :src="getTimeUrl(hundredDay)" alt="">
        </span>
        <span class="count">
          <img class="c1" :src="getTimeUrl(tenDay)" alt="">
        </span>
        <span class="count">
          <img class="c1" :src="getTimeUrl(individualDay)" alt="">
        </span>
        <span class="tian">天</span>
      </li>
      <li>
          <span class="count">
            <img class="c1" :src="getTimeUrl(tenHour)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualHour)" alt="">
          </span>
        <span class="tian">时</span>
      </li>
      <li>
         <span class="count">
            <img class="c1" :src="getTimeUrl(tenMinute)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualMinute)" alt="">
          </span>
        <span class="tian">分</span>
      </li>
      <li>
         <span class="count">
             <img class="c1" :src="getTimeUrl(tenSec)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualSec)" alt="">
          </span>
        <span class="tian">秒</span>
      </li>
    </ul>
    <ul class="ul1" v-if="chkValue=='0-0'">
      <li>
          <span class="count">
            <img class="c1" :src="getTimeUrl(tenHour)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualHour)" alt="">
          </span>
        <span class="tian">时</span>
      </li>
      <li>
         <span class="count">
            <img class="c1" :src="getTimeUrl(tenMinute)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualMinute)" alt="">
          </span>
        <span class="tian">分</span>
      </li>
      <li>
         <span class="count">
             <img class="c1" :src="getTimeUrl(tenSec)" alt="">
          </span>
        <span class="count">
             <img class="c1" :src="getTimeUrl(individualSec)" alt="">
          </span>
        <span class="tian">秒</span>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  name: 'pagel',
  data() {
    return {
      thousandDay: 0,
      hundredDay: 0,
      tenDay: 0,
      individualDay: 0,
      tenHour: 0,
      individualHour: 0,
      tenMinute: 0,
      individualMinute: 0,
      tenSec: 0,
      individualSec: 0,
      millisecond1: null,
  },
  mounted() {
    this.currentTime();
    this.play()
    this.drawLine()
    this.initWave()
    var timer = new Date('2020-10-15 00:00:00')
    this.timer1 = new Date('2022-04-01 00:00:00')
    this.timer2 = new Date('2023-05-01 00:00:00')

    var t = new Date('2020-10-15 00:00:00')
    var t1 = new Date('2020-10-22 00:00:00')
    var t2 = new Date('2021-01-06 00:00:00')

    // alert(this.timeFn2(t))//开工总时间
    // alert(this.timeFn2(t1))//安平-泰安
    // alert(this.timeFn2(t2))//泰安-连云港
    this.allDays = this.timeFn2(t)
    this.day1 = this.timeFn2(t1)
    this.day2 = this.timeFn2(t2)

  },
  watch: {
    chkValue(chkValue) {
      console.log(chkValue);
      this.initWave()
      if (chkValue == '0-0') {
        this.drawLine()
        this.currentTime();
      }
      if (chkValue == '0-0-1') {
        this.drawLineAP()
        this.xunhan(this.timer1)
      }
      if (chkValue == '0-0-2') {
        this.drawLineLYG()
        this.xunhan(this.timer2)
      }
    },
  },

  methods: {

    getTimeUrl(url) {
      return require(`../assets/imgs/${url}.png`)
    },
// 计算两个时间差 dateBegin 开始时间,开工总时间
    timeFn2(dateBegin) {
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateEnd = new Date();//获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin;//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)

      var leave4 = leave3 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      var minseconds = Math.round(leave4 / 1000)
      // var timeFn = "耗时：" + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒" + minseconds + "毫秒";
      return dayDiff;
    },
    //投产倒计时
    timeFn1(dateBegin) {
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateEnd = new Date();//获取当前时间
      var dateDiff =  dateBegin - dateEnd.getTime();//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)

      var leave4 = leave3 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      var minseconds = Math.round(leave4 / 1000)
      // var timeFn = "耗时：" + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒" + minseconds + "毫秒";
      this.thousandDay = parseInt(dayDiff / 1000)
      this.hundredDay = parseInt(dayDiff / 100 % 10)
      this.tenDay = parseInt(dayDiff / 10 % 10)
      this.individualDay = parseInt(dayDiff % 10)
      this.tenHour = parseInt(dayDiff / 10 % 10)
      this.individualDay = parseInt(dayDiff % 10)
      this.tenMinute = parseInt(minutes / 10 % 10)
      this.individualMinute = parseInt(minutes % 10)
      this.tenSec = parseInt(seconds / 10 % 10)
      this.individualSec = parseInt(seconds % 10)
    },
  }
}
</script>
<style scoped>
.ul1 {
  height: 130px;
  display: block;
  margin-left: 60px;
}

ul li {
  list-style: none;
  float: left;
  display: inline-block;
  overflow: hidden;
}

.count {
  width: 90px;
  height: 130px;
  background-image: url('../assets/imgs/bg1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  float: left;
  margin-right: 20px;
  margin-left: 20px;
}

.c1 {
  width: 38px;
  height: 81px;
  display: block;
  margin: 20px auto;
}
</style>

【阿里云】2核2G1M 86元/年；2核8G1M 390元/年；4核8G1M 664元/年
活动地址：https://www.aliyun.com/minisite/goods?userCode=q8eccx2x


效果图：
在这里插入图片描述
在这里插入图片描述

页面所需图片如下：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

倾听雨落~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue倒计时时间实现圆形进度条_利用 canvas 实现圆形进度条，实现倒计时效果
weixin_39986178的博客
12-22 891
#实现圆环渐变倒计时效果内容效果图需求分析实现技术实现过程全部源码1. 效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止.2. 需求分析可以自定义倒计时结束的时间圆环的颜色是渐变的倒计时的动画在视觉上是流畅运行, 而不是一格一格的减少3. 实现的技术语言框架HTML5无CSS3BootStrap SASSJavaScript无4. 实现的过程1. HTM...
vue怎么实现时间倒计时
bonezeng的博客
12-07 410
vue怎么实现时间倒计时
计算连个日期时间差的天数（已经写好的动态库，可直接使用）
08-24
计算时间查找，提供调用发放，如下代码： void Test_DateDiff() { // 第一种调用 string str1("2017-08-10"); string str2("2017-08-13"); string strBreak = "-"; //string str1("20170810"); //string str2("20170813"); //string strBreak = ""; CDateDifference dateDiff; int nDateDiff = 0; nDateDiff = dateDiff.GetDateDifference(str1, str2, strBreak); // 第二种调用 SYSTEMTIME sysTime1, sysTime2; GetLocalTime(&sysTime1); GetLocalTime(&sysTime2); nDateDiff = dateDiff.GetDateDifference(sysTime1, sysTime2); // 第三种调用 tm* time1 = NULL,* time2 = NULL; time_t lacal = time(NULL); localtime_s(time1, &lacal); gmtime_s(time2, &lacal); nDateDiff = dateDiff.GetDateDifference(time1, time2); // 第四种调用 nDateDiff = dateDiff.GetDateDifference(2017, 10, 1, 2017, 8, 23); // 第五种调用 tagDate Date1, Date2; Date1.year = 2017; Date1.month = 8; Date1.day = 10; Date2.year = 2017; Date2.month = 9; Date2.day = 10; nDateDiff = dateDiff.GetDateDifference(Date1, Date2); }
Vue ——JS 在获取两个日期之间相差多少天或者多少时间(天+小时+分+秒)时间格式：(‘2023-01-13 10:14:30’)
weixin_42504444的博客
10-26 343
Vue ——JS 在获取两个日期之间相差多少天或者多少时间(天+小时+分+秒)的基础上在el-table-column明细表中做时间差动态计算——基础积累 参照—— http://t.csdnimg.cn/j8YXj
vue中实现倒计时（一个定时器实现多个倒计时）
@小蚜虫
05-28 1986
vue中实现倒计时（一个定时器实现多个倒计时） 1.定义计算两个时间差得方法（如果项目很多地方用到倒计时，建议将此方法封装为全局函数） /** *@奇乐（2018-11-18） * --公共方法名称：计算时间差 * 参数： * ksTime:开始时间 :【yyyy-dd-mm hh:mm:ss】格式时间字符串 * jsType:计算类型 ：true:当前时间-ksTime false：ksTime-当前时间 * 返回结果： * newTimes:{ *
JS 和 vue 时间倒计时（天、时、分、秒）
qq_17627195的博客
09-16 883
JS 代码 // 传递过来的都是截止时间2021-09-17 15:45:30 function getResidueDate(end_date){ let residue = end_date - new Date(); let days = Math.floor(residue / 1000 / 60 / 60 / 24); let hours = Math.floor((residue / 1000 / 60 / 60) % 24); let minutes = Mat
计算2个日期之前相隔的时间差(天数，小时数，分钟数，秒数)
qq_41497443的博客
09-22 1399
计算2个日期之前相隔的时间差(天数，小时数，分钟数，秒数) export function getDays(beginTime, endTime) { var dateDiff = endTime.getTime()一beginTime.getTime()//相差天数 var dayDiff = Math. floor(dateDiff/ (24 *3600 * 1000)) var leave1 = dateDiff % (24*3600*1000) var hours = Math. floor
vue+moment实现倒计时效果
10-16
在Vue.js应用中，我们经常需要实现倒计时功能，比如显示距离某个特定日期或时间的剩余时间。在这个场景下，Vue与JavaScript日期处理库Moment.js的结合使用非常有效。以下是一个详细的步骤来解释如何使用Vue和Moment...
vue 实现小程序或商品秒杀倒计时
10-17
在电商网站中，倒计时秒杀组件是促销活动中常见的功能，其主要目的是引导用户在特定时间内参与抢购，提升产品的曝光率...在实现过程中，特别注意了时间同步和状态控制两个关键点。确保用户体验的一致性和活动的公平性。
Vue 封装防刷新考试倒计时组件的实现
10-15
在这个例子中，封装的组件是一个考试倒计时，适用于需要对考试时间进行控制和显示的在线考试系统中。防刷新是指在页面刷新或重新加载后，倒计时能够从上次中断的地方继续计时，而不是重置。 2. Vue生命周期钩子函数...
vue 实现指定日期之间的倒计时
peppa_pig的博客
08-13 501
原文地址
vue 实现一个简单倒计时功能
最新发布
weixin_52493208的博客
05-17 196
【代码】vue 实现一个简单倒计时功能。
两个日期相减的时间
于大大大洋
10-07 2657
`(*∩_∩*)′
模板设计模式 计算代码的执行时间
qq_41005604的博客
06-19 229
模板的设计模式 模板：定好了框架，格式，结构。集体的内容需要使用者来填写 在开发中，遇到这样的情况；当解决某个问题的时候，总体的代码的结构是确定的，步骤也是确定的，只是其中的一小步的具体的步骤不确定，那么我们可以把这个不确定的步骤设计为抽象的方法，让使用者实现它 案例 编写一个类，他具有一个功能，可以计算“任意”一段代码的运行时间。 步骤： （1）获取开始的时间start （2）执行XXX代码 （3）获取结束的时间end （4）计算时间差（end- start） 提示：System.curre
vue 倒计时功能实现详解，快来 get 灵感
热门推荐
Shids_的博客
05-28 1万+
vue 倒计时功能实现详解，快来 get 灵感
vue 日期格式化 获取两个日期相差天数
qq_44971069的博客
08-23 1791
将时间转化为yyyy-mm-dd hh:mm:ss 格式 //格式化时间 formatTime (date, type = 1) { if (!(date instanceof Date)) { date = new Date(date) }; const curDate = new Date(); const curYear = curDate.getFullYear(); const curMonth = cur
vue组件 - 实现时间倒计时效果（多数据、多个倒计时处理）
三季雨
01-05 2665
效果 创建文件showTime.js 用于处理 时间 // 倒计时 var day = 0 var hour = '00' var min = '00' var second = '00' function countTime (timeSrt) { // 获取当前时间 let date = new Date() let now = date.getTime() // 设置截止时间 let endDate = new Date(timeSrt) // 需要倒
vue中多个倒计时实现
xinzi11243094的博客
02-28 1342
下面给出一个效果图，我今天要说的就是实现下图这种多个倒计时 很多时候我们做只有一个倒计时的情况比较多，比较简单只需要一个定时器setInterval，算出来赋赋值就好， 但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了 拿我自己的vue项目举个例 &lt;!-- template --&gt; &lt;div v-for="(item,index) in li...
vue倒计时时分秒组件
09-03
Vue倒计时时分秒组件可以通过使用Vue.js的计算属性和定时器来实现。下面是一个简单的示例： ```html <template> <div> <span>{{ formatTime(hours) }}:</span> <span>{{ formatTime(minutes) }}:</span> <span>{{ formatTime(seconds) }}</span> </div> </template> <script> export default { data() { return { time: 3600 // 倒计时时间，单位为秒 } }, computed: { hours() { return Math.floor(this.time / 3600); }, minutes() { return Math.floor((this.time % 3600) / 60); }, seconds() { return this.time % 60; } }, methods: { formatTime(time) { return time.toString().padStart(2, '0'); // 补0操作，使数字始终为两位数 } }, mounted() { this.timer = setInterval(() => { if (this.time > 0) { this.time--; } else { clearInterval(this.timer); // 倒计时结束后的逻辑 alert('倒计时结束'); } }, 1000); }, beforeDestroy() { clearInterval(this.timer); } } </script> ``` 在上面的示例中，我们使用了一个`time`属性来表示倒计时剩余的秒数。通过计算属性`hours`、`minutes`和`seconds`将剩余秒数转换为小时、分钟和秒钟数。`formatTime`方法用于将数字格式化为两位数的字符串，以便显示时分秒。 在组件的`mounted`生命周期钩子中，我们使用`setInterval`每隔一秒更新倒计时的时间。当倒计时结束时，清除定时器，并执行相应的逻辑。 你可以根据需要调整组件的样式和逻辑。希望这个示例对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值