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

vue实现时间倒计时功能

2024-04-02 19:04:59 656人浏览 独家记忆
摘要

本文实例为大家分享了Vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template>

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

需求:

做一个剩余支付时间倒计时的效果

效果图:

代码:


<template>
 <div>剩余支付时间:{{count}}</div>
</template>
<script>
export default {
    data() {
        return {
            count: '', //倒计时
            seconds: 864000 // 10天的秒数
        }
    },
    mounted() {
        this.Time() //调用定时器
    },
    methods: {
        // 天 时 分 秒 格式化函数
        countDown() {
            let d = parseInt(this.seconds / (24 * 60 * 60))
            d = d < 10 ? "0" + d : d
            let h = parseInt(this.seconds / (60 * 60) % 24);
            h = h < 10 ? "0" + h : h
            let m = parseInt(this.seconds / 60 % 60);
            m = m < 10 ? "0" + m : m
            let s = parseInt(this.seconds % 60);
            s = s < 10 ? "0" + s : s
            this.count = d + '天' + h + '时' + m + '分' + s + '秒'
        },
        //定时器没过1秒参数减1
        Time() {
            setInterval(() => {
                this.seconds -= 1
                this.countDown()
            }, 1000)
        },
    }
}
</script>

时间的秒数可以根据自己的需求进行修改

再为大家分享一段代码:vue时分秒倒计时


countTime: function () {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date("2018-10-22 23:23:23");
        var end = endDate.getTime();
        //时间差
        var leftTime = end - now;
        //定义变量 d,h,m,s保存倒计时的时间
        if (leftTime >= 0) {
                    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                    this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                    this.m = Math.floor(leftTime / 1000 / 60 % 60);
                    this.s = Math.floor(leftTime / 1000 % 60);
         }
          console.log(this.s);
          //递归每秒调用countTime方法,显示动态时间效果
            setTimeout(this.countTime, 1000);
 }

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

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

--结束END--

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

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

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

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

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

下载Word文档
猜你喜欢
  • vue实现时间倒计时功能
    本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template> ...
    99+
    2022-11-12
  • vue怎么实现时间倒计时功能
    本篇内容介绍了“vue怎么实现时间倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求:做一个剩余支付时间倒计时的效果效果图:代码:...
    99+
    2023-06-20
  • Android实现时间倒计时功能
    本文实例为大家分享了Android实现时间倒计时功能展示的具体代码,供大家参考,具体内容如下效果展示MainActivity(主页面代码)public class MainActivity extends Activity { priva...
    99+
    2023-05-30
    android 倒计时 roi
  • vue实现倒计时功能
    本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it...
    99+
    2022-11-11
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
  • Handler实现倒计时功能
    本文实例为大家分享了Handler实现倒计时功能的具体代码,供大家参考,具体内容如下 1、需求 1.1 实现目标 当后台传递一个时间戳时,与当前系统时间做时间差,并转换为时分秒,作为...
    99+
    2022-11-12
  • Flutter实现倒计时功能
    本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte...
    99+
    2022-11-13
  • 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
  • python实现简单倒计时功能
    使用python实现简单倒计时exe,供大家参考,具体内容如下 使用tkinter制作界面实现倒计时功能。 使用time.sleep(1)实现 秒级 倒计时 使用...
    99+
    2022-11-12
  • 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怎么实现一个倒计时功能
    这期内容当中小编将会给大家带来有关使用vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。通过父组件传入的结束时间减去当前日期得到剩余时间子组件部分<div clas...
    99+
    2023-06-14
  • Linux用脚本实现“时分秒“倒计时功能
    1.怎样实现“时分秒“倒计时 在linux下,脚本的完成相对于C语言来说稍微随意一点,可以按照字的想法写,只要有逻辑就可以了。 示例: 注意: clean的功能 这个命令将会刷新屏幕,本质上只是让终端显示页向后翻...
    99+
    2022-06-04
    linux 时分秒倒计时 linux 倒计时
  • Android倒计时功能的实现代码
    好久没有写博客了,趁着年末,总结了下最近一年所遇到的一些技术问题,还有一些自定义控件,比如倒计时功能 首先倒计时的实现方式 1.Handler 2.Timer 3.RxJava...
    99+
    2022-06-06
    Android
  • Android基于CountDownTimer实现倒计时功能
    本文实例讲述了Android编程基于CountDownTimer实现倒计时功能的方法。分享给大家供大家参考,具体如下: 在逛论坛的时候,看到一个网友提问,说到了CountDow...
    99+
    2022-06-06
    倒计时 Android
  • Android利用Chronometer实现倒计时功能
    项目需要实现一个计时的功能,利用Chronometer虽然可以很方便的实现计时功能,但需要的却是一个倒计时控件。 百度了一下方法不少,倒计时的却没有,于是用Chronomete...
    99+
    2022-06-06
    倒计时 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作