基于jQuery的投票系统显示结果插件


Posted in Javascript onAugust 12, 2011

首先还是来看一下运行效果如图1所示。

基于jQuery的投票系统显示结果插件
该插件使用步骤
一、引入css文件
首先页面引入css样式文件‘votecss.css',他是投票结果正常显示必不可少的。具体代码如下所示:
<link href="startpic/votecss.css" rel="stylesheet" type="text/css" />
二、引入jQuery的就是源文件
该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下:
<script type="text/javascript" src="startpic/jquery.js"></script>
三、引入投票插件

引入自己开发的投票插件“Studyplay_vote.js”,具体代码如下所示:
<script src="startpic/Studyplay_vote.js"></script>
四、页面调用
首先在页面中添加一个ID为‘z'的div元素,编写JavaScript代码显示投票结果具体代码如下:

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#z").study_vote([{"options":"好评","data":"16","color":"#39c"},{"name":"中评","data":"10","color":"#f00"},{"name":"差评","data":"30","color":"#000"}]); 
}); 
</script>

该段代码运行的效果如图一所示。
说明:该插件存在两个参数
1、options 必填插件他是一个object数据具体形式如下所示。
[{},{}...{}]该数组的个数就是投票选项的个数,如果投票有十个选项这个数组必须为10个; 其中{}为json数据,共有三项。
"name"表示投票选项的名称;
"data"表示该选项投票数;
"color"表示该选项柱形颜色。
2、totle可选参数,可以省略不写。表示投票的总数量,主要用于多项选择投票计算百分比。

该插件具体代码

$.fn.study_vote= function(options,totle){ 
var settings=options; 
if(totle!=null) 
{ 
if(isNaN(totle)) 
{ 
alert('参数错误'); 
return; 
} 
} 
if(typeof(settings)!='object') 
{ 
alert('参数错误'); 
return; 
} 
var container = jQuery(this); 
container.html('<dl id="studyvote"></dl>'); 
var study_voteCount=0; 
if(totle==null||totle=='') 
{//单项投票 
for(i=0;i<settings.length;i++) 
{ 
study_voteCount += parseInt(settings[i].data); 
} 
} 
else 
{//多项投票 
study_voteCount = parseInt(totle); 
} 
var study_votestr=""; 
for(i=0;i<settings.length;i++) 
{ 
var studyplay_present=settings[i].data/study_voteCount*100; 
if(parseInt(studyplay_present)!=studyplay_present) 
{ 
studyplay_present=studyplay_present.toFixed(2); 
} 
study_votestr +='<dd class="dd"><div class="fl">'+settings[i].name+':</div><div class="outbar"><div class="inbar" style="width:'+studyplay_present+'%;background:'+settings[i].color+';"></div></div> <div class="fl">'+studyplay_present+'% </div></dd>'; 
} 
container.find('#studyvote').html(study_votestr) 
}

插件下载
演示地址 http://demo.3water.com/js/2011/studyplayvote/index.html
该文件的下载地址为:
studyplayvote.rar
希望朋友下载使用,有问题谢谢反馈
Javascript 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
JavaScript中的View-Model使用介绍
Aug 11 #Javascript
仿jQuery的siblings效果的js代码
Aug 09 #Javascript
html中table数据排序的js代码
Aug 09 #Javascript
最常用的12种设计模式小结
Aug 09 #Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 #Javascript
javascript 主动派发事件总结
Aug 09 #Javascript
JsDom 编程小结
Aug 09 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
详解vue-cli3使用
2018/08/14 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python分割和拼接字符串
2013/11/01 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
大学生职业规划论文
2014/01/11 职场文书
小学教师管理制度
2014/01/18 职场文书
安全保证书怎么写
2015/02/28 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
办公室管理规章制度
2015/08/04 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python