返回列表 发帖

[剧情] 你认为古剑3哪位主角会牺牲

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>古剑3哪位主角会牺牲</title>
  6. </head>
  7. <!-- 这里使用了一张背景,注释掉了。
  8. <body style="background-image:url(body.jpeg); background-size:100%; background-repeat: no-repeat;">
  9. -->
  10. <body>
  11.         <div align="center"><img src="head2.jpg" /></div>
  12.         <div  align="center">
  13.         <h4>古剑3哪位主角会牺牲</h4>
  14.                 <table id="main" >
  15.                         <tr >
  16.                                 <td>
  17.                                         <input type="radio" name="option" checked="checked"/>玄戈
  18.                                 </td>
  19.                         </tr>
  20.                         <tr>
  21.                                 <td style="width:550px">
  22.                                         <div id=0 style="background-color:#acd6ff; width:0; height:20px; border-width:0px;">
  23.                                         </div>
  24.                                 </td>
  25.                                 <td>
  26.                                         <label id="label0">0</label>票
  27.                                 </td>
  28.                         </tr>
  29.                         <tr>
  30.                                 <td>
  31.                                         <input type="radio" name="option"  />北洛
  32.                                 </td>
  33.                         </tr>
  34.                         <tr >
  35.                                 <td>
  36.                                         <div id=1 style="background-color:#0066cc; height:20px; width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
  37.                                        
  38.                                 </td>
  39.                                 <td>
  40.                                 <label id="label1">0</label>票
  41.                                 </td>
  42.                         </tr>       
  43.                         <tr >
  44.                                 <td>
  45.                                         <input type="radio" name="option"  />岑樱
  46.                                 </td>
  47.                         </tr>
  48.                         <tr >
  49.                                 <td>
  50.                                         <div id=2 style="background-color:#ff7575; height:20px;width:0;  border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
  51.                                        
  52.                                 </td>
  53.                                 <td>
  54.                                 <label id="label2">0</label>票
  55.                                 </td>
  56.                         </tr>       
  57.                         <tr>
  58.                                 <td>
  59.                                         <input type="radio" name="option" />云无月
  60.                                 </td>
  61.                         </tr>
  62.                         <tr >
  63.                                 <td>
  64.                                         <div id=3 style="background-color:#5cadad;height:20px;width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;" ></div>
  65.                                        
  66.                                 </td>
  67.                                 <td>
  68.                                 <label id="label3">0</label>票
  69.                                 </td>
  70.                         </tr>
  71.                
  72.                         <tr>
  73.                                 <td><p>
  74.                                         <input type="submit" value="确认投票" onclick="vote()"/>               
  75.                                 </td>
  76.                         </tr>
  77.                 </table>
  78.         </div>
  79. </body>
  80. <script type="text/j**ascript">

  81.         //在每个投票选项后面写了个div,用div的宽度来代表当前该选项的投票数。
  82.         function vote(){        //函数vote,当点击确认投票的时候,调用vote方法
  83.                
  84.                 //for循环的条件是,所有投票选项的个数。
  85.                 for(var i = 0; i < document.getElementsByName("option").length; i++){
  86.                        
  87.                         //查找到是哪个投票选项被选中
  88.                         if(document.getElementsByName("option")[i].checked == true){
  89.                                 var width = document.getElementById(i).style.width;        //获取到当前选项的宽度。
  90.                                 width = parseInt(width);//将宽度转化为int型,因为获取到的width的单位是px
  91.                                 width += 3;//改变width的值,这里就是定义每次投票的进度条的增速
  92.                                 document.getElementById(i).style.width = width+"px";//修改原div的宽度
  93.                                
  94.                                 var label = "label"+i;//lable标签里面写的是当前的投票数目。
  95.                                 var num = document.getElementById(label).innerText;//获取到当前的票数
  96.                                 document.getElementById(label).innerText = ++num;//票数加1,并修改原值
  97.                         }
  98.                 }

  99.                 //alert("投票成功");
  100.                
  101.         }

  102. </script>
  103. </html>
复制代码

返回列表