开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在单击时暂停进度条？

在前端开发中，可以通过监听点击事件来实现在单击时暂停进度条。具体实现方式如下：

首先，在HTML中创建一个进度条元素，可以使用<progress>标签或者自定义样式的<div>元素来表示进度条。
使用JavaScript代码获取进度条元素，并添加点击事件监听器。
在点击事件处理函数中，通过修改进度条的属性或样式来实现暂停效果。可以使用CSS样式属性animation-play-state来控制进度条的动画状态。

以下是一个示例的实现代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #f1f1f1;
    position: relative;
  }
  .progress-bar span {
    display: block;
    height: 100%;
    background-color: #4CAF50;
    width: 0%;
    transition: width 0.5s;
    animation-name: progress;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
  }
  @keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
  }
</style>
</head>
<body>

<h1>点击暂停进度条</h1>

<div class="progress-bar">
  <span></span>
</div>

<script>
  var progressBar = document.querySelector('.progress-bar');
  var progress = document.querySelector('.progress-bar span');

  progressBar.addEventListener('click', function() {
    if (progress.style.animationPlayState === 'paused') {
      progress.style.animationPlayState = 'running';
    } else {
      progress.style.animationPlayState = 'paused';
    }
  });
</script>

</body>
</html>

上述代码中，通过CSS样式定义了一个进度条容器，使用<div>元素表示进度条，并使用<span>元素作为进度的实际显示，通过CSS动画控制<span>元素的宽度从0%到100%的变化。在JavaScript代码中，通过querySelector获取到进度条元素和进度元素，并添加了点击事件监听器。当进度条被点击时，通过切换animationPlayState属性的值来暂停或继续播放进度条动画。

在腾讯云的产品中，可以使用腾讯云的云函数（SCF）来部署上述代码，并且可以使用腾讯云提供的CDN（内容分发网络）加速静态资源的访问。具体的产品和链接如下：

腾讯云函数（SCF）：提供无服务器计算能力，可以快速部署和运行前端代码。产品介绍
腾讯云内容分发网络（CDN）：加速静态资源的访问，提供稳定、低延迟的内容分发服务。产品介绍

相关搜索:如何在单击弹出窗口时暂停视频如何在单击图标播放/暂停时打开音频单击按钮时程序不会暂停如何使进度条在悬停时立即暂停？如何在单击文本字段时显示列表，如搜索如何在单击搜索按钮时添加进度条如何在单击按钮时使进度条增加？斯威夫特如何在单击按钮时动态显示mat进度条更改播放按钮以在单击时暂停单击时暂停/播放视频不工作的javascript 暂停跟踪时，MediaStyle通知进度条保持前进API 30 单击按钮时启动不确定的进度条在Python的Turtle中，如何在等待单击事件时暂停我的程序？单击另一个音频元素时暂停音频 HTML CSS -使图标在单击时更改颜色(如链接)Jquery/JS进度条在单击按钮时更改类 python -如何在按空格键时暂停和取消暂停程序 Videojs :如何在点击时禁用播放/暂停？ARKit如何在脱离跟踪时暂停视频音频上的HTML5进度条-如何在单击时更改音频位置？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5 VideoAPI，打造自己的Web视频播放器

注意：audio和video元素必须同时包含开始和结束标签，不能使用

04

VBA实战技巧30：创建自定义的进度条1

使用VBA宏，可以自动执行重复、单调且有时非常无聊的任务。在某些情况下，这有可能将数小时的工作减少到几分钟或几秒钟。

01

闲来无事,倒腾了一个简单的silverlight视频播放器

近二日闲来无事，把silverlight的官方文档瞅了瞅，倒腾了一个简单的视频播放器，顺便也测试了下能否播放传说中的h.264，最终效果如下: http://images.24city.com/jim

09

基于Qt的音乐播放器（一）添加音频文件，播放音乐，更新进度条

和其他应用程序一样，我们希望通过点击文件并打开文件对话框，选择要播放的音频文件，下面我们来实现它。

05

信息提醒之对话框（AlertDialog + ProgressDialog）-更新中

Android中的对话框需要使用AlertDialog类来显示，主要用于显示提醒信息，不过这个对话框类可不仅仅能用来显示一些信息，我们可以在对话框中防止任何的控件，使其成为一个复杂且功能强大的用户接口。一个典型的例子就是使用AlertDialog做一个登录对话框。

01

