基于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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
javascript 数组排序函数
Aug 20 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
vue组件与复用详解
Apr 08 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 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
php不写闭合标签的好处
2014/03/04 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python创建文件备份的脚本
2018/09/11 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
Python文件路径名的操作方法
2019/10/30 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python实现mean-shift聚类算法
2020/06/10 Python
python 8种必备的gui库
2020/08/27 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
半年思想汇报
2013/12/30 职场文书
通信生自我鉴定
2014/01/18 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
个人承诺书
2014/03/26 职场文书
教师求职信
2014/06/17 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers