投票問卷結果漂亮的橫向顯示,jquery簡單實現。
做了一個簡單的投票問卷管理模組,最後需要實現投票結果橫向的顯示,而且要求是按題來統計並顯示百分比,每個選項投票數。
網上找來找去都沒有找到合適自己的,於是自己使用很笨的方法實現了一個。高手路過勿笑~呵呵
國際慣例,先上效果圖:
實現原理:使用DIV巢狀DIV,父DIV作為容器,子DIV則為色帶,只需設定子DIV寬度並著色即可。
上圖中的橫向統計色條是使用了2個DIV,外面的DIV是容器(即灰色的色帶),裡面的DIV則是顏色部分(色帶)。色帶是根據本選項計算出來的百分比來設定它的寬度並著色的,而它的寬度=容器*百分比。
至於圓角的實現則更加簡單了,直接使用jquery.corner.js這個外掛即可。
好了,下面準備貼程式碼。
色帶的製作著色是根據每題總投票數,每個選項的投票數計算出來的百分比來進行著色的。所以在遍歷迴圈問題和選項的時候,必須在後臺重新組裝顯示的結果集合,把每個問題的投票總數、每個選項的投票數傳進來。
JSP遍歷的程式碼:
<ul> <c:forEach items="${listQuestion}" var="question" varStatus="status"> <li style="padding-top:10px;"> <span class="oz-form-fields-span" style="padding-left:10px;">${status.index+1} ${question.questionSubject} (${question.questionVoteTotal})</span> <ul> <c:forEach items="${question.options}" var="option" varStatus="number"> <li style="padding-top:5px;"> <div style="margin-left: 35px !important;margin-left:30px;">${option.subject}</div> <div class="barContatin" id="barContatin-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}" style="float: left;"> <div id="bar-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}" class="bar"> </div> </div> <div style="float: left;margin-left: 5px;"> <span class="oz-form-fields-span" id="span-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}"></span> </div> <div style="clear: both;"></div> </li> </c:forEach> </ul> </li> </c:forEach> </ul>
程式碼中的listQuestion是在後臺重新組裝過問題集合,每個問題會有一個投票總數變數(questionVoteTotal),有一個選項的集合(${question.options},也就是options),而每一個選項中都會有一個選項的投票數量(${option.count},也就是count)。
這樣把問題選項遍歷出來後,就得在頁面載入後去處理投票統計了。注意上面紅色字型的ID和class,他們是識別每個問題下每個選項的標識,如上面class='bar'的div,如果是第一個問題第一個選項,它的ID則為ID='bar-1-0-投票數量-問題投票總數'。
CSS程式碼:
<style type="text/css"> .barContatin { height: 16px; width: 300px; margin-left: 35px !important; margin-left:30px; margin-bottom:5px; background: #E5E5E5; } .bar { height: 16px; } </style>
JS程式碼:
$(document).ready(function() {
playBar();
});
//顯示統計圖
function playBar(){
//定義條形顏色組
var color=['#F2A61F','#592D8E','#5AAF4A','#2A3591','#ABBFD0'];
$('.bar').each(function(){//遍歷class為bar的div,也就是色條
var str=$(this).attr('id').split('-');
var optionVoteTotal=str[3]; //選項投票數量
var questionVoteTotal=str[4];//問題投票總數
//設定bar寬度
var width=(optionVoteTotal/questionVoteTotal)*300;//300是容器的寬度
$(this).width(width);
//設定bar顏色
if(str[2]<5){//如果選項個數小於5
$(this).css("background",color[str[2]]);
}else if(str[2]<11){//如果選項個數小於11
$(this).css("background",color[str[2]-5]);
}else{//如果更多
$(this).css("background",color[0]);
}
//設定bar圓角
$('#'+$(this).attr('id')).corner("right");//此處如需圓角,則需引入jquery.corner.js這個外掛。不設定也可以。
//設定bar容器圓角
var barContatin=$(this).attr('id').replace('bar','barContatin')
$('#'+barContatin).corner("right");
//設定百分比及投票數
var spanStr=$(this).attr('id').replace('bar','span');
var percent=(optionVoteTotal*100/questionVoteTotal).toFixed(2);
if(str[2]<5){
$('#'+spanStr).append(percent+'% '+'<font color='+ color[str[2]] +'>('+ optionVoteTotal +')</font>');
}else if(str[2]<11){
$('#'+spanStr).append(percent+'% '+'<font color='+ color[str[2]-5] +'>('+ optionVoteTotal +')</font>');
}else{
$('#'+spanStr).append(percent+'% '+'<font color='+ color[0] +'>('+ optionVoteTotal +')</font>');
}
})
}
好的,就這麼多了。
相關推薦
投票問卷結果漂亮的橫向顯示,jquery簡單實現。
做了一個簡單的投票問卷管理模組,最後需要實現投票結果橫向的顯示,而且要求是按題來統計並顯示百分比,每個選項投票數。 網上找來找去都沒有找到合適自己的,於是自己使用很笨的方法實現了一個。高手路過勿笑~呵呵 國際慣例,先上效果圖: 實現原理:使用DIV巢狀DIV,父DI
acos 等出現結果:-1.#IND00,實操解決。求取兩個向量夾角時所遇到的問題
當出現如題的結果時,主要是因為越界導致的。 首先,C++中acos的取值範圍是[0,M_PI],也就對應cos的[-1,1]。因此,當acos(alpha)中的alpha不在[-1,1]中時,執行結果就會是:-1.#IND00。 這裡是在求取向量夾角時所遇到的問題。公式如
rsa加密算法,前後端實現。
exceptio eof 測試 ror iic shm rsa加密算法 pac puts 前端js: 下載地址:http://travistidwell.com/jsencrypt/ js第一版本: 1 // 對數據加密 2 function e
jQuery簡單實現點擊文本框復制內容到剪貼板上的方法
ble sta sca principal ase clas app 回車 pbo //點擊文本框復制其內容到剪貼板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.cl
jQuery簡單實現iframe的高度根據頁面內容自適應的方法(轉)
var contents color iframe meid clas 簡單實現 方式 根據 本文實例講述了jQuery簡單實現iframe的高度根據頁面內容自適應的方法。分享給大家供大家參考,具體如下: 方式1: //註意:下面的代碼是放在和iframe同一個
JQuery簡單實現錨點連結的平滑滾動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
【unity】編輯模式預覽Animator動作,2種實現。 其中一種 playback模式是Cinema Director用的會使Unity Crash
一、環境 Unity 5.5.2 、Cinema Director v1.4.5.4 二、問題 美術用 Director 做CutScene動畫時, 某一個角色動作時間線上,播放多個動作, 預覽模式,拖動線的時候,Unity基本會100%Crash 如上圖拖到類似位
USB學習筆記,情深義重。親身實踐從0開始,STM32,MSP430的實現。
多年工作一直在使用MSP430微控制器,其實有些系列也支援全速通用序列匯流排(USB 2.0),比如MSP430F5504,MSP430F5510。近期在學習STM32,以後就在以STM32F103ZET6為基礎平臺展開對USB 2.0(USB3.0的區別就是高
資料結構課程實驗->迷宮->分別用鏈棧,鏈隊,順序棧,順序隊實現。
迷宮 實現老鼠走迷宮程式。 功能要求:①輸出每一步嘗試的狀態,直到走完迷宮或無法走通②在迷宮有解的前提下,輸出從起點到終點的最短通路。 設計要求:迷宮至少10×10;起點和終點可自定
初學c#,做簡單計算器。
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.
資料結構課程實驗->迷宮->分別用鏈棧,鏈隊,順序棧,順序隊實現。
迷宮 實現老鼠走迷宮程式。 功能要求:①輸出每一步嘗試的狀態,直到走完迷宮或無法走通②在迷宮有解的前提下,輸出從起點到終點的最短通路。 設計要求:迷宮至少10×10;起點和終點可自定義,也可固定;迷宮可隨機生成,也可固定,可以無解;兩個功能可用不同演算
Java中會存在記憶體洩漏嗎,請簡單描述。
記憶體洩漏是指不再被使用的物件或者變數一直被佔據在記憶體中。 理論上來說,Java是有GC垃圾回收機制的,也就是說,不再被使用的物件,會被GC自動回收掉,自動從記憶體中清除。 但是,即使這樣,Java也還是存在著記憶體洩漏的情況, 1、長生命週期的物件持有短生命週期物件的引用就很可能
基於ssm下用jQuery簡單實現點贊功能
自己寫專案的時候了用到了這個點贊與取消讚的功能,然後突然心血來潮,想在這裡寫篇部落格,也算是小小的總結一下,廢話不多說了,給大家上圖上碼才是重點。 下圖是知乎裡面的我的文章的截圖,現在就是要實現他的點贊功能。下圖是我自己寫的頁面jsp頁面點贊那一塊的程式碼:&l
跳一跳輔助工具的原理分析,和Java實現。(其實沒那麼複雜)
一、前言(Java程式碼的實現是基於另外一篇部落格,我精簡了計算方法而成,參考部落格地址http://blog.csdn.net/lihushiwoa/article/details/78942322)先說一說我的感受,之前覺得能做出做出輔助工具的技術要求一定很高,然而當自己
使用jquery簡單實現彈出框
使用jquery實現點選按鈕彈出對話方塊 html: <input type="button" id="btn02" value="修改密碼" > <div i
(資料庫)Android登入,註冊介面簡單實現。
本文使旨在用最簡單的Demo來實現原理,有不足之處歡迎指出,多多包涵,大家一起交流~ 1、一般兄弟們看這篇文章應該對資料庫多少有些瞭解,簡潔說SQL是Structured Query Languag
Java中會存在記憶體洩露嗎,請簡單描述。
會。java導致記憶體洩露的原因很明確:長生命週期的物件持有短生命週期物件的引用就很可能發生記憶體洩露,儘管短生命週期物件已經不再需要,但是因為長生命週期物件持有它的引用而導致不能被回收,這就是java中記憶體洩露的發生場景。 1.集合類,集合類僅僅有新增元素的方法,而沒有
go的mac環境搭建,與簡單編譯。
http://blog.csdn.net/listron/article/details/54861603 嘗試Go語言。 Go語言是Google內部主推的語言,它作為一門全新的靜態型別開發語言,與當前的開發語言相比具有許多令人興奮不已的新特性。專門針對多處理器系統的
[教程] 變廢為寶,教你自己組建 NAS 伺服器,非常簡單實用。組裝、品牌 NAS 推薦。
最近一直想弄一個屬於自己的NAS系統,可惜一直抽不出時間來折騰,就先網上找了些資料收藏起來,等有時間再來折騰,下面是我覺得比較好的一篇文章,原文網址為:https://bbs.feng.com/read-htm-tid-3132173.html,在此感謝作者的辛勤xiez寫作
jquery簡單實現表單提交後的需要等待效果
簡單來說就是遮罩然後載入個動畫,往上有利用js手動更改html值實現緩衝動畫的,比較麻煩,感覺價效比不高,畢竟誰也不會沒事一直在那載入很多張這種等待動畫。 主要也就是利用了position裡面的fixed這個屬性,設定之後頁面內的其他元素均不可點選,保證頁面安全 <!