jquery彩色投票进度条简单实例演示


Posted in Javascript onJuly 23, 2020

本文实例为大家分享了jquery实现彩色投票进度条的具体代码,供大家参考,具体内容如下

一、需求

如下图

jquery彩色投票进度条简单实例演示

重点是要实现进度条。

二、分析

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>

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彩色投票进度条简单实例演示

以上就是彩色的进度条特效,特别适合用于投票,效果很明显,希望对大家的学习有所帮助,会喜欢上这个彩色进度条。

Javascript 相关文章推荐
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
You might like
短波的认识
2021/03/01 无线电
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
详解Python中的测试工具
2019/06/09 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
人事主管岗位职责
2014/01/30 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
神龙架导游词
2015/02/11 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
python中filter,map,reduce的作用
2022/06/10 Python