如何基于vue实现倒计时效果

如何基于vue实现倒计时效果

  • 基于vue2 + element
  • 实现画面效果
  • 代码

基于vue2 + element

实现画面效果

在这里插入图片描述

代码

<template>
    <div>
        <div class="Box">
            <div style="position: relative;">
                <el-progress type="circle" :width="300" :percentage="percentage" :show-text="false"></el-progress>
                <div class="time">
                    <h2 v-if="countdown > 0">倒计时{{ countdown }}秒</h2>
                    <h2 v-else>倒计时结束</h2>
                </div>
            </div>
            <div style="margin-top: 10px;">
                <el-tag @click="chooseTime(item.num)" style="margin-left: 10px;" v-for="(item, index) in timeList"
                    :key="index">
                    {{ item.name }}
                </el-tag>
            </div>
            <el-button type="primary" v-if="!is_pause" style="margin-top: 30px;" @click="timeFn">开始</el-button>
            <el-button type="danger" v-if="is_pause" style="margin-top: 30px;" @click="pauseFn">暂停</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            countdown: 60,//倒计时
            countdownNum: 60,
            timer: null,//定时器
            is_pause: false,//是否暂停
            percentage: 100,//圆环百分比
            timeList: [
                {
                    name: '10秒',
                    num: 10
                },
                {
                    name: '30秒',
                    num: 30
                },
                {
                    name: '1分钟',
                    num: 60
                },
                {
                    name: '2分钟',
                    num: 120
                },
                {
                    name: '5分钟',
                    num: 300
                },
            ]
        }
    },
    methods: {
        //开始倒计时
        timeFn() {
            this.is_pause = true
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                    // console.log('打印', this.countdown / this.countdownNum)
                    this.percentage = (this.countdown / this.countdownNum).toFixed(2) * 100  //计算圆环百分比
                } else {
                    clearInterval(this.timer);
                    // 倒计时结束后需要执行的操作
                    this.is_pause = false
                }
            }, 1000);
        },
        //暂停倒计时
        pauseFn() {
            clearInterval(this.timer);
            this.is_pause = false
        },
        //选择时间
        chooseTime(num) {
            this.percentage = 100
            this.countdown = num
            this.countdownNum = num
            this.is_pause = false
            clearInterval(this.timer);
        }
    }
}

</script>

<style scoped>
.Box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 450px;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.Box .time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/15948.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用注解实现REDIS分布式锁

一、业务背景 有些业务请求&#xff0c;属于耗时操作&#xff0c;需要加锁&#xff0c;防止后续的并发操作&#xff0c;同时对数据库的数据进行操作&#xff0c;需要避免对之前的业务造成影响。 二、分析流程 使用 Redis 作为分布式锁&#xff0c;将锁的状态放到 Redis 统一…

基于SpringBoot+Vue+Java的社区医院管理服务系统(附源码+数据库)

摘 要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括社区医院管理服务系统的网络应用&#xff0c;在外国线上管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。社区医院管理服务系统具有社区…

一道经典的小学数学题,和它背后的贪心算法(35)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 欢迎和猫妹一起&#xff0c;趣味学Python。 今日主题 这个五一小长假&#xff0c;你玩得怎么样&#xff1f; 今天&#xff0c;咱们先做一道经典的小学数学题&#xff0c;…

智慧物流信息系统开发需具备哪些功能?

智慧物流软件开发公司在制作管理系统的时候&#xff0c;需要具备的功能有哪些呢&#xff1f; 一、采集跟踪功能。 &#xff08;1&#xff09;、信息采集&#xff1a;信息采集跟踪系统是智能物流系统的重要组成部分。物流信息采集系统主要由RFID射频识别系统和Savan…

2022年度项目管理软件排名揭晓:哪些软件在市场中脱颖而出?

在项目管理软件的选择过程中&#xff0c;用户会倾向于参考一些软件排名来辅助自己进行选择。软件排名方面推荐参考G2&#xff0c;一个国外的靠谱软件评测网站&#xff0c;类似于软件版的“大众点评”&#xff0c;软件评价来自于真实用户&#xff0c;网站通过多维度的算法&#…

JAVA入坑之GUI编程

一、相关概述 GUI编程是指通过图形化的方式来实现计算机程序的编写&#xff0c;它可以让用户通过鼠标、键盘等设备来操作计算机&#xff0c;而不是通过命令行来输入指令。在Java中&#xff0c;GUI编程主要使用的是Swing和AWT两种技术 二、AWT 2.1介绍 AWT是Java提供的用来建立…

八部门联合推动IPv6创新发展 知道创宇助力IPv6快速安全改造

近日&#xff0c;工业和信息化部、中央网信办、国家发展改革委、教育部、交通运输部、人民银行、国务院国资委、国家能源局等八部门联合印发《关于推进IPv6技术演进和应用创新发展的实施意见》&#xff08;以下简称“《实施意见》”&#xff09;&#xff0c;提出到2025年底&…

密歇根大学Python 系列之三:Python 数据科学应用项目

