基于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 Select操作方法集合脚本之家特别版
May 17 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
一个网马的tips实现分析
Nov 28 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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/04 星际争霸
php 在线打包_支持子目录
2008/06/28 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
Vuex的actions属性的具体使用
2019/04/14 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
群胜软件Java笔试题
2012/09/29 面试题
中学家长会邀请函
2014/01/17 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
负责人任命书范本
2014/06/04 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书