基于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 相关文章推荐
js data日期初始化的5种方法
Dec 29 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
基于mysql的论坛(6)
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
jQuery实现可以扩展的日历
2020/12/01 jQuery
python实现问号表达式(?)的方法
2013/11/27 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
django页面跳转问题及注意事项
2019/07/18 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
勤俭节约倡议书
2014/04/14 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android