php 投票模块 2

1. <form action = '<?php echo $this->baseUrl;?>/default/vote' method = 'post'>
3. <div>
4.     <table border="0">
5.     <?php foreach ($this->votedetail as $key => $val): ?>
6.     
7.         <tr>
8.             <td style = 'border:1px solid red'>
9.                 <?php echo $val['option'];?>:<input type = 'radio' name = 'opt' id = 'opt<?php echo $val['did'] ?>' value='<?php echo $val['did'] ?>' />
10.             </td>
11.             <td style = 'border:1px solid red'>
12.                 <img src="<?php echo $this->baseUrl;?>/www/img/vote.gif" id = 'img<?php echo $val['did'];?>' name = 'image' style = "width:<?php echo $val['rate']*200; ?>px;height:10px;">
13.             </td>
14.             <td style = 'border:1px solid red'>
15.                 <span id = "span<?php echo $val['did'];?>" ><?php echo $val['rate']*100;?>%</span>
16.             </td>
17.         </tr>
18.         
19.     <?php endforeach; ?>
20.         
21.     </table>
22.     
23. </div>
25. <div>
26.     <input type="button" value = '投票' οnclick='vote_submit()'/>
27. </div>
29. </form>

这个html页面实在很简单

 

我用一张长200px的宽10px的单色图片来标识票数的百分比情况

 

宽度的控制

style = "width:<?php echo $val['rate']*200;?>px;

从hq_votedetail 表中取出比率

注意要加上height:10px; 的样式。否则图片会根据原来比率自动压缩

 

1. var vote_array;
3. //发送ajax请求
4. function vote_submit()
5. {
6.     var options = $A(document.getElementsByName('opt'));    
7.     var option = options.find(function(e){
8.             return(e.checked);
9.         });
10.     
11.     var opt = option.value;
12.     var date = new Date();
13.     var time = date.getTime();
14.     var url = '/default/index/vote';
15.     var pars = 'opt=' + opt+'&time='+time;
17.     var myAjax = new Ajax.Request(
18.     url,
19.     {
20.     method: 'get',
21.     parameters: pars,
22.     onComplete: showResponse
23.     });
25. }
26. //控制img宽度 修改选项百分比
27. function showResponse(request)
28. {
29.     vote_array = eval(request.responseText);
30.     vote_array.each(function(e){
31.         $('img'+e.did).style.width = (e.rate*200)+'px';
32.         $('span'+e.did).innerText = (e.rate*100)+'%';
33.     });
35. }

 

用ajax实现无刷新票数增加