基于js实现投票的实例代码


Posted in Javascript onAugust 04, 2015

本文实例讲述了JavaScript实现三种投票方式的实现方法,分享给大家供大家参考。具体如下:

一、js柱状投票图
效果图:

基于js实现投票的实例代码

实现代码:

<!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=gb2312" />
<title>js柱状投票图</title>
<style type="text/css">
body { font-weight:bold; color:#fff; font-size:16px; font-family:Arial, Helvetica, sans-serif; background-color:#000000;}

.zhu { margin-top:100px; width:420px; position:relative;}
.good { width:200px; position:absolute; bottom:0; left:0; text-align:center; background-color:#f00; height:50px;}
.bad { width:200px;position:absolute; bottom:0; right:0; text-align:center; background-color:#009900; height:50px;}
.and {}
</style>


<script type="text/javascript">
//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
//value 属性可设置或返回单选按钮的 value 属性的值。
//所有css在DOM结构里面都是字符型的 没有数字型的

function TouPiao(){
var good= parseInt(document.ballot.good_num.value);
var bad= parseInt(document.ballot.bad_num.value);
var sum= good+bad;

var sum_g=Math.round(good/sum*100);
var sum_b=Math.round(bad/sum*100);

document.getElementByIdx_x_x_x("and").innerHTML = "总数为:"+sum+"票";
document.getElementByIdx_x_x_x("g").innerHTML = "好评"+sum_g+"%";
document.getElementByIdx_x_x_x("b").innerHTML = "差评:"+sum_b+"%";

document.getElementByIdx_x_x_x("g").style.height = sum_g+"px";
document.getElementByIdx_x_x_x("g").style.marginTop = (sum_g-100)+"px";
document.getElementByIdx_x_x_x("b").style.height = sum_b+"px";
document.getElementByIdx_x_x_x("b").style.marginTop = (sum_b-100)+"px";


}
</script>
</head>

<body>
<form action="" method="get" name="ballot">
好评票数:<input name="good_num" type="text" /><br />
差评票数:<input name="bad_num" type="text" /><br />
<input name="bt" type="button" value="提交" onclick="TouPiao()" />
</form>
<div class="zhu">
<div class="good" id="g">好评50%</div>
<div class="bad" id="b">差评50%</div>
</div>
<div class="and" id="and">总数为0票</div>

</body>
</html>

二、JS投票
效果图:

基于js实现投票的实例代码

实现代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>投票 </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <mce:style><!--
 .voteresult{
 margin: 2px;
 margin-top: 5px;
 display: block;
 float: left;
 width: 250px;
 height: 10px;
 background-color: #EEE;
 overflow: hidden;
 }
 .style3{
 background-color: #666666;
 }
 
--></mce:style><style mce_bogus="1"> .voteresult{
 margin: 2px;
 margin-top: 5px;
 display: block;
 float: left;
 width: 250px;
 height: 10px;
 background-color: #EEE;
 overflow: hidden;
 }
 .style3{
 background-color: #666666;
 }
 </style>
 <mce:script type="text/javascript"><!--
 var total_vote = 0;
 var lq_vote = 0;
 var zq_vote = 0;
 var ppq_vote = 0;
 function vote(){
 var selectItem = 0;
 var items = document.getElementsByName("item");
 for(i = 0; i < items.length; i++){
  if(items[i].checked){
  selectItem++;
  total_vote++;
  switch(parseInt(items[i].value)){
   case 1: lq_vote++;break;
   case 2: zq_vote++;break;
   case 3: ppq_vote++;break;
  }
  }
 }
 if(selectItem <= 0){
  alert("请先选择您喜欢的运动");
  return;
 }
 
 var lq_num = new Number(lq_vote/total_vote);
 var zq_num = new Number(zq_vote/total_vote);
 var ppq_num = new Number(ppq_vote/total_vote);

 alert("投票成功");
 setSpanWidth(lq_num, 1);
 setSpanWidth(zq_num, 2);
 setSpanWidth(ppq_num, 3);
 
 for(i = 0; i < items.length; i++){
  items[i].checked = false;
 }
 }
 
 //设置投票结果显示
 function setSpanWidth(vote_num, type){
 var _width = new Number(250*vote_num);
 var _span = document.getElementByIdx_x_x_x("span" + type);
 var _span1 = document.getElementByIdx_x_x_x("span1" + type);
 //alert(_span.style.width);
 _span.style.width = _width.toFixed(0);
 var _percent = new Number(100*vote_num);
 _span1.innerHTML = _percent.toFixed(1) + "%";
 }
 
// --></mce:script>
 </HEAD>
 <BODY>
 你喜欢的运动:
 <br>
 篮球 <input type="checkbox" name="item" value="1"> 足球 <input type="checkbox" name="item" value="2"> 乒乓球 <input type="checkbox" name="item" value="3">
  <br>
 <input type="button" value="提 交" onclick="vote();">
 <br>
 <br>
 <table>
 <tr>
 <td colspan=3><b>投票结果</b></td>
 </tr>
 <tr>
 <td>篮球</td>
 <td><div class="voteresult"><span id="span1" class="style3" style="width: 0px;"></span></div></td>
 <td><span id="span11">0%</span><td>
 </tr>
 <tr>
 <td>足球</td>
 <td><div class="voteresult"><span id="span2" class="style3" style="width: 0px;"></span></div></td>
 <td><span id="span12">0%</span><td>
 </tr>
 <tr>
 <td>乒乓球</td>
 <td><div class="voteresult"><span id="span3" class="style3" style="width: 0px;"></span></div></td>
 <td><span id="span13">0%</span><td>
 </tr>
</table>
 </BODY>
</HTML>

三、投票
效果图:

基于js实现投票的实例代码

实现代码:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font-size:12px;}
</style>
<script language="javascript">
 function add(txt)
 {
  var abc = document.getElementByIdx_x("abc");
 abc.innerHTML = parseInt(abc.innerHTML) + 1;
 }
</script>
</head>
<body>
<table width="50" height="50" border="1" cellpadding="0" cellspacing="0">
 <tr>
  <td align="center" valign="middle"><div id="abc">0</div></td>
 </tr>
 <tr>
  <td align="center" valign="middle"><a href="#" onclick="add(1)">投一票</a></td>
 </tr>
</table>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
js中创建对象的几种方式
Feb 05 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
JavaScript数组对象赋值用法实例
Aug 04 #Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 #Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 #Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 #Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 #Javascript
JS实现转动随机数抽奖特效代码
Apr 16 #Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 #Javascript
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python Tensor和Array对比分析
2020/01/08 Python
python绘制高斯曲线
2021/02/19 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
2014道德模范事迹材料
2014/02/16 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
班级活动总结格式
2014/08/30 职场文书
情人节单身感言
2015/08/03 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
教你怎么用Python实现多路径迷宫
2021/04/29 Python