时间:2021-05-26
写在前面
进度条一直以来都是很多地方都可以用的,那么很多的时候其实我们都是自己在网上找代码,直接使用的,很少有人自己写源码的,今天呢我们就简单的实现一个进度条的效果,没有做美化,喜欢做美化的可以自己做一下美化。
源码已经放到Github上:进度条源码
一如既往的看效果:
好吧,效果还是一如既往的丑,简单的说一下怎么实现这样的效果,还是和之前一样我们分析一下难点在哪?
第一:进度条是生成的,那么就意味着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++; 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(){ 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"; if(count !== Number(user_number)){ nercon.style.width = count+"px"; count++; text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%"; }else{ return false; } setTimeout("change()",100); } } </script> </body></html>PS:这里仔细的人可能已经看出来了,我没有做过多的校验,没有判断用户输入的是不是空就触发函数,这些知道就行了,自己写的时候不要忘记加上,不然会出bug!
不要忘记引入jquery
谢谢阅读
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下进度条:js滑动进度条效果*{margin:0;padding:0;user-se
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。解决方案首先用.wxml与.wmss代码实现进度条的效果,再通
今天实现一个进度条加载过程,dom结构其实就是两个div控制里层div的宽width属性,就能实现进度条往前走的效果。我的进度条是显示下载文件的进度,简单实现一
本文实例为大家分享了js实现简单进度条的具体代码,供大家参考,具体内容如下实现进度条需要三个部分:1、外部的大容器2、在增长的进度条3、显示进度条可视化的百分数
初识进度条ProgressBar软件:AndroidStudio实现:1.点击按钮,进度条隐藏;再次点击,进度条出现。循环2.点击按钮,水平进度条进度呈现并+1