javascript中ajax简单投票示例(js版本)

注意：我只是简单的用了Cookie来防止重复投票，肯定可以作弊了，最保险的还是登录投票。

 

 代码如下 复制代码

<!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>
时间： 2024-10-30 22:19:39

javascript中ajax简单投票示例(js版本)的相关文章

VS2005/AJAX-VS2005中AJAX简单应用

VS2005/AJAX-VS2005中AJAX简单应用 AJAX不用说大家都明白,不明白的请百度或Google一下人家比我说的专业,笔者写此篇文章不在于介绍多深奥的东西,这样只举一个很简单的例子来引导到大家.此例只为让大家明白AJAX的基本的调用需要做那些事情笔者用的是VS2005引用AJAX2.0程序集(AJAXPro.2.dll) . 在web.config文件中的<system.web>加入以下设置 <httpHandlers> <add verb="POST

JavaScript中removeChild 方法开发示例代码_javascript技巧

1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

javascript中AJAX用法实例分析_javascript技巧

本文实例讲述了javascript中AJAX用法.分享给大家供大家参考.具体分析如下: 兼容地获得XMLHttpRequest对象: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest; }else if(window.ActiveXObject){ //IE浏览器 try{ //高版本,受msxml3.dll+支持 xhr = new ActiveXObject("Msxml2.XMLH

关于Javascript中ajax应用详解

1:定义AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. Ajax 不是一种单一的技术.实际上是几种技术,每种技术都各有其特色,这些技术以全新强大方式融合在一起.Ajax 包含: 使用 XHTML 和 CSS 基于标准的呈现 使用文档对象模型的动态显示和交互 使用 XML 和 XSLT 的数据交换和操作 使用 XMLHttpRequest 的异步数据检索 将它们绑定到一起的 J

javascript中ajax请求方式(GET与POST)状态值说明

 注意:XMLHttpRequest 是 AJAX 的基础,在创建 XMLHttpRequest 对象时,必须与你写的ajax方法在同一个'<script></script>'标签中!否则ajax请求会出错,并无法返回数据. javascript/js的ajax的POST/GET请求.  javascript/js的ajax的POST请求:  代码如下 复制代码 <script type="text/javascript"> /* 创建 XMLHtt

javascript中ajax登录退出一些方法总结

版本一 思路是在页面中指定位置预留一个js钩子, 然后在页面加载完成后向后端发送ajax请求, 判断用户是否登录, 并写到钩子里相应文本. 于是版本一产生了...  代码如下 复制代码 (function($){     var user = window.user = {};     // 用户数据     user.data = {};     // 用户状态, 0未登录, 非0则视为已登录, 可扩展为用户等级     user.status = 0;     /**      * 初始化

javascript中typeof的使用示例

 本文为大家介绍下javascript中typeof的使用,下面有个不错的示例,感兴趣的朋友可以参考下  代码如下: <html>  <head>  <title>javascript中typeof的使用</title>  <script>  //1.基本类型  var x = 123;  var y = "abc";  var z = true;  //alert(typeof x);//number  //alert(ty

javascript中字符串的定义示例代码

 javascript中字符串如何定义,下面有个不错的示例,大家可以学习下  代码如下: <html>  <head>  <title>javascript中字符串的定义</title>  <script>  //定义字符串  //第一种  var str = new Array();  alert(str);//空字符  //第二种  var str2 = new Array("hello");  alert(str2);/

Yii2中DropDownList简单用法示例_php实例

本文实例讲述了Yii2中DropDownList简单用法.分享给大家供大家参考,具体如下: 这里以实际应用为例讲解Yii2 DropDownList用法. 有一张分类表,无限极分类那种,表结构如下,pid就是父分类ID 这里我们要实现: 新建分类的时候,父分类可以从所有分类中任选一个或者不选 编辑分类时,父分类不能选择当前编辑的分类...如果选自己,父分类就是自己了,必然出错! 实现代码如下,我就贴上form的全部代码吧 <?php use common\models\Category; use