进度条取决于用户输入

关键词：

【中文标题】进度条取决于用户输入【英文标题】：Progress bar depending on user input 【发布时间】：2016-04-13 21:36:43 【问题描述】：

我在一个 div 中有六个问题，当用户回答问题时，进度条会根据已填写的输入量的百分比进行调整，并且具有模糊值。现在我觉得我有一个逻辑问题。在我的代码中 180 = 进度条容器的宽度除以 6 个问题。我正在尝试设置 i 以便您可以将 i 乘以 180 来动画进度条的宽度 0 * 180 如果第一个输入框已填写，则应为 0 。我不希望宽度为 0 我希望宽度为 180 所以这就是为什么我输入 arrayAnswerd =i+1; 但是当我从所有框中删除输入文本时，进度条不会下降到 0 宽度，因为我m 假设 arrayAnswerd =1。

请帮我制作这个进度条。我必须调整i，所以当没有填充任何内容时，宽度为 0 你在演示的开头看到了，但是 如果我输入 2 个输入并擦除它们，宽度保持在 180 我相信i不会回到 0

$(function()

  var nFilledIN = 0;
  var ratio = 0;
  var questions = $(".part input")
  var nQuestion = questions.length;
  var started = false;
  var arrayAnswerd;

  questions.on("change", function()
    questions.each(function(i)
      if($(this).val())
        arrayAnswerd =i+1;

      

    )
    console.log(arrayAnswerd)
    if(arrayAnswerd == 0)
      // ratio = 1/ nQuestion
      // arrayAnswerd = 1
    
    else
      // ratio = parseInt($(".progressQs").outerWidth()) / nQuestion 
    
    ratio = parseInt($(".progressQs").outerWidth()) / nQuestion

    console.log(ratio)

    $(".progressBarQs").animate(
      width : "+" + arrayAnswerd * ratio
    )

    if($(this).val())
      nFilledIN++
    else if (nFilledIN > 0)
      nFilledIN--
    
  )
)

background: #3EABC0;

.form
  /*width:80%;*/
  width: 1080px;
  margin: 0 auto;
  height:500px;
  background: #ccc;
  overflow: hidden;

.slider
  width: 300%;

.part
  width: 33.33%;
  display: inline-block;
  background: #e1f2f5;
  height: 500px;	
  float: left;

.part2
  background: blue;

.part3
  background: orange;

.buttonWrapper
  text-align: center;


.progressQs
  width: 1080px;
  background: #bbb;
  margin: 0 auto;
  /*padding: 10px 0px;*/
  /*overflow: hidden;*/
  position: relative;
  background: lightgreen;

.progressBarQs
  display: block;
  width: 0px;
  height: 20px;
  /*content: "";*/
  /*position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;*/
  background: limegreen;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-radius:0px 20px 20px 0px;
  /*overflow: hidden;*/
  position: relative;

.reportPrecentage
  display: inline-block;
  position: absolute;
  right: 50%;
  top: -50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: red;
  z-index: 2;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="progressQs">
  <span class="progressBarQs"><span class="reportPrecentage"></span></span>

</div>
<div class="form">
  <div class="slider">
    <div class="part part1">part1
      Name: <input type="text">
      Address: <input type="text">
      location: <input type="text">
      Gender: <input type="text">
      How Long: <input type="text">
      date: <input type="text">
    </div>
    <div class="part part2">part2</div>
    <div class="part part3">part3</div>
  </div>
</div>
<div class="buttonWrapper">
  <button id="left">Left</button>
  <button id="right">Right</button>
</div>

【问题讨论】：

【参考方案1】：

