Vue--进度条

news2024/11/14 12:20:13

挺有意思的,大家可以玩一玩儿:

 前端代码如下:可以直接运行的代码。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优美的进度条</title>
  <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>
</head>
<body>
  <div id="app">

    <!-- 进度条显示 -->
    <div class="progress">
      <div class="inner" :style="{ width: percent + '%'}">
        <span> {{percent}} %</span>
      </div>
    </div>

    <!-- 点击监听 -->
    <button v-if="this.percent > 0" @click="add(-10)">进度减10%</button>
    <button v-if="this.percent < 100" @click="add(10)">进度加10%</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    
    const app = new Vue({
      el: '#app',
      data: {
        percent: 50
      },
      methods: {
        add (a) {
            this.percent += a;
            //写个异步函数
            if(this.percent === 100) {
                setTimeout(function(){
                    alert('进度条完成啦!')
                }, 500)
            }
            
        }
      }
    })
  </script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【项目】BlogTest(Web自动化)

个人博客Web自动化 一、项目背景二、项目功能三、测试计划功能测试自动化测试 一、项目背景 个人 博客系统采用前后端的方法来实现&#xff0c;同时使用了SpringBoot、MySQL、Ajax等相关技术&#xff0c;同时部署到云服务器上。前端主要有四个 页面构成&#xff1a;登录页、列…

Mac上传项目源代码到GitHub的修改更新

Mac上传项目源代码到GitHub的修改更新 最近在学习把代码上传到github&#xff0c;不得不说&#xff0c;真的还挺方便 这是一个关于怎样更新项目代码的教程。 首先&#xff0c;在本地终端命令行打开至项目文件下第一步&#xff1a;查看当前的git仓库状态&#xff0c;可以使用git…

个人博客自动化测试

BlogWebAutoTest 前言一、脑图二、编写代码三、代码测试结果 前言 1.针对个人博客进行测试&#xff0c;个人博客主要有四个页面构成&#xff1a;登录页、列表页、详情页和编辑页&#xff0c;主要功能包括&#xff1a;登录、写博客、删除博客、修改博客、查看详情以及注销等功能…

java面向对象——继承以及super关键字

继承的概念 1. 被继承的类称为父类&#xff08;超类&#xff09;&#xff0c;继承父类的类都称为子类&#xff08;派生类&#xff09; 2. 继承是指一个对象直接使用另一个对象的属性和方法&#xff0c;但是能继承非私有的属性和方法&#xff1b;(1) 构造方法不能被继承。(2) 但…

关于查看处理端口号和进程[linux]

查看端口号 lsof -i:端口号如果-bash: lsof: 未找到命令那我们可以执行yum install lsof 删除端口号进程 一般我们都会使用kill命令 kill -l#列出所有可用信号1 (HUP)&#xff1a;重新加载进程。9 (KILL)&#xff1a;杀死一个进程。15 (TERM)&#xff1a;正常停止一个进程。 …

代码随想录算法训练营day31 | 贪心问题:455. 分发饼干,53. 最大子数组和

目录 455. 分发饼干 ​​​​​​376. 摆动序列 53. 最大子数组和 455. 分发饼干 类型&#xff1a;贪心 难度&#xff1a;medium 思路&#xff1a; 记得先排序&#xff0c;用饼干去满足小孩。 代码&#xff1a; class Solution {public int findContentChildren(int[] g…

从零开始 Spring Cloud 12:Sentinel

从零开始 Spring Cloud 12&#xff1a;Sentinel 1.初识 Sentinel 1.1雪崩问题 1.1.1什么是雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 如图&#xff0c;如果服务提供者I发生了故障&#xff0c;当前的应用的部分…

