一、需求

如下图

重点是要实现进度条。

二、分析

html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用，所以要模拟实现。

原理：动态设置<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>

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实现。

第二步、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>

效果：

第三步，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>

最终效果：

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4958786.html有问题欢迎与我讨论，共同进步。

jquery——彩色投票进度条的更多相关文章

  1. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  2. Android简易实战教程--第十七话《自定义彩色环形进度条》

    转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/52203533   点击打开链接 在Android初级教程里面,介绍了shape用法 ...

  3. jQuery 实现下载进度条

    //ajax异步上传 $.ajax({ url: "${pageContext.request.contextPath }/upload", type: "POST&qu ...

  4. jquery 可拖动进度条

    实现这个效果怎么弄呢? <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  5. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  6. JQuery中简约的进度条插件推荐

    JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...

  7. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  8. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  9. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

随机推荐

  1. 赞！jsPDF – 基于 HTML5 的强大 PDF 生成工具

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档.使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了.浏览器兼容性: IE 10, Firefo ...

  2. JS高程2.在HTML中使用Javascript（2）

    1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...

  3. 如何判断一个js对象是否一个DOM对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...

  4. 规划SharePoint2010的管理员密码更改

    规划自动密码更改 (SharePoint Server 2010) 为了简化密码管理,自动密码更改功能允许您更新和部署密码,而不必在多个帐户.服务和 Web 应用程序之间执行手动密码更新任务.您可以配 ...

  5. SharePoint Server 2016 Update

    Today’s post was written by Seth Patton, senior director of product management for the SharePoint te ...

  6. SharePoint 2013 日历重叠功能简介

    之前做了一个“SharePoint 2013 日历根据Category显示不同颜色”,然后大家留言说为什么不用SharePoint自带的日历重叠功能,所以自己尝试一下这个功能,和之前的博客进行一下对比 ...

  7. Kotlin语法（其他）

    三.其他 [TOC] 1. 多重声明 有时候可以通过给对象插入多个成员函数做区别是很方便的: val (name, age) = person 多重声明一次创建了多个变量.我们声明了俩个新变量:nam ...

  8. [Android]RapidFloatingActionButton框架正式出炉

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4474748.html RapidFloatingActionB ...

  9. JavaScript上传图片及时预览

    /*******************************正面图片上传预览开始****************************/        function previewImage ...

  10. Ubuntu16.04 LTS 下安装 Android Studio 2.2.2 步骤

    下载 Android SDK,官网:www.android.com 我相信很多人跟我一样,进不去.Android Studio 中文官网 www.android-studio.org 进去下载, 在终 ...