你在哪里

  questions.on("change", function()
    questions.each(function(i)
      if($(this).val())
        arrayAnswerd =i+1;
     

我愿意：

  questions.on("change", function()
    arrayAnswerd = 0;
    questions.each(function(i)
      if($(this).val())
        arrayAnswerd++;
      

与您的相似：

  if($(this).val())
    nFilledIN++
  else if (nFilledIN > 0)
    nFilledIN--
  

但我看不到您在任何地方都在使用nFilledIN...

【讨论】：

酷。所以每次更改时，我都会重置arrayAnswerd = 0，然后计算有多少输入具有值并将其乘以比率。糟透了，我没想过这样做。感谢您的回答

如何让进度条获取文本类型输入的值？

】如何让进度条获取文本类型输入的值？【英文标题】：HowdoImakeaprogressbargetthevalueofatext-typeinput?【发布时间】：2017-05-2509:35:56【问题描述】：我正在开发一个应用程序，其中用户必须在文本类型输入（或数字类型）中写入他们主... 查看详情

第二周进度条

所花时间（包括上课）20h代码行数210行博客量4篇解到的知识点做单元测试很有必要，设计代码的时候要考虑到单元测试，对于编代码量更大的工程的时候很有必要。做程序的时候要考虑到用户的实际需求，同时尽量满足用户要... 查看详情

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

1.打开MicrosoftVisualStudio2010,新建名字为【进度条】的程序。2.在新程序界面上放置合适的控件：包括，日志输出文本框控件；用于输入进度条长度的输入框；3个进度条的控制按钮，可以分别开始、暂停或者停止进度条的进度；添... 查看详情

如何在不可迭代的代码行上实现进度条？

...Python脚本中有几行代码需要20分钟到几个小时不等，具体取决于所读取文件的大小。我想知道是否可以实现一个进度条来跟踪完成进度。从我阅读的文档中，我了解到tqdm和progressbar2经常用于存在for循环 查看详情

用户窗体内的进度条

】用户窗体内的进度条【英文标题】：Progressbarinsideuserform【发布时间】：2019-01-2003:27:23【问题描述】：我正在尝试在用户窗体中创建一个进度条，而不是使用单独的进度条，因为如果它位于顶部或背景中，这似乎是不可靠的。... 查看详情

进度条填充表单输入

】进度条填充表单输入【英文标题】：Progressbarfillwithforminputs【发布时间】：2015-01-0815:56:13【问题描述】：我正在尝试让这个进度条正常工作，但我一直得到错误的结果。问题是当我填写第一个输入（无论输入什么）时，我得到6... 查看详情

用户的 SharpBox 进度条

】用户的SharpBox进度条【英文标题】：SharpBoxProgressBarfortheuser【发布时间】：2016-08-1723:08:30【问题描述】：我试图在上传文件期间向用户显示进度条。我可以通过下面的方法在后端获取百分比，但是我无法打印e.PercentageProgress返回... 查看详情

SwiftUI：如何根据滚动视图的用户当前滚动位置同步/更改进度条进度？

...SwiftUI：如何根据滚动视图的用户当前滚动位置同步/更改进度条进度？【英文标题】：SwiftUI:HowdoIsync/changeprogressbarprogressbasedonscrollview’susercurrentscrollposition?【发布时间】：2021-02-1822:19:56【问题描述】：我在ScrollView中有水平进度... 查看详情

在所有元素顶部显示全屏不确定进度条[重复]

】在所有元素顶部显示全屏不确定进度条[重复]【英文标题】：Showingfullscreenindeterminateprogressbarontopofallelements[duplicate]【发布时间】：2014-12-1416:51:51【问题描述】：我想在所有屏幕元素的顶部显示一个全屏的不确定进度条。我的用... 查看详情

具有多个不同输入的文件上传进度条（MVC）

】具有多个不同输入的文件上传进度条（MVC）【英文标题】：FileUploadProgressBarwithMultipleandDifferentInputs(MVC)【发布时间】：2020-04-3020:49:48【问题描述】：我在互联网上搜索了这个JavaScript和jQuery模板，用于文件上传进度条，它可以100... 查看详情

来自Task的tableview中的JavaFX更新进度条

】来自Task的tableview中的JavaFX更新进度条【英文标题】：JavaFXUpdateprogressbarintableviewfromTask【发布时间】：2013-05-1906:04:06【问题描述】：我知道Task有一个方法updateProgress，我需要将进度条绑定到任务，但是我不能这样做，因为我没... 查看详情

progressbar(进度条)

...引言：本节给大家带来的是Android基本UI控件中的ProgressBar(进度条)，ProgressBar的应用场景很多，比如用户登录时，后台在发请求，以及等待服务器返回信息，这个时候会用到进度条；或者当在进行一些比较耗时的操作，需要等待一... 查看详情

Android - 在 AsyncTask 执行时显示进度对话框

...调用一个发送电子邮件的Web服务，这可能需要5秒，具体取决于连接。这个想法是在发送邮件时向用户显示一条消息，以便它处于暂停状态并且无法执行任何操作这是我的课：privateclassTarea 查看详情

网页加载进度条

...的体验相当不好，所以，一般会在网页加载成功前，会以进度条的形式，给用户进行展示。让用户可以看到动画，知道网页正在加载中) 常见的方式有以下： 1.定时器的进度条（假的） <scripttype="text/javascript"> ... 查看详情

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

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

是否可以知道 ydn-db 的 put 操作的进度？

...初通过ydn-db的db.put将表填充到indexedDb需要很长时间，具体取决于数据量，我想向用户显示进度条。可以知道db.put操作的进度吗？【问题讨论】：【参考方案1】：它不会也不太可能实现该功能 查看详情

Java 主方法参数处理，取决于用户输入

】Java主方法参数处理，取决于用户输入【英文标题】：Javamainmethodargumenthandling,dependingonuserinput【发布时间】：2012-02-0717:55:04【问题描述】：我想知道如何比较传递给javamain方法的参数。egjavahello-i我尝试打印args[0]，它确实给了我-... 查看详情

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

一、简介        ProgressBar（进度条）是UI界面中一种非常实用的组件，通常用于向用户像是某个耗时操作完成的百分比。进度条可动态地显示进度，因此避免长时间地执行某个操作时，让用户感觉程... 查看详情