Maison interface Web js tutoriel 基于jQuery的投票系统显示结果插件_jquery

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

May 16, 2016 pm 06:03 PM
投票系统

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

该插件使用步骤
一、引入css文件
首先页面引入css样式文件‘votecss.css',他是投票结果正常显示必不可少的。具体代码如下所示:

二、引入jQuery的就是源文件
该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下:

三、引入投票插件
  引入自己开发的投票插件“Studyplay_vote.js”,具体代码如下所示:

四、页面调用
首先在页面中添加一个ID为‘z'的div元素,编写JavaScript代码显示投票结果具体代码如下:
复制代码 代码如下:



该段代码运行的效果如图一所示。
说明:该插件存在两个参数
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('
');
var study_voteCount=0;
if(totle==null||totle=='')
{//单项投票
for(i=0;i{
study_voteCount += parseInt(settings[i].data);
}
}
else
{//多项投票
study_voteCount = parseInt(totle);
}
var study_votestr="";
for(i=0;i{
var studyplay_present=settings[i].data/study_voteCount*100;
if(parseInt(studyplay_present)!=studyplay_present)
{
studyplay_present=studyplay_present.toFixed(2);
}
study_votestr +='
'+settings[i].name+':
'+studyplay_present+'%
';
}
container.find('#studyvote').html(study_votestr)
}

插件下载
演示地址 http://demo.jb51.net/js/2011/studyplayvote/index.html
该文件的下载地址为:
studyplayvote.rar
希望朋友下载使用,有问题谢谢反馈
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Développer un système de vote Web en utilisant JavaScript Développer un système de vote Web en utilisant JavaScript Aug 09, 2023 pm 01:30 PM

Développer un système de vote Web en utilisant JavaScript

Système de vote en ligne multi-utilisateurs implémenté en PHP Système de vote en ligne multi-utilisateurs implémenté en PHP Aug 10, 2023 pm 05:49 PM

Système de vote en ligne multi-utilisateurs implémenté en PHP

Comment implémenter un système de vote simple en utilisant MySQL et Ruby Comment implémenter un système de vote simple en utilisant MySQL et Ruby Sep 20, 2023 pm 12:37 PM

Comment implémenter un système de vote simple en utilisant MySQL et Ruby

Comment développer un système de vote en ligne avec Laravel Comment développer un système de vote en ligne avec Laravel Nov 02, 2023 pm 06:31 PM

Comment développer un système de vote en ligne avec Laravel

Comment écrire un système de vote simple en C++ ? Comment écrire un système de vote simple en C++ ? Nov 04, 2023 am 11:24 AM

Comment écrire un système de vote simple en C++ ?

Conception de l'interface utilisateur et optimisation du système de vote en ligne PHP Conception de l'interface utilisateur et optimisation du système de vote en ligne PHP Aug 09, 2023 pm 08:45 PM

Conception de l'interface utilisateur et optimisation du système de vote en ligne PHP

Comment utiliser PHP pour développer un système de vote pour les comptes publics WeChat Comment utiliser PHP pour développer un système de vote pour les comptes publics WeChat Oct 27, 2023 pm 12:12 PM

Comment utiliser PHP pour développer un système de vote pour les comptes publics WeChat

Système de vote blockchain en PHP Système de vote blockchain en PHP Jun 11, 2023 pm 12:03 PM

Système de vote blockchain en PHP

See all articles