基于Qt的音乐播放器（一）添加音频文件，播放音乐，更新进度条

和其他应用程序一样，我们希望通过点击文件并打开文件对话框，选择要播放的音频文件，下面我们来实现它。

06

HarmonyOS实战——ProgressBar进度条组件基本使用

【鸿蒙专栏，从入门到实战系列】： https://blog.csdn.net/qq_41684621/category_10128500.html 1. ProgressBar进度条组件组件说明：常见app中，下载进度条，完成任务的进度条等都会用到常见属性： [在这里插入图片描述] 常见方法： [在这里插入图片描述] 基本用法： <ProgressBar ohos:id="$+id:pb" ohos:height="match_content" oho

00

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏，这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》，翻译活动由http://www.wpmind.com/ 的站长小指发起，最终版本将会在http://www.wpmind.com/ 发布。希望更多的人参与到Windows Phone开发中来。之前，Jake已经在他的Blog中发布了他翻译的部分：Windows Phone 7用户界面框架。本人负责翻译的是W

07

我优化了进度条，页面性能竟提高了70%

大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。

03

我优化了进度条，页面性能竟提高了70%

大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。

02

我优化了进度条，页面性能竟提高了70%

最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次实习的公司带我的mentor亦是如此）。

04

易语言执行mysql命令_易语言执行sql进度条易语言mysql

我就让进度条每秒进一格，一百秒进度条满！用了一个时钟组件。.版本 2.程序集窗口程序集3.子程序 __启动窗口_创建完毕.子程序 _按钮1_被单击.如果 (编辑框1.内容 ≠ “” 或编辑框2.内容 ≠ “”) 时钟1.时钟周期＝ 1000.否则信息框 (“请输入内容”， 0， ).如果结束.子程序 _时钟1_周期事件.如果 (进度条1.位置＜进度条1.最大位置) 进度条1.位置＝进度条1.位置＋ 1.否则时钟1.时钟周期＝ 0 载入 (窗口1，，假).如果结束

02

【愚公系列】2023年12月 Winform控件专题 StatusStrip控件详解

Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。

02

think-cell chart系列19——任务甘特图

今天跟大家分享think-cell chart系列19——任务甘特图。甘特图在之前的教程中曾经讲过，当时是在excel中制作完成的，花费了相当多的时间和功夫。不过在think-cell chart

07

Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

1.点击按钮，进度条隐藏；再次点击，进度条出现。循环 2.点击按钮，水平进度条进度呈现并+10，此处进度条max为100。循环

01

HarmonyOS: 鸿蒙开发视频播放器，真简单！

现在这个直播时代，能开发一个视频播放也是很不错了，在鸿蒙里面开发视频播放就是简单。

01

Volantis的APlayer事件捕获

Volantis中使用APlayer作为音乐播放器，如果希望在播放音乐时网页能够做出响应，例如弹窗，就需要对播放事件进行捕获。

02

九、自定义工具箱【ArcGIS Python系列】

在创建Python工具箱之前，必须先创建脚本，当你熟悉编写Python脚本之后，制作工具箱就相当于交付产品到用户手上，用户可以根据工具提示访问该工具，并且可以在模型构建器使用，也可以作为脚本调用。

01

基于react的H5音频播放器

项目是基于React，镶嵌在页面。为此开发了组件audio.js。不过不管什么框架。逻辑都是一样的。

01

HTML简单音乐播放器「建议收藏」

通过JS部分的代码，动态给歌曲信息模块（id为player-content1）的DOM元素添加/移除active类名。设置CSS3动画过渡属性： transition:top 0.3s ease;来生成过渡时间0.3s,速度逐渐变慢的：上移动画效果：top:0px; ——>top:-85px; 下移动画效果： top:-85px; ——>top:0px;

03

小程序实践：基础内容之progress组件，及如何自定义实现一个环形进度条？

progress进度条组件是一个很完备的组件了，不需要修改，就可以大部分场景需求。有两点需要注意：

05

JS逐步教你做(自己版本)的视频播放器(我先声明,step我不懂是什么意思,所以没用)

html逻辑（注意点）: video里面的src代表点击才会看见的。poster代表一打开页面就能看见的东西. 写一个暂停图标的按钮和播放图标的按钮. 然后是在写一个进度条然后在写一个span用来表示结束的时间是多少.

03

OpenHarmony视频播放器

由于视频资源在项目中使用较为频繁，于是有了这个教程，本教程在最后也是实现了一个简单的播放器。

