进度条，最大值并重置为 100%

关键词：

【中文标题】进度条，最大值并重置为 100%【英文标题】：Progress bar, max and reset on 100% 【发布时间】：2017-11-28 13:47:47 【问题描述】：

我正在处理连接到 sql 中的 XP 和 MAX XP 的进度条。每次单击按钮时，您都会获得 1 xp，最大 xp 为 10。我希望当用户达到 100% XP 时，它应该重置回 0%。如果您知道如何使用“重置”来增加在这种情况下的值，那么用户的级别应该在 100% 重置时将他的当前级别 + 1。

我通过这段代码每次点击插入 1 xp：

$sql = "UPDATE progression SET xp=(xp + 1) WHERE username='$username' LIMIT 1";

我通过使 1 xp = 到该代码的 10% 条来创建 100% xp 条值：

$percent = intval($resultprogression[0]['xp']*100/$resultprogression[0]['max xp']);

我通过这段代码在 html/css 中输出：

<div class="experience-bar-container">
        <div id="value" style="width:<?php echo $percent ?>%;"></div>
        <h3>XP: <span><?php echo $percent ?>%</span></h3>
</div>


div#value 
   display: block;
   position: absolute;
   z-index: 2;
   height: 19%;
   background: red;
   left: 0;
 

【问题讨论】：

你试过在控制台调试js代码吗？ 我建议另一种方法：不要保存进度，而是保存 XP 和当前级别。查询当前经验值和等级后，根据等级计算经验值和进度。 @mrksr 为什么保存进度也是个坏主意？目前我正在保存级别、xp 和 max xp。你介意展示你的想法以及为什么它更好吗？谢谢 首先，让应用程序而不是数据库层进行计算是一种惯例。这应该用于保存和检索数据，这使您的应用程序更易于理解、调试等。如果你只是保存 xp 和当前等级，你不需要重置任何东西，只需添加更多 xp 和等级，这是微不足道的 sql。 ;-) 【参考方案1】：

你必须使用 js。 解决方案：在进度 div 中添加数据属性以存储进度值：

<div class="experience-bar-container">
  <div id="value" data-value="<?php echo $percent ?>" style="width:<?php echo $percent ?>%;"></div>
  <h3>XP: <span id="xpPercent"><?php echo $percent ?>%</span></h3>
  <button class="xpButton" id="minus">-</button>
  <button class="xpButton" id="plus">+</button>
</div>

然后在按钮上添加侦听器，使用数据属性值更新条形宽度：

var progress = document.getElementById("value");
var xpPercent = document.getElementById("xpPercent");

document.getElementById("minus").addEventListener("click", function() 
  var newValue = parseInt(progress.getAttribute('data-value')) - 10;
  update(newValue);
);
document.getElementById("plus").addEventListener("click", function() 
  var newValue = parseInt(progress.getAttribute('data-value')) + 10;
  update(newValue);
);

“更新”函数检查进度，并在需要时调用重置函数，该函数调用 dbupdate 函数

function update(newValue) 
  progress.style.width = newValue + '%';
  progress.setAttribute('data-value', newValue);
  xpPercent.innerText = newValue + '%';
  if (newValue === 100) 
    reset();
  
:

function reset() 
  progress.style.width = '0%';
  progress.setAttribute('data-value', 0);
  xpPercent.innerText = '0%';
  dbUpdate();


function dbUpdate() 
  // do Ajax stuff to update user's level

https://jsfiddle.net/qpg7t603/1/

如果你不打算支持 IE10，你应该看看进度标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Progress

【讨论】：

有没有办法在值增加时让引导进度条动画，但在重置为 0 时没有？

】有没有办法在值增加时让引导进度条动画，但在重置为0时没有？【英文标题】：Isthereawaytohaveabootstrapprogressbaranimatewhenincreasinginvalue,butnotwhenresettingto0?【发布时间】：2015-04-1502:32:33【问题描述】：如果我有一个引导进度条从0%循... 查看详情

uploadifive.js怎么去掉进度条

参考技术AUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive中上传完毕后进度条自动消失 参考技术BUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive... 查看详情

使用引导进度条以模态显示上传进度

】使用引导进度条以模态显示上传进度【英文标题】：DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】：2015-04-2003:01:02【问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情

