广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现倒计时功能
  • 302
分享到

vue实现倒计时功能

vue倒计时 2022-11-11 23:11:09 302人浏览 泡泡鱼
摘要

本文实例为大家分享了Vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it

本文实例为大家分享了Vue实现倒计时功能的具体代码,供大家参考,具体内容如下

通过父组件传入的结束时间减去当前日期得到剩余时间

1.子组件部分


<div class="itemend">
 <p class="itemss">倒计时<span>{{day}}</span>天<span>{{hour}}</span>时<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

代码:


data() {
 return {
 day: "", //天
 hour: "", //时
 minute: "", //分
 second: "", //秒
 flag: false,
 };
 },
 mounted() {
 let time = setInterval(() => {
 if (this.flag == true) {
 clearInterval(time);
 }
 this.timeDown();
 }, 500);
 },
 props: {
 endTime: {
 type: String,
 },
 },
 methods: {
 timeDown() {
 const endTime = new Date(this.endTime);
 const nowTime = new Date();
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 let d = parseInt(leftTime / (24 * 60 * 60));
 let h = this.fORMate(parseInt((leftTime / (60 * 60)) % 24));
 let m = this.formate(parseInt((leftTime / 60) % 60));
 let s = this.formate(parseInt(leftTime % 60));
 if (leftTime <= 0) {
 this.flag = true;
 this.$emit("time-end");
 }
 this.day = d; //天
 this.hour = h; //时
 this.minute = m; //分
 this.second = s; //秒
 },
 formate(time) {
 if (time >= 10) {
 return time;
 } else {
 return `0${time}`;
 }
 },
}

2.父组件引用


<template>
 <div>
 <Times :endTime='timeEnd'></Times>
 </div> 
</template>

import Times from "@/components/time";
export default {
 name: "Home",
 data() {
 return {
 timeEnd: "2021-3-30 9:50" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30)
 },
 
 components: {
 Times,
 },
};

更多关于倒计时的文章请查看专题:《倒计时功能》

更多javascript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现倒计时功能

本文链接: https://www.lsjlt.com/news/121957.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现倒计时功能
    本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it...
    99+
    2022-11-11
    vue 倒计时
  • vue实现时间倒计时功能
    本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template> ...
    99+
    2022-11-12
    vue 倒计时
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
    Vue 倒计时
  • vue怎么实现时间倒计时功能
    本篇内容介绍了“vue怎么实现时间倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求:做一个剩余支付时间倒计时的效果效果图:代码:...
    99+
    2023-06-20
  • Handler实现倒计时功能
    本文实例为大家分享了Handler实现倒计时功能的具体代码,供大家参考,具体内容如下 1、需求 1.1 实现目标 当后台传递一个时间戳时,与当前系统时间做时间差,并转换为时分秒,作为...
    99+
    2022-11-12
    Handler 倒计时
  • Flutter实现倒计时功能
    本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte...
    99+
    2022-11-13
    Flutter 倒计时
  • Android实现时间倒计时功能
    本文实例为大家分享了Android实现时间倒计时功能展示的具体代码,供大家参考,具体内容如下效果展示MainActivity(主页面代码)public class MainActivity extends Activity { priva...
    99+
    2023-05-30
    android 倒计时 roi
  • 使用vue怎么实现一个倒计时功能
    这期内容当中小编将会给大家带来有关使用vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。通过父组件传入的结束时间减去当前日期得到剩余时间子组件部分<div clas...
    99+
    2023-06-14
  • Android 简单实现倒计时功能
    在 Android 中倒计时功能是比较常用的一个功能,比如短信验证码,付款倒计时等。实现方式有Handler、Thread 等,但是实现起来都有点麻烦,其实Android已经为...
    99+
    2022-06-06
    倒计时 Android
  • Android实现订单倒计时功能
    先上效果图 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <R...
    99+
    2022-06-06
    倒计时 Android
  • android实现倒计时功能代码
    效果图,每隔1秒,变换一下时间  xml: 代码如下: <RelativeLayout xmlns:android="http://schemas.andro...
    99+
    2022-06-06
    倒计时 Android
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码:<div id=...
    99+
    2022-10-19
    js
  • python实现简单倒计时功能
    使用python实现简单倒计时exe,供大家参考,具体内容如下 使用tkinter制作界面实现倒计时功能。 使用time.sleep(1)实现 秒级 倒计时 使用...
    99+
    2022-11-12
    python 倒计时
  • React Native 中实现倒计时功能
    目录正文首次实现最终实现示例正文 在 React Native,该如何实现一个倒计时功能呢? 首次实现 表面看来很简单,譬如像下面这样: const timer = useRef&...
    99+
    2022-11-13
    React Native倒计时 React Native
  • Android中CountDownTimer 实现倒计时功能
    CountDownTimerCountDownTimer 是android 自带的一个倒计时类,使用这个类可以很简单的实现 倒计时功能CountDownTimer 的实现方式 new CountDownTimer(6000,100...
    99+
    2023-05-31
    countdowntimer 倒计时 tim
  • Android怎样实现倒计时功能
    这篇文章主要为大家展示了“Android怎样实现倒计时功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android怎样实现倒计时功能”这篇文章吧。一. 已有倒计时方案存在的问题在开发倒计时功...
    99+
    2023-06-25
  • 如何实现vue验证码60秒倒计时功能
    小编给大家分享一下如何实现vue验证码60秒倒计时功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下html<...
    99+
    2022-10-19
    vue
  • vue怎么实现验证码60秒倒计时功能
    本文小编为大家详细介绍“vue怎么实现验证码60秒倒计时功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现验证码60秒倒计时功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。html代码如下:&l...
    99+
    2023-07-04
  • Android倒计时功能的实现代码
    好久没有写博客了,趁着年末,总结了下最近一年所遇到的一些技术问题,还有一些自定义控件,比如倒计时功能 首先倒计时的实现方式 1.Handler 2.Timer 3.RxJava...
    99+
    2022-06-06
    Android
  • Android基于CountDownTimer实现倒计时功能
    本文实例讲述了Android编程基于CountDownTimer实现倒计时功能的方法。分享给大家供大家参考,具体如下: 在逛论坛的时候,看到一个网友提问,说到了CountDow...
    99+
    2022-06-06
    倒计时 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作