YOLOv5改进系列(22)——替换主干网络之MobileViTv1(一种轻量级的、通用的移动设备 ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制

Linux 一个简单的多线程程序

一个简单的多线程程序 编写一个简单的多线程程序 代码如下&#xff1a; 运行结果&#xff1a; 出现这样的运行结果是因为主函数直接就运行完了&#xff0c;直接5次循环就结束了&#xff0c;线程函数还没有来得及执行&#xff0c;整个进程就已经结束了。因为主函数退出之后系统…

MySQL卸载-Linux版

MySQL卸载-Linux版 停止MySQL服务 systemctl stop mysqld 查询MySQL的安装文件 rpm -qa | grep -i mysql 卸载上述查询出来的所有的MySQL安装包 rpm -e mysql-community-client-plugins-8.0.26-1.el7.x86_64 --nodeps ​ rpm -e mysql-community-server-8.0.26-1.el7.x86_64 -…

磁盘满了怎么办?实用小技巧,做不做测试都非常好用!

♥ 前 言 工作了多年的测试&#xff0c;应该多少都会遇到磁盘空间不够的情况&#xff0c;比方你现在正在用的测试环境&#xff0c;因为要测试&#xff0c;所以&#xff0c;项目一直启动&#xff0c;那么就会一直在写日志&#xff0c;如果不定期清理日志&#xff0c;随着时间…

第一百三十三天学习记录:数据结构与算法基础:串、数组和广义表(串Ⅱ)(王卓教学视频)

注&#xff1a;在之前学习C语言的时候&#xff0c;了解过这一块。其中对KMP算法进行了自学&#xff0c;前面的学习记录也有提到过。这一次根据视频教学再系统性的学习学习一次。 串的模式匹配算法 KMP算法

漏洞指北-VulFocus靶场专栏-初级01

漏洞指北-VulFocus靶场专栏-初级 初级001 &#x1f338;海洋CMS代码执行&#xff08;CNVD-2020-22721&#x1f338;step1&#xff1a;进入后台页面 账号密码&#xff1a;admin amdinstep2&#xff1a;点击系统&#xff0c;点击后台IP安全设置,关闭step3 启动burpsuite&#xff…

Yolo算法与ChatGPT互通,这功能是真的强大!

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID&#xff5c;计算机视觉研究院 学习群&#xff5c;扫码在主页获取加入方式 参考地址&#xff1a;https://github.com/ultralytics/ultralytics 计算机视觉研究院专栏 Column of Computer Vision Institute 现…

深入浅出解析Stable Diffusion XL完整核心基础知识 | 【算法兵器谱】

Rocky Ding 公众号&#xff1a;WeThinkIn 写在前面 【算法兵器谱】栏目专注分享AI行业中的前沿/经典/必备的模型&论文&#xff0c;并对具备划时代意义的模型&论文进行全方位系统的解析&#xff0c;比如Rocky之前出品的爆款文章Make YOLO Great Again系列。也欢迎大家提…

计网第三章(数据链路层)(三)

一、点对点协议PPP 在第一篇里有提到数据链路层的信道分为两种&#xff1a;点对点信道和广播信道。 PPP协议就属于点对点信道上的协议。 如果对前面数据链路层的三个基本问题了解的比较透彻&#xff0c;那么这一块很多东西都很好理解。 从考试的角度来讲&#xff0c;PPP协议…

回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计…

RabbitMq-2安装与配置

Rabbitmq的安装 1.上传资源 注意&#xff1a;rabbitmq的版本必须与erlang编译器的版本适配 2.安装依赖环境 //打开虚拟机 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel tk tc xz3.安装erlan…

OpenCV笔记之solvePnP函数和calibrateCamera函数对比

OpenCV笔记之solvePnP函数和calibrateCamera函数对比 文章目录 OpenCV笔记之solvePnP函数和calibrateCamera函数对比1.cv::solvePnP2.cv::solvePnP函数的用途和工作原理3.cv::solvePnP背后的数学方程式4.cv::SOLVEPNP_ITERATIVE、cv::SOLVEPNP_EPNP、cv::SOLVEPNP_P3P5.一个固定…

AI项目二:基于mediapipe的虚拟绘画

若该文为原创文章&#xff0c;转载请注明原文出处。 一、项目介绍 随着人工智能时代的到来&#xff0c;许多技术得到了空前的发展&#xff0c;让人们更加认识到了线上虚拟技术的强大。 通过mediapipe识别手的关键点&#xff0c;检测中指&#xff0c;实现隔空画画的操作。 通…