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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
javascript学习小结之prototype
Dec 03 Javascript
angular.js分页代码的实例
Jul 27 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
输出控制类
2006/10/09 PHP
php下载文件的代码示例
2012/06/29 PHP
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
Python的函数的一些高阶特性
2015/04/27 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python实现杨氏矩阵查找
2019/03/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
班长岗位职责
2013/11/10 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
公司离职证明标准格式
2014/11/18 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
护士心得体会范文
2016/01/25 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS