JS实现可控制的进度条


Posted in Javascript onMarch 25, 2020

写在前面

进度条一直以来都是很多地方都可以用的,那么很多的时候其实我们都是自己在网上找代码,直接使用的,很少有人自己写源码的,今天呢我们就简单的实现一个进度条的效果,没有做美化,喜欢做美化的可以自己做一下美化。

源码已经放到Github上:进度条源码

一如既往的看效果:

JS实现可控制的进度条

好吧,效果还是一如既往的丑,简单的说一下怎么实现这样的效果,还是和之前一样我们分析一下难点在哪?

第一:进度条是生成的,那么就意味着div的宽度是不定的。

第二:百分比是动态的,就意味着是计算出来的。

第三:每次的改变,百分比都要自己计算出来,说明公式里面的数据是变量。

只要解决这三个问题,这个进度条就解决了,至于颜色怎么改变这些就不是什么难点了。

首先怎么是div的宽度不固定呢?其实也不难,只要我们根据用户输入的长度来改变宽度就可了,拿到用户输入的数据,将数据的值赋予样式的款就行了!

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;
  }

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

看源码:

<!DOCTYPE html>
<!-- 
 aim:csdn example
 date:2018-09
 author:clearlove
 bug:0%
 environment:osx
 introduce:Progress bar introduction
 -->
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style type="text/css">
 .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;
 }
 </style>
 <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <input type="number" name="" id="user_number" value="" class="style_input"/>
 <input type="button" name="" id="" value="生成" οnclick="change()"/>
 
 <div id="">
 <div id="context">
 <div id="ner_con">
 </div>
 </div>
 <div id="text_contest">
 </div>
 </div>
 <script type="text/javascript">
 var count = 1;
 var screewidth = document.body.clientWidth;
 function change(){
  /* 拿到ID以改变样式 */
  var nercon = document.getElementById("ner_con");
  var context = document.getElementById("context");
  var text_contest = document.getElementById("text_contest");
  var user_number = $("#user_number").val();
  /* 判断一下是不是超过了可见区域 */
  if(Number(user_number)>=(screewidth/2)){
  console.log(screewidth);
  alert("输入过长,请重新输入!");
  return false;
  }
  else{
  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;
  }
  setTimeout("change()",100);
  }
  
 }
 </script>
 </body>
</html>

PS:这里仔细的人可能已经看出来了,我没有做过多的校验,没有判断用户输入的是不是空就触发函数,这些知道就行了,自己写的时候不要忘记加上,不然会出bug!

不要忘记引入jquery

谢谢阅读

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
js实现简单进度条效果
Mar 25 #Javascript
JavaScript实现简单进度条效果
Mar 25 #Javascript
JavaScript实现随机点名程序
Mar 25 #Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
JS实现网页时钟特效
Mar 25 #Javascript
js实现小时钟效果
Mar 25 #Javascript
vue页面更新patch的实现示例
Mar 25 #Javascript
You might like
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
自荐信模版
2013/10/24 职场文书
社区健康教育实施方案
2014/03/18 职场文书
产品质量承诺范本
2014/03/31 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
党风廉政建设责任书
2014/04/14 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
党性观念心得体会
2014/09/03 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
工伤事故证明
2014/10/20 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
七年级生物教学反思
2016/02/20 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server