02

单元格里的进度条

选择单元格区域C4:V4。单击功能区“开始”选项卡“样式”组中的“条件格式——新建规则”，在“新建格式规则”对话框中，选择规则类型为“使用公式确定要设置格式的单元格”，在“为符合此公式的值设置格式”中输入公式：

01

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

在网页中观看和分享视频内容是一个很常见的功能，多年来，视频嵌入网页的方式发生了变化。现在，我们在现代浏览器中使用

02

PyQt5：QMediaplayer,QVideowidget播放视频

最近在一些关于视频管理类的项目，也还有python好久没有更新，所以做一个简单的视频播放器。

02

QQ 大更新！语音进度条来了，还有这 5 个新变化

来源 / 知晓程序（ID：zxcx0101）作者 / 刘凌歌 4月，QQ迎来了8.0.0 for iOS的更新。在其App Store的更新描述中可以看到，本次更新不仅升级了QQ的界面、优化了多人语音和转发消息的体验，语音消息还支持暂停和进度拖动了。我们第一时间对新版本QQ进行了一番体验，具体表现如何，就让我们接下来一起看看吧！界面和图标升级 1.登录界面在升级到8.0.0 for iOS版本后，你可以明显看到登录界面中，输入框由之前的横线变为了圆角。当你填写完毕账号密码后，输入框下

02

微信小程序中将图片与音乐制作成MV

最近一直在开发一个类似于小年糕的微信小程序，在开发制作MV功能时，花费了一些心思，其间主要遇到了以下一些问题点：

03

ghost备份和还原_cgi备份还原

用Ghost手动备份系统，主要是针对组装电脑而言，至于品牌机，它都会有自己的系统恢复工具，所以不在此列。现在很多人对在使用电脑中出现系统崩溃的故障，都会采取重装系统的办法。其实重装系统是一件比较麻烦的事。一切都得从头开始，尤其是安装驱动、应用程序等等，全部再装好需要花费较长的时间。所以在这里特别建议大家，在安装完操作系统之后，对系统进行手动备份。这样当系统出现故障不能正常启动时，就可以从光盘或U盘启动，然后将系统还原，省时省力。现在的操作系统镜像文件都提供有Ghost程序，可以将镜像文件刻录到光盘，也可以用老毛桃制作一个U盘启动盘。

02

MFC 进度条使用方法[通俗易懂]

新建一个对话框项目。添加控件“progress”“static”è改名了“进度”，添加两个BUTTON名字分别为“后退”“前进”，如下图：

05

基于Qt的音乐播放器（二）切换歌曲，调节音量，调节语速，暂停

2020博客之星年度总评选进行中：请为74号的狗子投上宝贵的一票！我的投票地址：点击为我投票

01

QT + FFmpeg 5.x + x264 + x265 + SDL2 音视频播放器

使用了FFmpeg 5.x + x264 + x265 + SDL2 完成了音视频的解析到播放;

03

快看！Python制作进度条，原来有这么多方法！

如果你之前没用过进度条，八成是觉得它会增加不必要的复杂性或者很难维护，其实不然。要加一个进度条其实只需要几行代码。在这几行代码中，我们可以看看如何在命令行脚本以及 PySimpleGUI UI 中添加进度条。

01

python生成器函数的应用场景举例---为copy过程添加进度条显示

生成器的特点是可以迭代，通过dir 查看生成器的方法, 其中有next ， send 方法，我们如果调用其next或者send方法都可以获得其下一个元素的值，我们可以用这种方式获得所有的生成器对应的元素，直到抛出 StopIteration 异常为止。一旦某个值已经输出了，那么我们是无法进行回溯的，就像一个“人生的单行道”一样，只能向前走，无法向后退。

01

Vue3开发：视频播放器video.js使用详解

Video.js是一个通用的在网页上嵌入视频播放器的JS库，比原生video标签有更强大的功能、更好的兼容性、更美观等优点。是一个比较流行的视频播放器，它的官网是https://videojs.com/

04

2019年的代码都写完了吗？不如做个Python进度条看看还剩多少

如果你之前没用过进度条，八成是觉得它会增加不必要的复杂性或者很难维护，其实不然。要加一个进度条其实只需要几行代码。在这几行代码中，我们可以看看如何在命令行脚本以及 PySimpleGUI UI 中添加进度条。

02

【程序猿硬核科普】解决Win7打开文件夹绿色进度条一直扫的问题 | 提升Win7打开文件夹速度

