这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了基于 js 实现投票的实例代码, 三种投票表现效果,个人比较喜欢柱状投票图,具有立体感,感兴趣的朋友可以参考下
本文实例讲述了 JavaScript 实现三种投票方式的实现方法,分享给大家供大家参考。具体如下:
一、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 投票 效果图:
实现代码:
- <!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>
三、投票效果图:
实现代码:
- <!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>
来源: http://www.phperz.com/article/17/0625/270130.html