投票统计 js

      <div class="l_Checkbox">
            <div ><input type="checkbox" name="item" value="1" onClick="vote(this);"><span>睡前饮用含咖啡因饮品</span></div>
            <div class="voteresult"><div id="t1" class="style3" style="background:#9eca42"></div> </div>
            <span id="t11" class="prentces">(0%)</span>
        </div>
        <div class="l_Checkbox">
        <div ><input type="checkbox" name="item" value="2" onClick="vote(this);"><span>失恋</span></div>
         <div class="voteresult"><div id="t2" class="style3" style="background:#e44568"></div> </div>
         <span id="t22" class="prentces">(0%)</span>            
        </div>
        <div class="l_Checkbox">
       <div > <input type="checkbox" name="item" value="3" onClick="vote(this);"><span>心理压力</span></div>
         <div class="voteresult"><div id="t3" class="style3" style="background:#feb74e"></div> </div>
         <span id="t33" class="prentces">(0%)</span>
        </div>
        <div class="l_Checkbox">
       <div ><input type="checkbox" name="item" value="4" onClick="vote(this);"><span>彻夜追电视剧</span></div>
         <div class="voteresult"><div id="t4" class="style3" style="background:#25b2e0"></div> </div>
         <span id="t44" class="prentces">(0%)</span>
        </div> 
        <div class="l_Checkbox">
        <div ><input type="checkbox" name="item" value="5" onClick="vote(this);"><span>睡前使用手机和电脑玩游戏</span></div>
         <div class="voteresult"><div id="t5" class="style3" style="background:#d689de"></div> </div>
         <span id="t55" class="prentces">(0%)</span>
        </div> 
        <div class="l_Checkbox">
        <div ><input type="checkbox" name="item" value="6" onClick="vote(this);"><span>屏幕社交中的虚拟关系</span></div>
         <div class="voteresult"><div id="t6" class="style3" style="background:#a8cf47"></div> </div>
         <span id="t66" class="prentces">(0%)</span>
        </div>   
        <div class="l_Checkbox">
       <div > <input type="checkbox" name="item" value="7" onClick="vote(this);"><span>疾病</span></div>
         <div class="voteresult"><div id="t7" class="style3" style="background:#e7546a"></div> </div>
         <span id="t77" class="prentces">(0%)</span>
        </div>        
        <div class="l_Checkbox">
        <div ><input type="checkbox" name="item" value="8" onClick="vote(this);"><span>伴侣关系</span></div>
         <div class="voteresult"><div id="t8" class="style3" style="background:#feb74e"></div></div>
          <span id="t88" class="prentces">(0%)</span>
        </div>
        <div class="l_Checkbox">
       <div > <input type="checkbox" name="item" value="9" onClick="vote(this);"><span>床、枕头等</span></div>
         <div class="voteresult"><div id="t9" class="style3" style="background:#25a7de"></div> </div>
         <span id="t99" class="prentces">(0%)</span>
        </div>
        <div class="l_Checkbox">
        <div ><input type="checkbox" name="item" value="10" onClick="vote(this);"><span>突发事件</span></div>
         <div class="voteresult"><div id="t10" class="style3" style="background:#d689de"></div> </div>
         <span id="t1010" class="prentces">(0%)</span>
        </div>

<script type="text/javascript">

      var total_vote = 150;    //初始化的总票数
      var arr = [20,15,35,7,3,25,15,5,15,10];   //每类项目投票的票数
      function vote(obj) {
          var selectItem = 0;
          if (obj != 0) {
              if (obj.checked) {
                  obj.disabled = true;
                  selectItem++;
                  total_vote++;
                  arr[parseInt(obj.value) - 1]++;
              }
          }
          var items = document.getElementsByName("item");
          for (i = 0; i < items.length; i++)
              setSpanWidth(arr[i]/ total_vote, items[i].value);
      }
      //设置投票结果显示
      function setSpanWidth(vote_num, type) {
 var _span = document.getElementById("t" + type);
var xScroll=(document.documentElement.scrollWidth>document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth;
      var _width = new Number((xScroll*0.94-100).toFixed(0) * vote_num);
          var _span1 = document.getElementById("t" + type + type);
          _span.style.width = _width.toFixed(1)+"px"; 
          var _percent = new Number(100 * vote_num);
 if(_percent.toFixed(1)>0)
          _span1.innerHTML ="("+ _percent.toFixed(1) + "%)";
 else
  _span1.innerHTML ="(0%)"; 
      }
      vote(0);  

</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值