<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<link type="image/x-icon" href="/common/images/favicon.ico" rel="icon">
<style type="text/css">
*{padding:0;margin:0}
html,body{height:100%;width:100%;font-family:'Microsoft YaHei'}
.vote-mrg-box{position: absolute;top:0;z-index: 15;background:#fff;right:0;width:138px;padding:30px;border-radius:8px;}
.vote-mrg-box p{color:#3d3d3d;text-align:center;font-size:14px;font-weight:800;line-height:28px}
.tc{text-align:center}
.time{color:red;font-size:20px;line-height:28px;vertical-align: bottom;font-weight:800}
.miao{font-size:12px;color:#3d3d3d;line-height:28px;vertical-align: bottom;font-weight:800}
#pastTime{font-size:14px;line-height:28px;text-align:center}
.group{width:100px;font-size:12px;margin-left:19px;margin-bottom:10px;margin-top:5px;border:1px solid #2ea8e0;line-height:26px;height:26px;}
.start{border:0;line-height:26px;background:#2ea8e0;color:#fff;margin-left:19px;border-radius:4px;height:26px;width:100px;text-align:center;font-weight:normal;font-family:'Microsoft YaHei';}
</style>
</head>
<body>
<div class="vote-mrg-box">
<input type="hidden" value="${vote_time?c}" id="daojishi"/>
<p>投票倒计时:</p>
<div class="tc">
<span class="time" color="red">${vote_time?c}</span>
<span class="miao">s</span>
</div>
<p>投票经过时间:</p>
<div class="tc">
<span id="pastTime">${vote_past_time?c}</span>
<span class="miao">s</span>
</div>
<select class="group" data-conf_id="${conf_id?c}">
<option value="0">所有人</option>
<#list group_list as group>
<option value="${group.conf_group_id?c}">${group.conf_group_name}</option>
</#list>
</select>
<button class="start">开始投票</button>
</div> <div id="my_container"></div> <script src="/libs/jquery-1.8.2/jquery-1.8.2.min.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.core.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.widget.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.mouse.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/libs/highcharts/js/highcharts.js"></script>
<script src="/libs/highcharts/js/modules/data.js"></script>
<script src="/libs/highcharts/js/modules/drilldown.js"></script>
<script> var vote_id = '${vote_id?c}', vote_code='${vote_code}';
var timeOut;//每个1秒请求一次的函数
var timeOver;//每隔5秒请求投票数据的函数
var vote_end = false;//是否投票结束的变量
var vote_start = true; function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
} $(function() { if(window.localStorage){
init();
}else{
alert("本浏览器不支持投票预览功能，建议更换成谷歌浏览器");
} init(); $('.vote-mrg-box').draggable({scroll:false});
$('.start').on('click', function(){
$(this).off('click');
if(vote_end){
alert('对不起投票已经结束了');
}else{
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'POST',
dataType : 'json',
cache:false,
data : {"vote_code" : vote_code,"conf_id" : $('.group').data('conf_id'), "conf_group_id" : $('.group').val()}
}).done(function(json) {
timeOut = setInterval(startTime, 1000);
timeOver =setInterval(redraw, 4000);
});
}
})
}); function startTime(){
var timeBox = $('.time');
var time = timeBox.html();
var nowTime;
if(time-1<0){
nowTime = 0;
}else{
nowTime = time - 1 ; if(parseInt($('#pastTime').html())< parseInt($('#daojishi').val())){
$('#pastTime').html(parseInt($('#pastTime').html())+1);
}
}
if(time == timeBox.attr('value')){
timeBox.attr('value', '')
}else{
timeBox.html(nowTime);
}
if(nowTime=='0'){
window.clearInterval(timeOut);
}
} function redraw() {
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'get',
dataType : 'json',
data : {
dt : 'json'
},
cache:false
}).done(function(json) {
if(json.RS_CODE != '0'){
alert(json.RS_MSG);
return;
}
var stop = $('.time').html()==0; if(stop){
window.clearInterval(timeOver);
}
chart.series[0].setData(formatSeriesData(json),stop);
chart.redraw();
}).fail(function(){
alert('请求投票数据失败,建议配置谷歌浏览器。');
})
} /**整理数据格式
*[{
* name: "赞成", //下面的类目名
* y: 56, //票数
* drilldown: "赞成" //上面的名字
*}] 如此塞入series中的data属性
*
**/
function formatSeriesData(json,end,first){
var seriesData = [];
var RS_DATA = json.RS_DATA;
var len = RS_DATA.vote_name.length||0; //最后一秒回归最大数据
for(var i=0;i<len;i++){
var y = 0; //如果此次投票结束了
if(vote_end){
//如果Y有最大值的话，就取最大值，无的话自身的数字
y = RS_DATA.vote_limit_num[i] ? RS_DATA.vote_limit_num[i]:RS_DATA.vote_data[i];
}else{
//从0开始投票 //凡有上限一定是造假的 有限制值时候
if(RS_DATA.vote_limit_num[i]){
//如果投票开始了
if(RS_DATA.vote_start){ var daojishi = parseInt($('#daojishi').val());
var pastTime = parseInt($('#pastTime').html()); //console.log(daojishi);
//console.log(pastTime);
//console.log('1',pastTime/daojishi); //投票时间初期 真实数据 1/2
if(pastTime/daojishi<0.5){
//不超过最大值
y =(RS_DATA.vote_data[i]>RS_DATA.vote_limit_num[i])?(RS_DATA.vote_limit_num[i]-1):RS_DATA.vote_data[i]; } //投票时间中旬 0.5~最后一秒前，投票猛增
if(pastTime/daojishi>0.5 && pastTime/daojishi<1 && pastTime!=daojishi){ var avg = parseInt(RS_DATA.vote_limit_num[i]/daojishi*pastTime); //如果实际投票数 大于了 当前的投票数，那么现实实际投票数
if(window.localStorage['avote'+ vote_id +i] >= avg){
y = window.localStorage['avote'+ vote_id +i]; }else{
y = avg;
}
} if(pastTime/daojishi>=1){
y = window.localStorage['avote'+ vote_id +i] || RS_DATA.vote_limit_num[i];
} window.localStorage['avote'+ vote_id +i] = y; if($('.time').html()==0){
y = RS_DATA.vote_limit_num[i];
}
} }else{
y = RS_DATA.vote_data[i];
}
}
seriesData.push({
name: RS_DATA.vote_name[i],
//如果最后值存在的话，就显示最大值，否则的话
y:y,
drilldown: RS_DATA.vote_name[i]
});
}
return seriesData;
} function init() {
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'get',
dataType : 'json',
data : {
dt : 'json'
},
cache:false
}).done(function(json) {
//console.log('json',json);
//判断投票是否结束了
vote_end = json.RS_DATA.vote_end;
var seriesData = formatSeriesData(json,false,1); //配置chart参数
chart = new Highcharts.Chart({
chart:{
renderTo: 'my_container',
type : 'column',
height:$(window).height(),
backgroundColor:'#000',
borderColor: '#000000',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'rgba(255, 255, 255, .1)',
plotBorderColor: '#ccc',
plotBorderWidth: 1
},
//柱条选择栏颜色
colors: ['#50d88d', '#e47473', '#d8d8d8', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
width:$(window).width(),
title : {
text : '${vote_title}',
style:{
fontWeight:'bold',
fontSize:'26px',
fontFamily:'微软雅黑',
color:'#fff'
}
},
xAxis : {
categories : json.RS_DATA.vote_name
},
yAxis: {
title: {
text: '投票数',
color:'#fff'
},
gridLineWidth: 0,
lineColor: '#fff',
lineWidth: 1,
tickColor: '#fff',
labels:{style:{color:"#fff",cursor:"default",fontSize:"12px"}}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip : {
headerFormat: '<span style="font-size:11px">投票结果</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> 票<br/>'
},
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontSize:'22px',
color:'#fff'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontSize:'22px',
color:'#fff'
}
},
credits : {
enabled : false
},
series : [ {
name : '投票数',
data : seriesData,
showInLegend: false,
colorByPoint: true,
dataLabels : {
enabled : true,
rotation : 0,
color : '#FFFFFF',
align : 'center',
x : 4,
y : 10,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif',
textShadow : '0 0 3px black'
}
}
}]
}
);
});
} Date.prototype.format = function(format) {
var o = {
"M+" : this.getMonth() + 1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
"S" : this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
for ( var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
.substr(("" + o[k]).length));
}
}
return format;
} </script>
</body>
</html>
HTML 投票