基于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-data的三种用法
Apr 18 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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/03/27 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
php微信开发之谷歌测距
2018/06/14 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
pytorch简介
2020/11/11 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery