使用JavaScript怎么实现一个可控制的进度条

本篇文章给大家分享的是有关使用JavaScript怎么实现一个可控制的进度条，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

十载的宁晋网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整宁晋建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“宁晋网站设计”,“宁晋网站推广”以来，每个客户项目都认真落实执行。

var user_number = $("#user_number").val();
context.style.width = user_number+"px";

第二：百分比怎么计算呢？既然是百分比，就是颜色的宽度/div的宽度，那么颜色的宽度只要变化，那么百分比自然就变化了。

if(count !== Number(user_number)){
  /* 改变样式的宽度 */
  nercon.style.width = count+"px";
  /* count自加 */
  count++;
  /* 百分比的显示，保留两位小数 */
  text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
  }else{
  return false;
  }

第三的问题第二里面也就一起解答了！

看源码：

 
 
 
 
 .style_input{
 width: 3rem;
 margin-bottom: 2rem;
 }
 #context{
 height: 1.5rem;
 border: 1px solid black;
 float: left;
 border-radius:10px;
 }
 #ner_con{
 background-color: aqua;
 height: 100%;
 border-radius:10px;
 }
 #text_contest{
 height: 1.5rem;
 width: 3rem;
 float: left;
 margin-left: 0.3rem;
 }
 #pro_div{
 height: 1.5rem;
 width: 3rem;
 float: left;
 }