Python在数据科学领域的应用已经成为了趋势&#xff0c;同时也在不断地发展和演化。对于从事数据科学相关工作的从业者来说&#xff0c;熟练掌握Python已经成为了必备技能之一。而对于其他从业者来说&#xff0c;了解Python在数据科学领域的应用也可以帮助他们更好地理解数据科…

必知的Facebook广告兴趣定位技巧,更准确地找到目标受众

在Facebook广告投放中&#xff0c;兴趣定位是非常重要的一环。兴趣定位不仅可以帮助我们找到我们想要的目标受众&#xff0c;还可以帮助我们避免一些常见的坑。今天&#xff0c;就让我们一起来看看必知的Facebook广告兴趣定位技巧&#xff0c;更准确地找到目标受众。 1.不要只关…

pwm调节亮度

文章目录 运行环境&#xff1a;1.1 pwm1)占空比2)A板原理图3)PE11引脚配置4)定时器Timers配置 2.1代码解释1)定时器1初始化函数2)启动定时器中断3)启动PWM/设置占空比4)launch设置5) 编译调试 3.1实验效果 运行环境&#xff1a; ubuntu18.04.melodic 宏基暗影骑士笔记本 stm32…

VSCode 上的 swift 开发配置

安装Xcode和VsCode 在下列网址下载安装即可 VsCode: https://code.visualstudio.com/ Xcode:https://developer.apple.com/xcode/resources/ 或者apptore 打开xcode要求安装的东西都允许安装一下 启用 Swift 语言支持 确保你已经安装了 Xcode 和 VSCode。这是开始运行的最简…

爬虫(requsets)笔记

1、request_基本使用 pip install requests -i https://pypi.douban.com/simple 一个类型六个属性 r.text 获取网站源码 r.encoding 访问或定制编码方式r.url 获取请求的urlr.content 响应的字节类型r.status_code 响应的状态码r.headers 响应的头信息 import requestsurl…

【C++入门第四期】类和对象 ( 上 )

前言类的使用类的定义类的两种定义方式&#xff1a;成员变量名的定义建议 类的访问限定符类的作用域类的实列化如何计算类的大小结构体内存对齐规则 this指针this指针的特性 前言 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过…

2.2 定点加法 减法运算

学习前的建议 以下是一些学习定点加法和减法运算的建议&#xff1a; 掌握定点数的表示方法&#xff1a;在进行定点加法和减法运算之前&#xff0c;需要先了解定点数的表示方法&#xff0c;包括定点数的位数、小数点位置以及符号位等信息。 理解定点加法和减法的原理&#xf…

五、C++内存管理机制 —— primitives(侯捷)

侯捷 C八部曲笔记汇总 - - - 持续更新 ! ! ! 一、C 面向对象高级开发 1、C面向对象高级编程(上) 2、C面向对象高级编程(下) 二、STL 标准库和泛型编程 1、分配器、序列式容器 2、关联式容器 3、迭代器、 算法、仿函数 4、适配器、补充 三、C 设计模式 四、C 新标准 五、C 内存管…

微服务---分布式事务Seata(XA,AT,TCC,SAGA模式基本使用)

分布式事务 1.分布式事务问题 1.1.本地事务 本地事务&#xff0c;也就是传统的单机事务。在传统数据库事务中&#xff0c;必须要满足四个原则&#xff1a; 1.2.分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构下&#xff0c;产生的事务&#xff0c…

2023牛客五一集训派对day2部分题解

D Duration DDuration 题目大意 给你两个 AA:BB:CC 格式的时间&#xff0c;请你计算它们直接的时间插值&#xff08;秒&#xff09; 解题思路 模拟 代码示例 #include<bits/stdc.h> using namespace std;int h, m, s;int main(){scanf("%d:%d:%d", &…

跨域问题解决方案

什么是跨域问题 跨域问题本质上是由浏览器的同源策略造成的&#xff0c;是浏览器对javascript施加的安全限制。 它指的服务A对服务B发起请求时&#xff0c;如果传输协议&#xff08;http、https&#xff09;、ip 地址&#xff08;域名&#xff09;、端口号有任意一个不同&…

一键轻松拥有自己专属的 ChatGPT 网页版,搭建一个私人的可随时随地访问的ChatGPT网站

前言 ChatGPT是一种基于Transformer架构的自然语言处理模型&#xff0c;由OpenAI开发。GPT是“Generative Pre-trained Transformer”的缩写&#xff0c;意为“预训练生成式Transformer模型”。 ChatGPT模型是一种无监督学习模型&#xff0c;它可以在大规模文本数据上进行预训…

『Linux』第九讲:Linux多线程详解(二)_ 线程控制

「前言」文章是关于Linux多线程方面的知识&#xff0c;上一篇是 Linux多线程详解&#xff08;一&#xff09;&#xff0c;今天这篇是 Linux多线程详解&#xff08;二&#xff09;&#xff0c;讲解会比较细&#xff0c;下面开始&#xff01; 「归属专栏」Linux系统编程 「笔者」…