本篇文章将如何解决Win7打开文件夹绿色进度条一直扫的问题以及提升Win7打开文件夹速度的几种方法。

02

卧槽！Python竟然能做这样的进度条。。。。。

如果你之前没用过进度条，八成是觉得它会增加不必要的复杂性或者很难维护，其实不然。要加一个进度条其实只需要几行代码。在这几行代码中，我们可以看看如何在命令行脚本以及 PySimpleGUI UI 中添加进度条。

02

字节面试官：请你实现一个大文件上传和断点续传

原作者：yeyan1996原文链接：https://url.cn/5h66afn

03

Android使用Service播放音乐

像音乐这种耗时的和适合后台操作的应当放在Service中进行操作，而不是放在Activity，下面就介绍使用Service的音乐播放器

02

【H5 音乐播放实例】第四节音乐详情页制作 -音乐的播放和暂停

音乐的播放和暂停在播放按钮的点击事件里，不能手动去设置src，这样会导致音乐的暂停无法控制。而应该直接在audio标签内把src写好。改写playMusic方法：当暂停音乐的时候，同时也要把xu

04

【愚公系列】2022年08月微信小程序-progress进度条详解

在页面data中定义对应的数据，config参数的使用方法和之前api调用的时候完全相同，canvasSize默认是{ width: 400, height: 400 }，这种方式不同的是不需要传参数target: this，同时新增percentage（进度条的百分比）：

03

前端页面中进度条原理

1. 原定9月2日举办的Ceph Days China活动将推迟至12月份与OpenInfra Days China一同举办。相关后续筹备情况，请持续关注！--ceph开源社区

01

Vue3+TS的项目中使用NProgress进度条

NProgress 是一个轻量级的进度条组件，它的原理非常简单，就是页面启动的时候，构建一个方法，创建一个 div，用 fixed 定位，把这个 div 定位在页面最顶部。相信很多小伙伴都知道，一个页面或者一个接口的进度计算是非常复杂的，即便能够被计算出来，那么消耗的性能也是非常大的，得不偿失，这个时候虚拟进度条的作用就显现出来了。开始进入处理方法的时候，就启动 loading 的效果，一旦捕获到这个方法结束，就去释放它，为了防止过程比较生硬，释放后也会有一个进度条缓慢加载到 100%的过程。很多项目上都在使用，最近在重构 Vue3 的版本，所以打算直接把它引用在新的项目上。

02

大文件分片上传轻松拿捏

为了方便大家阅读和理解，我将以单个大文件上传为例，先简单描述下思路。 antd的上传组件有一个上传前的钩子，里面是可以拿到file信息，上传前将file切片，然后包装成一个一个的请求，放到一个数组，上传的的时候将数组的请求执行就可以了，执行完后发送一个合并请求，我没有用Promise.all去执行，而是2个2个的递归执行。

02

python字符串案例之文本进度条

Python 是一门易于学习、功能强大的编程语言。它提供了高效的高级数据结构，还能简单有效地面向对象编程。Python 优雅的语法和动态类型以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的理想语言。下面我们来介绍一下python通过字符串相关知识实现文本进度条。

04

js文件异步上传进度条

进度条的应用是为了显示的告诉用户文件上传了多少，对于小文件的上传基本上应用不到进度条。进度条主要应用于大文件的上传，在于告诉用户上传情况，不至于让用户无状态等待，增加了用户的体验，如果没有进度条，在上传过程中，用户不知道是不是卡死了，这种体验就很差了，下面我们来说一下如何在异步上传时显示进度条。

02

IOS开发之简单音频播放器

今天第一次接触IOS开发的UI部分，之前学OC的时候一直在模拟的使用Target-Action回调模式，今天算是真正的用了一次。为了熟悉一下基本控件的使用方法，和UI部分的回调，下面开发了一个特别简易的音频播放器，来犒劳一下自己这一天的UI学习成果。在用到UI的控件时如果很好的理解之前博客在OC中的Target-Action回调模式，感觉控件的用法会很顺手。下面的简易播放器没有用到多高深的技术，只是一些基本控件和View的使用。话不多说简单的介绍一下今天的音频播放器。在播放

06

移动端使用原生audio标签制作react 音频组件

需求要实现音频的播放如下图： html html代码如下：

03 QT基本控件和功能类

当在QT中，在已知类名的情况下，要了解类的构造函数常用属性及信号和槽常用api

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