彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-12-06 23:55 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

基于js实现投票的实例代码_javascript技巧_脚本之家

投票结果

基于js达成投票的实例代码,js投票实例

本文实例陈诉了JavaScript完毕三种投票情势的落到实处形式,分享给大家供大家参谋。具体如下:

一、js柱状投票图
效果图:

图片 1

实今世码:

<!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投票
效果图:

图片 2

贯彻代码:

 <!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"></div></td>
 <td>0%<td>
 </tr>
 <tr>
 <td>足球</td>
 <td><div class="voteresult"></div></td>
 <td>0%<td>
 </tr>
 <tr>
 <td>乒乓球</td>
 <td><div class="voteresult"></div></td>
 <td>0%<td>
 </tr>
</table>
 </BODY>
</HTML>

三、投票 效果图:

图片 3

贯彻代码:

<!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>

上述即是本文的全体内容,希望对大家的上学抱有利于。

本文实例陈诉了JavaScript达成二种投票情势的兑现格局,分享给大家供大家参照他事他说加以考查。具体如下: 生龙活虎、...

注意事项

0%

1、参Gaby赛笔者的简历(供职企业、专门的学业职务任职资格头衔、工作简历等),个人照片。

三、投票效果图:

3、天涯论坛家居网对本京津冀《中华夏儿女民共和国好规划》设计员大赛活动有所最终解释权。

正文实例陈说了JavaScript完结三种投票格局的贯彻格局,共享给我们供大家参谋。具体如下:

大众评定核实所占比例为五成,大赛全程开通网络投票系统,通过Wechat、网站专项论题等报名路子,选用实名制参预投票,大众评定检查核对可通过PC端或移动端登陆我们的移动页面为参Gaby赛选手投票,这一次大赛投接收实名制投票,一个人不得不投大器晚成票,不可重复投票,制止现身刷票行为。

二、JS投票效果图:

在分明场馆的实地评选所占比重为10%,业主可到东方全世界影城售楼处对参品实行投票,并由东方全球影城相关职业人士担当总计票的数量,最后交由大赛组织委员会集合总结评选结果。

篮球

投稿准则

意气风发、js柱状投票图效果图:

本次活动参选文章的评选包蕴线上大伙儿投票、专门的职业评选委员会委员评选和售楼处现场评选三局地,此中,专门的学问评定核实评选通过大家评委评选而定,所占比重为伍分叁。

0%

2、参品均不退还,主办单位承办单位有权刊登及出版。

0%

50万房子大奖与新大器晚成款大奖到底花落哪个人家,“中夏族民共和国好规划大赛”邀你同盟亲眼看见!

足球

依赖,此番竞技于九月四日将会评出100强小说并加入巡回展出,进而甘休海选格局,网上朋友均可通过各个门路为团结挚爱的设计员投票点赞,选出30强小说,凡是参加投票集赞的评选大众评委,订阅项目官微或扫描二维码增添关心,均有机遇出席刮奖、抢红包等不胜枚举活动。

无标题文档body{ font-size:12px;} function add { var abc = document.getElementByIdx_x; abc.innerHTML = parseInt   1; }

为保险这一次大赛能顺遂举办,现重新核实投稿细则,提示参赛选手应当要引起重视:

   投票       .voteresult{ margin: 2px; margin-top: 5px; display: block; float: left; width: 250px; height: 10px; background-color: #EEE; overflow: hidden; } .style3{ background-color: #666666; }  <!-- 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; for(i = 0; i < items.length; i  ){ if{ selectItem  ; total_vote  ; switch(parseInt{ case 1: lq_vote  ;break; case 2: zq_vote  ;break; case 3: ppq_vote  ;break; } } } if{ alert; return; } var lq_num = new Number; var zq_num = new Number; var ppq_num = new Number; alert; setSpanWidth; setSpanWidth; setSpanWidth; for(i = 0; i < items.length; i  ){ items[i].checked = false; } } //&#35774;&#32622;&#25237;&#31080;&#32467;&#26524;&#26174;&#31034; function setSpanWidth{ var _width = new Number; var _span = document.getElementByIdx_x_x_x; var _span1 = document.getElementByIdx_x_x_x; //alert; _span.style.width = _width.toFixed; var _percent = new Number; _span1.innerHTML = _percent.toFixed   "%"; } // -->   你喜欢的运动: 
 篮球  足球  乒乓球  

1、参品必得为自家原创,不得有其余侵袭别人知识产权作为,由于作品引起的学问产权纠纷,主办单位承办单位概不担负。

0
投一票

此番大赛,主办方东方全球影城为获获奖项者提供了价值50万屋企大奖和数十万两样的现钞奖赏,获获得奖项项小说还可参预全国多项巡回展出活动,并出版 “京津冀中夏族民共和国好规划”图书法和绘图册。届时所入册“京津冀中国好规划”的创作作,作为“东方全球影城精装菜单”为总CEO免费提供。

乒乓球

京津冀《中国好规划》房内设计大赛现已正式步向创作百强海选阶段!第一波百强海选已于十6月十日顺遂进行,第二波百强海选格局已成功张开。本次大赛组织委员会有关管事人提醒参Gaby赛选手,一定要注意竞赛的各类时间节点!及时送交参品,以防错过竞赛。

如上正是本文的全体内容,希望对大家的上学抱有利于。

3、参赛小说设计创新意识表明。

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 &#23646;&#24615;&#35774;&#32622;&#25110;&#36820;&#22238;&#34920;&#26684;&#34892;&#30340;&#24320;&#22987;&#21644;&#32467;&#26463;&#26631;&#31614;&#20043;&#38388;&#30340; HTML&#12290;//value &#23646;&#24615;&#21487;&#35774;&#32622;&#25110;&#36820;&#22238;&#21333;&#36873;&#25353;&#38062;&#30340; value &#23646;&#24615;&#30340;&#20540;&#12290;//&#25152;&#26377;css&#22312;DOM&#32467;&#26500;&#37324;&#38754;&#37117;&#26159;&#23383;&#31526;&#22411;&#30340; &#27809;&#26377;&#25968;&#23383;&#22411;&#30340;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;var sum_b=Math.round;document.getElementByIdx_x_x_x.innerHTML = "&#24635;&#25968;&#20026;:" sum "&#31080;";document.getElementByIdx_x_x_x.innerHTML = "&#22909;&#35780;" sum_g "%";document.getElementByIdx_x_x_x.innerHTML = "&#24046;&#35780;:" sum_b "%";document.getElementByIdx_x_x_x.style.height = sum_g "px";document.getElementByIdx_x_x_x.style.marginTop =  "px";document.getElementByIdx_x_x_x.style.height = sum_b "px";document.getElementByIdx_x_x_x.style.marginTop =  "px";}好评50%差评50%总数为0票

2、参品(每套做创作图包含重要平、立面图、客厅效果图、主卧效果图、厨房或卫生浴室效果图、别的空间效果图各一张。参品图片为JPEG、A3大小、分辨率300DPI,每件文章比比都已经图片总体积不超过300M)。

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:基于js实现投票的实例代码_javascript技巧_脚本之家

关键词: 脚本 代码 实例 中国 之家