前端开发

本教程讲解javascript实现投票功能

一、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";
 
 
}


 


好评票数：
差评票数：



好评50%