基于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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
Vue中的$set的使用实例代码
Oct 08 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python生成n个元素的全组合方法
2018/11/13 Python
python3中确保枚举值代码分析
2020/12/02 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
爱心捐款倡议书
2014/04/14 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
增员口号大全
2014/06/18 职场文书
文明单位汇报材料
2014/12/24 职场文书
趣味运动会开幕词
2015/01/28 职场文书
云冈石窟导游词
2015/02/04 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
歌剧魅影观后感
2015/06/05 职场文书
九九重阳节致辞
2015/07/31 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers