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

一、js柱状投票图

效果图：

实现代码：

js柱状投票图

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 {}

//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";

}

好评票数：

差评票数：

二、JS投票

效果图：

实现代码：

投票

.voteresult{

margin: 2px;

margin-top: 5px;

display: block;

float: left;

width: 250px;

height: 10px;

background-color: #EEE;

overflow: hidden;

}

.style3{

background-color: #666666;

}

-->

margin: 2px;

margin-top: 5px;

display: block;

float: left;

width: 250px;

height: 10px;

background-color: #EEE;

overflow: hidden;

}

.style3{

background-color: #666666;

}

你喜欢的运动：

篮球 足球 乒乓球

三、投票效果图：

实现代码：

无标题文档

body{ font-size:12px;}

function add(txt)

{

var abc = document.getElementByIdx_x("abc");

abc.innerHTML = parseInt(abc.innerHTML) + 1;

}

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