c#进度条怎么用/c#progressbar的用法

...止。4.添加按钮【开始】的代码设置进度条的最小值是0，最大值是用户输入的数值，当前进度为0；设置timer开始运行。添加按钮【暂停/继续】的代码如果timer状态为启用，则停止timer；如果timer状态为停止，则重新开始timer。添加... 查看详情

基于jquery的音乐播放器进度条插件

　　自己基于豆瓣FM的ui仿写qq音乐时，基于Jquery手写的进度条插件，效果图如下：　　　　主要特色：　　　　①可自适应挂载元素的宽度，也可以自己设置进度条宽度；　　　　②支持部分默认参数修改（具体见使用说明）；... 查看详情

AngularJS - 进度条为 100% 后重新加载页面 5 秒

】AngularJS-进度条为100%后重新加载页面5秒【英文标题】：AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】：2019-10-1801:38:26【问题描述】：我想在进度条达到100%后5秒后重新加载页面我的代码是：<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情

js控制进度条到达100%跳转界面一

进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：<!DOCTYPEhtml><h... 查看详情

Swift Progress View 动画使进度条超过 100%

】SwiftProgressView动画使进度条超过100%【英文标题】：SwiftProgressViewanimationmakesthebargofurtherthan100%【发布时间】：2017-06-0618:52:18【问题描述】：当为ProgressView使用动画时，如果我让动画用完，它完全可以正常工作，但如果我在动画仍... 查看详情

pyqt5之进度条：qprogressbar(代码片段)

...或者垂直的进度条，可以通过设置进度条的最小值、最大值和当前值显示进度，最小值和最大值默认分别为0和99。常用方法setRange()：设置进度条的取值范围(最小值和最大值)setMinimum()：设置进度条的最小值setFont():... 查看详情

达到/设置某个值后如何重置 PYQT5 进度条？

】达到/设置某个值后如何重置PYQT5进度条？【英文标题】：HowtoresetaPYQT5progressbaronceacertainvaluehasbeenreached/set?【发布时间】：2020-07-2014:14:35【问题描述】：我目前正在创建将一些数据分析脚本联系在一起的基本GUI。这些脚本可能需... 查看详情

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是... 查看详情

PyQt 启动后进度跃升至 100%

】PyQt启动后进度跃升至100%【英文标题】：PyQtprogressjumpsto100%afteritstarts【发布时间】：2018-04-0409:18:28【问题描述】：当我在doWork方法中运行代码时，通过单击button1，进度条按预期工作。但是，当我将列表从其他方法（即btn2、btn3... 查看详情

css3圆圈怎么加载数据从1%-100%

HTML代码HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：<divclass="wrapper"> <divclass="load-bar">  <divclass="load-bar-inner"data-loading="0"><spanid="counter"></span></div> </div> <h1>... 查看详情

androidseekbar使用(代码片段)

...f1a;二、常用属性和方法属性名含义progress设置该进度条的最大值progressDrawable自定义drawable显示secondaryProgress定义二级进度值，值介于0到max。该进度在主进度和背景之间。比如用于网络播放视频时，二级进度用于表示缓冲... 查看详情

正确使用进度条

...喜欢我的代码的一点是，我必须通过所有文件来设置栏的最大值……然后我再次通过相同的过程来复制文件。如果不这样做，我就是想不出一种方法来确保在酒吧中顺利进行。我首先必须知道最大值对吗？还是有什么诀窍？代码... 查看详情

android基础知识4-3.7progressbar（进度条）详解

...方法属性名含义style设置进度条的风格max设置该进度条的最大值maxHeight进度Widget最大高miniHeight进度Widget最小高maxWidth进度Widget最大宽minWidth进度Widget最小宽progress设置该进度条的已完成进度值progressDrawable自定义drawable显示indetemi 查看详情

winform实现单击按钮后显示进度条或等待窗口

参考技术A以datagridview为例子：for(inti=0;i<datagridview.rows.count;i++)设置progressBar的最大值为datagridview.rows.count;设置progressBar.Value=i; 参考技术B做进度条或者等待窗口的时候是需要用多线程的 查看详情

用js写一个网页进度条

一、基本思路为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定... 查看详情