基于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 滑入滑出效果实现代码
Mar 27 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 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
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
一些Solaris面试题
2013/03/22 面试题
季度思想汇报
2014/01/01 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
美德好少年主要事迹
2014/01/29 职场文书
教师自我鉴定范文
2014/03/20 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
创业计划书之服装
2019/10/07 职场文书
Python3 类型标注支持操作
2021/06/02 Python
python异常中else的实例用法
2021/06/15 Python