<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="keywords" content="Flash,Flex,AIR,Ajax,Html5,Silverlight" />
<title>聚會活動方案投票</title>
<style>
body{
margin:0px;
font-size:12px;
} #header {
padding-top:5px;
padding-left:10px;
}
.pbg{
background-color:#EEE;
} .pbr{
height:8px;
} li{
list-style-type: none;
}
hr {
border: 0px;
color: #CCCCCC;
background-color: #CDCDCD;
height: 1px;
width: 100%;
} h2 {
color: #CC0000;
text-align:center;
}
h3 {
color: #999999;
text-align: left;
font-weight: 300;
padding: 5px;
margin-top: 5px;
} #main{
padding-left:10px;
padding-bottom:10px;
} #detail {
padding:10px;
} #detail div {
padding-left:5px;
}
p {
line-height: 14px;
}
a {
color: #CC0000;
background-color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #cc0000;
background-color: #FFFFFF;
text-decoration: underline;
}
#footer {
text-align:center;
}
.info{
padding-left:6px;
position:relative;
}
#msg{
padding-left:30px;
color:#990000;
} </style>
<script type="text/javascript"> var ajax;
var msg;
var voting; function init()
{
msg = document.getElementById("msg");
voting = false;
ajaxSendRequest("do.php?n=-1", onUpdateData);
} function createAjax(){
if(window.ActiveXObject){
try{
return new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2){
return null;
}
}
} //www.111cn.net
else if(window.XMLHttpRequest){
return new XMLHttpRequest;
}
else{
return null;
}
} function onUpdateData(){
if(ajax.readyState==4){
if(ajax.status==200){
var text = ajax.responseText;
updateUI(text);
}
else{
alert("伺服器處理錯誤");
}
}
} function ajaxSendRequest(uri, handler){
ajax = createAjax();
if(!ajax){
alert('使用不相容XMLHttpRequest的瀏覽器');
return 0;
}
ajax.onreadystatechange = handler;
ajax.open("GET",uri,true);
ajax.send(null);
} function checkForm(){
voting = true;
var options = document.getElementsByName("option");
var voted = getCookie("voted") ? getCookie("voted") : false;
var num = -1;
for(var i = 0 ; i < options.length ; i++)
{
var option = options[i];
if(option.checked)
{
num = option.value;
}
}
if(num == -1)
{
msg.innerHTML = "請點擊選擇！";
clearInfo();
}
else
{
if(!voted)
{
msg.innerHTML = "";
var today = new Date();
url = "do.php?n=" + num + "&time=" + today.getTime();
ajaxSendRequest(url, onUpdateData);
}
else
{
msg.innerHTML = "請不要重複投票！";
clearInfo();
}
}
return false;
} function updateUI(text)
{
var counts = text.split(":");
var sum = getSum(counts);
var ems = document.getElementsByTagName("em");
for(var i = 0 ; i < counts.length; i++)
{
var count = counts[i];
var pb = document.getElementById("pb_" + i);
var perscent = isNaN(count) ? "" : (count/sum * 100).toFixed(2) + "%";
pb.style.width = perscent;
var percentTd = document.getElementById("percent_" + i.toString());
percentTd.innerHTML = "(" + perscent + ")";
var countEm = ems[i];
countEm.style.color = pb.style.backgroundColor;
countEm.innerHTML = count.toString();
}
if(voting)
{
setCookie("voted", true);
msg.innerHTML = "投票成功！感謝你的參與！";
clearInfo();
}
} function getSum(counts)
{
var sum = 0;
for(var j = 0 ; j < counts.length ; j++)
{
var count = parseInt(counts[j]);
sum += count;
}
return sum;
} function clearInfo()
{
setTimeout(function(){
msg.innerHTML = "";
},2000);
} function setCookie(name,value)
{
var days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
} function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
} function clearCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
</head>
<body onload="init();">
<div id="header">
<h2>十周年畢業同學聚會活動方案投票</h2>
<h3>請選擇：</h3>
</div>
<div id="main">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="24" rowspan="2"><input type="radio" name="option" id="option_0" value="0"/></td>
<td colspan="4"><label for="option_0">1. 10年聚成都之旅（2天）</label></td>
</tr>
<tr>
<td>
<div class="pbg">
<div id="pb_0" class="pbr" style="background-color:#990000;"></div>
</div>
</td>
<td width="20"></td>
<td id="percent_0" width="65"></td>
<td width="120"><em></em></td>
</tr>
<tr>
<td rowspan="2"><input type="radio" name="option" id="option_1" value="0"/></td>
<td colspan="4"><label for="option_1">2. 10年聚都江堰之旅（2天）</label></td>
</tr>
<tr>
<td>
<div class="pbg">
<div id="pb_1" class="pbr" style="background-color:#000099;"></div>
</div>
</td>
<td></td>
<td id="percent_1"></td>
<td><em></em></td>
</tr>
<tr>
<td rowspan="2"><input type="radio" name="option" id="option_2" value="0"/></td>
<td><label for="option_2">3. 10年聚瓦屋山之旅（3天）</label></td>
</tr>
<tr>
<td>
<div class="pbg">
<div id="pb_2" class="pbr" style="background-color:#009900;"></div>
</div>
</td>
<td></td>
<td id="percent_2"></td>
<td><em></em></td>
</tr>
<tr>
<td rowspan="2"><input type="radio" name="option" id="option_3" value="0"/></td>
<td><label for="option_3">4. 10年聚萬縣之旅（3天）</label></td>
</tr>
<tr>
<td>
<div class="pbg">
<div id="pb_3" class="pbr" style="background-color:#999900;"></div>
</div>
</td>
<td></td>
<td id="percent_3"></td>
<td><em></em></td>
</tr>
<tr>
<td rowspan="2"><input type="radio" name="option" id="option_4" value="0"/></td>
<td><label for="option_4">5. 10年聚-萬縣直達懷舊之旅（3天）</label></td>
</tr>
<tr>
<td>
<div class="pbg">
<div id="pb_4" class="pbr" style="background-color:#009999;"></div>
</div>
</td>
<td></td>
<td id="percent_4"></td>
<td><em></em></td>
</tr>
</table>
</div>
<div align="center">
<input type="button" value="我要投票" onclick="checkForm();"/>
</div>
<span id="msg"></span>
</div>
<div id="footer">
<hr />
</div>
</body>
</html> |
