一、js柱状投票图
效果图:
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
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">
<
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
>
|