简单 的 js 投票页面

最新推荐文章于 2022-06-17 21:42:45 发布
最新推荐文章于 2022-06-17 21:42:45 发布
阅读量4.7k 收藏 7
点赞数 1
分类专栏： Java，xml，js 文章标签： js 投票 Java

一、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投票
效果图：

实现代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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 >

三、投票
效果图：

实现代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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 >
NiuDaWang_
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript案例之电影院电子选票
再中二也会被现实打败
10-09 373
JavaScript案例之电影院电子选票
js实现投票demo
肥学的博客
06-08 1634
实现投票小demo
JS实现投票的代码
qq_43255053的博客
12-21 2773
有朋友反映代码不能用，是因为编辑器里面上传代码会把脚本自动添加注释，单独贴一下样式和脚本把! 那会看到CSDN上有投票的功能，感觉很好，以前是用jfreechart实现的，现在用js实现，很节省资源啊，呵呵.....写的有点不好，希望大家指教，哈哈.......... &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN...
投票排行榜网站（HTML+CSS+JS）
llssdshiyi的博客
06-17 6174
投票网站，实时更新投票结果排行榜。前端基础知识练习项目
js 投票页面 一个简单的js应用例子
07-26
这是一个简单的js 投票。一看就会的哦，可能有的地方不完善，希望大家能多多交流，改进不足之处。
Application简单投票页面
06-06
在IT行业中，构建一个“应用简单投票页面”是一项常见的任务，尤其在开发Web应用程序时。这个项目主要关注的是用户界面(UI)设计以及后端数据处理，以实现一个基本的投票功能。下面，我们将深入探讨这一主题，涵盖...
JavaScript 编写的简单单选投票的代码
最新发布
03-23
在 JavaScript 中，我们通过 document.querySelector 方法获取选中的选项，并将结果显示在页面上。点击提交投票按钮后，将输出所选选项的值，并清空选中的选项。 注意：此示例假设在同一页面上只有一个单选投票，...
js问卷调查投票页面表单特效代码
03-20
【标题】"js问卷调查投票页面表单特效代码"涉及的核心技术主要是在网页设计与开发领域，特别是JavaScript语言的应用。JavaScript是一种广泛用于客户端Web开发的脚本语言，它能够为网页添加交互性和动态效果，使得...
简单的JS投票系统
11-15
总结，这个“简单的JS投票系统”是一个结合了JavaScript交互、DOM操作、数据处理和用户界面更新的实践案例，展示了JavaScript在网页应用中的强大功能。通过学习和理解这个系统，开发者可以提升自己的前端技能，并对...
javaweb-一个投票网页
Wangzx的博客
07-06 7768
创建一个投票网页，并实现统计票数和显示。要求：投票项目为两项以上，每项至少有三个选项. 编写程序Vote.html和Vote.jsp 成果展示: Vote.html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vote界面&lt;/title&
使用js写的一个简易的投票
10-26
投票想必大家并不陌生吧，下面为大家介绍下使用js是如何写一个简易的投票
html js 简易投票
09-22
html js 简易投票 读取TXT 用TXT 修改投票数量 投票记录读取。
vote 投票功能 纯html
08-15
附件,相关文章介绍，查看本人CSDN博客：div+css+jQuery简单实现投票功能..
基于js实现投票的实例代码
10-23
主要介绍了基于js实现投票的实例代码,三种投票表现效果，个人比较喜欢柱状投票图，具有立体感，感兴趣的朋友可以参考下
简单的投票页面，只有一个html页面
热门推荐
Bob的博客
04-05 3万+
帮鸟写了个最简单的投票页面，他要求最简单，所以界面就写的很简单，也没有什么大的功能。 关于html的代码就不注释了，我比较喜欢这段JS代码，所以就注释一下JS代码。 代码如下： 动漫投票 <!-- 这里使用了一张背景，注释掉了。 --> 热门动漫投票 猫和老鼠
JS实现投票
奋斗的pig
11-19 9911
有朋友反映代码不能用，是因为编辑器里面上传代码会把脚本自动添加注释，单独贴一下样式和脚本把! 那会看到CSDN上有投票的功能，感觉很好，以前是用jfreechart实现的，现在用js实现，很节省资源啊，呵呵.....写的有点不好，希望大家指教，哈哈.......... 投票 <!-- .voteresult{ margin: 2px; mar
简易在线投票系统(php)——前端设计（js部分）
THE_ZERO
01-10 2170
1、交换显示两个div的方法 即将一个div的display属性设置为空的同时，将另一个div的display属性设置为none。注意，这两个属性不能再css文件中设置，而要在html页面设置，因为js只能读取和修改html页面的内容。 function showDiv(divName1,divName2){ var divName1=document.getElementById(divN
django 投票页面
07-25
7. 编写前端代码：根据需要，可以使用HTML、CSS和JavaScript等前端技术来美化和增强投票页面。 这只是一个简单的指导步骤，具体实现方式可能因项目需求而有所不同。如果您需要更详细的指导或示例代码，请提供更多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值