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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
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
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php session 写入数据库
2016/02/13 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
基于JS判断对象是否是数组
2020/01/10 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python切片操作实例分析
2018/03/16 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
农民致富事迹材料
2014/01/23 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
基于Python实现对比Exce的工具
2022/04/07 Python