【投票】简单的投票页面，只有一个html页面
2019年04月30日 09:22:55 作者:Jiaozn 分类:HTML 评论(0)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动漫投票</title>
</head>
<!-- 这里使用了一张背景，注释掉了。
<body style="background-image:url(body.jpeg); background-size:100%; background-repeat: no-repeat;">
-->
<body>
<div align="center"><img src="head2.jpg" /></div>
<div align="center">
<h4>热门动漫投票</h4>
<table id="main" >
<tr >
<td>
<input type="radio" name="option" checked="checked"/>猫和老鼠
</td>
</tr>
<tr>
<td style="width:550px">
<div id=0 style="background-color:#acd6ff; width:0; height:20px; border-width:0px;">
</div>
</td>
<td>
<label id="label0">0</label>票
</td>
</tr>
<tr>
<td>
<input type="radio" name="option" />海贼王
</td>
</tr>
<tr >
<td>
<div id=1 style="background-color:#0066cc; height:20px; width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
</td>
<td>
<label id="label1">0</label>票
</td>
</tr>
<tr >
<td>
<input type="radio" name="option" />喜羊羊
</td>
</tr>
<tr >
<td>
<div id=2 style="background-color:#ff7575; height:20px;width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
</td>
<td>
<label id="label2">0</label>票
</td>
</tr>
<tr>
<td>
<input type="radio" name="option" />其他
</td>
</tr>
<tr >
<td>
<div id=3 style="background-color:#5cadad;height:20px;width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
</td>
<td>
<label id="label3">0</label>票
</td>
</tr>
<tr>
<td><p>
<input type="submit" value="确认投票" onclick="vote()"/>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//在每个投票选项后面写了个div，用div的宽度来代表当前该选项的投票数。
function vote(){ //函数vote，当点击确认投票的时候，调用vote方法
//for循环的条件是，所有投票选项的个数。
for(var i = 0; i < document.getElementsByName("option").length; i++){
//查找到是哪个投票选项被选中
if(document.getElementsByName("option")[i].checked == true){
var width = document.getElementById(i).style.width; //获取到当前选项的宽度。
width = parseInt(width);//将宽度转化为int型，因为获取到的width的单位是px
width += 3;//改变width的值，这里就是定义每次投票的进度条的增速
document.getElementById(i).style.width = width+"px";//修改原div的宽度
var label = "label"+i;//lable标签里面写的是当前的投票数目。
var num = document.getElementById(label).innerText;//获取到当前的票数
document.getElementById(label).innerText = ++num;//票数加1，并修改原值
}
}
//alert("投票成功");
}
</script>
</html>
---------------------
作者：王Bob
来源：CSDN
原文：https://blog.csdn.net/u011215133/article/details/51068484
版权声明：本文为博主原创文章，转载请附上博文链接！
除非注明，发表在“Jiaozn的博客”的文章『【投票】简单的投票页面，只有一个html页面』版权归Jiaozn所有。
转载请注明出处为“本文转载于『Jiaozn的博客』原地址https://jiaozn.com/reed/440.html”
评论
发表评论