文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我希望进度条在视口中填满或变为空，但只有一次

问我希望进度条在视口中填满或变为空，但只有一次
EN

Stack Overflow用户
提问于 2017-10-12 18:12:58
回答 3查看 815关注 0票数 0

我已经做了一些工作，并设法将动画放在进度条中。我还在代码中添加了wow.min.js和animate.css文件。进度条正在工作，增加批处理只工作一次，每次滚动窗口时，所有5 bars...but的减少批处理都会发生。如何克服这一点？我不知道为什么它不能在这里工作，js在我的系统中工作得很好。如果有人能指导一下..。

​

代码语言：javascript
复制
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
$(".progress-bar-fill2").each((i, el) => {
	var jel = $(el)
	jel.css({"width": '100%',"transition":"0s"});
	
	setTimeout( () => {
		console.log( jel.attr('data-val'),  {"width": jel.attr('data-val') + '%',"transition":"5s"})
		jel.css({"width": jel.attr('data-val') + '%',"transition":"5s"})
		
	}, 0)
})
});
代码语言：javascript
复制
.progress-bar {
    width: 100%;
    height: 50px;
    background: #e0e0e0;
    
}

.progress-bar-fill {
    display: block;
    height: 50px;
    background: #659cef;
	float:left;
    
    /*transition: width 250ms ease-in-out;*/
    transition: width 5s ease-in-out;
}
.progress-bar2 {
    width: 100%;
    height: 50px;
    background: #ffffff;
    
}

.progress-bar-fill2 {
    display: block;
    height: 50px;
    background: #659cef;
	float:left;
    
    
}
代码语言：javascript
复制
<div class="container" style=" align-center margin: auto; height: 750px;">
	
        
	<center><div class="container" style="width:50%; background-color:#ffffff; float: left; height: auto;">
	
        
		<h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black">
            </br>Increases
        </h3>

        <div class="progress_elements" style="width:80%">
            <div class="progress1 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Internal Customer Satisfaction</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
			<div class="progress2 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                           <b>Reporting Platform Capability</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress3 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Custom Metrics Table Capability</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress4">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Advanced Business Analysis Capability</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
			
			</br><div class="progress5 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Data Profiling Capability</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
        </div>
		
	</div></center>
	
	
	
	
	
	<center><div class="container" style="width:50%; background-color: #dddddd; float: right;  height:auto;">
		
		<h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black">
            </br>Decreases
        </h3>

        <div class="progress_elements" style="width: 80%; ">
            
			<div class="progress1 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Initial Cost</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="20" style="width: 10%"></span>
				</div>
            </div>
			
			<div class="progress2 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                           <b>Reoccurring Cost</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="0" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress3 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Implementation Time</b>
                        </p>
                    </div>
                    
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="10"style="width: 20%"></span>
				</div>
            </div>
			</div>
            
            <div class="progress4">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Reporting Dev Cost/Time</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="30"style="width: 8%;"></span>
				</div>
            </div>
			
			</br><div class="progress5 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>IT Request</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="08" style="width: 10%"></span>
				</div>
            </div>
			
            
        </div>
		
	</div></center>
	
	

		
    </div>
	
	</div>

​

​

代码语言：javascript
复制
<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Initial Cost
                            </p>
                        </div>
                        <div class="progress_value mbr-fonts-style display-7">
                            
                            
                        </div>
                    </div>
                    <progress class="progress progress-primary" max="100" value="15" style="width:100%">
                    </progress>
    </div>
    

<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Internal Customer Satisfaction
                            </p>
                        </div>
                        
                    </div>
                    <progress class="progress progress-primary" max="100" value="100" style="width:100%">
                    </progress>
    </div>

​

progress-bar
javascript
html
css
animation
EN

回答 3

Stack Overflow用户

发布于 2017-10-12 18:29:19

这可能会有帮助

​

代码语言：javascript
复制
function move() {
  var elem1 = document.getElementById("myBar1"); 
  var elem2 = document.getElementById("myBar2");
  var width = 30;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem1.style.width = width + '%'; 
      if( width<70)
      {
                elem2.style.width =(100 - width) + '%';
      
      }
    }
  }
}
代码语言：javascript
复制
#myProgress1,#myProgress2 {
  width: 100%;
  background-color: #ddd;
}

#myBar1{
  width: 30%;
  height: 30px;
  background-color: #4CAF50;
}

#myBar2 {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
代码语言：javascript
复制
<div id="myProgress1">
  <div id="myBar1"></div>
</div>
<br/>
<div id="myProgress2">
  <div id="myBar2"></div>
</div>
<br/>
<button onclick="move()">Click Me</button>

​

或者你也可以进行进度控制。

​

代码语言：javascript
复制
var elem1 = document.getElementById("progress1"); 
  var elem2 = document.getElementById("progress2");
  var width = 30;
  var id = setInterval(frame, 30); // adjust the speed of animation
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem1.value = width ; 
      if( width<70)      
      {
                elem2.value =(100 - width) ;
      
      }
    }
  }
代码语言：javascript
复制
<div class="title-wrap">
  <div class="progressbar-title mbr-fonts-style display-7">
    <p>
      Initial Cost
    </p>
  </div>                  
</div>

<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress>
<div class="title-wrap">
  <div class="progressbar-title mbr-fonts-style display-7">
    <p>
      Internal Customer Satisfaction
    </p>
  </div>                  
</div>
<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress>
<br/>

​

票数 1
EN

Stack Overflow用户

发布于 2017-10-12 18:31:51

首先，将id="progress1"和id="progress2"放在进度标记中，如下所示：

代码语言：javascript
复制
<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress>

<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress>

然后添加以下javascript代码：

代码语言：javascript
复制
<script>
   var progress1 = document.getElementById("progress1");
   var progress2 = document.getElementById("progress2");

   progress1.value = "100";
   progress2.value = "30";
</script>

您可以根据某些事件来操作进度值。

票数 0
EN

Stack Overflow用户

发布于 2017-10-12 18:32:37

您需要执行这些更新的js脚本。

仅作为示例-此处初始成本的每隔一秒进度条更新+1%

​

代码语言：javascript
复制
(function(){
  var action = function(){
    var initialCostProgressValue = $("#initial-cost").val();
    
    if(initialCostProgressValue >= 100){
      clearInterval(pbInterval);
      return;
    }
    
    $("#initial-cost").val($("#initial-cost").val() + 1);    
    
  };
  var pbInterval = setInterval(function() {
    action();
  }, 1500);
})()
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Initial Cost
                            </p>
                        </div>
                        <div class="progress_value mbr-fonts-style display-7">
                            
                            
                        </div>
                    </div>
                    <progress id="initial-cost" class="progress progress-primary" max="100" value="15" style="width:100%">
                    </progress>
    </div>
    

<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Internal Customer Satisfaction
                            </p>
                        </div>
                        
                    </div>
                    <progress  id="initernal-customer-satisfaction"  class="progress progress-primary" max="100" value="100" style="width:100%">
                    </progress>
    </div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46706999

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档