基于jquery实现彩色投票进度条代码解析


Posted in jQuery onAugust 26, 2020

一、需求

如下图

基于jquery实现彩色投票进度条代码解析

重点是要实现进度条。

二、分析

原理:动态设置<p>的子元素<span>的宽度值。

1、简单的雏形

假设只有一个进度条,如下,我们只需要知道p元素的宽度,span元素的百分比,相乘即得到span的宽度,浏览器加载时动态设置span的宽度即可实现进度条的效果。

<style>
.long{width:100px;border:1px solid #7f7f7f;height:14px;background-color:#d6d6d6;}
.short{float:left;height:14px;background-color:#0FF;}
</style>

<body>
<P class="long"><span class="short"></span></P>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var percent=0.5;
var longWidth=100;
var shortWidth=percent*longWidth;

$(".short").animate({width:shortWidth+"px"},'slow');

</script>
</body>

基于jquery实现彩色投票进度条代码解析

2、投票进度条实现过程

第一步:

结构如下

<meta charset="utf-8">
<style>
/*样式重置*/
ul,h4,p{margin:0;padding:0;}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

body { font: 12px/1.5 arial, 宋体; }
html, body { color: #333333; }
/*投票css*/
.vote-box-list{border:1px solid red;position:absolute;}
.vote-box-list li{list-style:none;margin:10px 0;}
.vote-item-wrap h4,.vote-item-wrap .vnum{float:left;font-size:14px;font-weight:normal;line-height:16px;}
.vote-item-wrap p{float:left;height:14px;width:200px;border:1px solid #E2E2E2;background-color:#EFEFEF;margin:0 10px;}
.vote-item-wrap p span{float:left;height:14px;/*width:30px;background-color:#c2f263;*/}
</style>
<ul class="vote-box-list clearfix" id="appVoteBox">
 <li class="vl-item" id="voteItem0">
  <div class="vote-item-wrap clearfix">
   <h4>A:</h4>
   <p class="litem"><span></span></p>
   <span class="vnum">79(2%)</span>
  </div>
 </li>
 <li class="vl-item" id="voteItem1" >
  <div class="vote-item-wrap clearfix">
   <h4>B:</h4>
   <p class="litem"><span></span></p>
   <span class="vnum">1986(61%)</span>
  </div>
 </li>
 <li class="vl-item" id="voteItem2">
  <div class="vote-item-wrap clearfix">
   <h4>C:</h4>
   <p class="litem"><span></span></p>
   <span class="vnum">1153(36%)</span>
  </div>
 </li>
 <li class="vl-item" id="voteItem3" >
  <div class="vote-item-wrap clearfix">
   <h4>D:</h4>
   <p class="litem"><span></span></p>
   <span class="vnum">415(13%)</span>
  </div>
 </li>
 <li class="vl-item" id="voteItem4" >
  <div class="vote-item-wrap clearfix">
   <h4>E:</h4>
   <p class="litem"><span></span></p>
   <span class="vnum">89(3%)</span>
  </div>
 </li>
</ul>

给span增加一个width和背景色,就可以出现进度条的效果。这一步用js实现。

基于jquery实现彩色投票进度条代码解析

第二步、js设置span的宽度

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
  var longWidth;
  var percentArr=[];
  var shortWidth=[];
  var spanArr=[];
  
  /*初始化*/
  function init(o){
    voteId=o.id;
    longWidth=o.width;
    percentArr=o.percent;
    shortWidth=calWidth();
    spanArr=findSpans();
  }
  /*根据百分比计每个算span的实际宽度*/
  function calWidth(){
    var arr=[];
    for(var i=0;i<percentArr.length;i++){
      var tempLength=percentArr[i]*longWidth;
      arr.push(tempLength);
    }
    return arr;
  }
  /*将全部span存为一个数组*/
  function findSpans(){
    var litems=$("#"+voteId).find(".litem");
    var arr=[]
    for(var i=0;i<litems.length;i++){
      arr.push(litems[i].children[0]);
    }
    return arr;
  }
  /*每个span元素设置宽度*/
  function setWidth(){
    for(i=0;i<percentArr.length;i++){
      $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
      $(spanArr[i]).css({'background-color':"#c2f263"}); 
    }
    
  }
  return {init:init,set:setWidth};
})();

/*调用*/
Vote.ListShow.init(
{
  id:'appVoteBox',
  width:200-2 ,
  percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

效果:

基于jquery实现彩色投票进度条代码解析

第三步,js设置span的背景色

第二步中的背景色都是如下设置为一样。

$(spanArr[i]).css({'background-color':"#c2f263"});

现在随机生成背景色,做一个彩色的进度条。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
  var longWidth;
  var percentArr=[];
  var shortWidth=[];
  var spanArr=[];
  var colorArr=[];
  
  /*初始化*/
  function init(o){
    voteId=o.id;
    longWidth=o.width;
    percentArr=o.percent;
    shortWidth=calWidth();
    spanArr=findSpans();
    colorArr=genColor();
  }
  /*根据百分比计每个算span的实际宽度*/
  function calWidth(){
    var arr=[];
    for(var i=0;i<percentArr.length;i++){
      var tempLength=percentArr[i]*longWidth;
      arr.push(tempLength);
    }
    return arr;
  }
  /*将全部span存为一个数组*/
  function findSpans(){
    var litems=$("#"+voteId).find(".litem");
    var arr=[]
    for(var i=0;i<litems.length;i++){
      arr.push(litems[i].children[0]);
    }
    return arr;
  }
  /*o是颜色数组,随机选择length种颜色返回*/
  function genColor() { 
    var o = []; 
    var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; //彩色进度条
    var colorsArr = n.slice(); 
    for (var i = 0;i < percentArr.length; i++){ 
      //Math.random()返回0.0 ~ 1.0 之间的一个伪随机数。
      //Math.floor()向下取整
      var k = Math.floor(Math.random()* colorsArr.length); 
      o.push(colorsArr[k]); 
      //取完一种颜色后就从颜色数组中删除
      colorsArr.splice(k, 1); 
      if (colorsArr.length == 0){ 
      colorsArr = n.slice()} 
    } 
    return o;
  } 
  /*每个span元素设置宽度*/
  function setWidth(){
    for(i=0;i<percentArr.length;i++){
      $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
      $(spanArr[i]).css({'background-color':colorArr[i]}); 
    }
    
  }
  return {init:init,set:setWidth};
})();

/*调用*/

Vote.ListShow.init(
{
  id:'appVoteBox',
  width:200-2 ,
  percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

最终效果:

基于jquery实现彩色投票进度条代码解析

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
jQuery实现评论模块
Aug 19 #jQuery
jQuery实现简单评论功能
Aug 19 #jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
Java如何格式化日期
2012/08/07 面试题
构造方法和其他方法的区别
2016/04/26 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
社区包粽子活动方案
2014/01/21 职场文书
长征观后感
2015/06/09 职场文书
中秋节感想
2015/08/10 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL