php部分--题目:投票 重点:两个div套用,显示百分比;
2016-12-23 15:51
369 查看
1.建立两个表格:要显示百分比的话,就要在选项表中加上一列标记number
2.链接数据库,并对题目和选项进行显示
3.给选中项的number列加1处理
4.显示选项的百分比
5.js实现投票和百分比显示的交替(投票和百分比界面分别写在两个div中)
2.链接数据库,并对题目和选项进行显示
<?php $db=new MySQLi("localhost","root","123","test1"); mysqli_connect_error()?"连接失败":""; $sql1="select * from timu "; $result1=$db->query($sql1); $attr1=$result1->fetch_row(); $sql2="select * from xuanxiang"; $result2=$db->query($sql2); $attr2=$result2->fetch_all(); ?> <div id="timu" style="display:block;"> <form action="toupiao.php" method="post"> <?php echo $attr1[1];//题目显示 $v=array(); foreach($attr2 as $v) { echo "<div><input type='checkbox' value='{$v[0]}' name='xx[]'>{$v[1]}</div>"; //选项显示 } ?> <input type="submit" value="投票"><input type="button" value="查看详情" onclick="xianshi(0)"> </form> </div> <div id='baifenbi' style="display:none;"> <?php
3.给选中项的number列加1处理
/*--------------------------选中的数量加1--------计算number列的总数量----------------------------------------*/ if(!empty($_POST['xx'])) { $attr3=$_POST['xx']; $str=implode("','",$attr3); $sql3="update xuanxiang set number=number+1 where ids in ('{$str}')"; //给number列+1, $result3=$db->query($sql3); if($result3) { $sql4="select sum(number) from xuanxiang"; $result4=$db->query($sql4); $num=$result4->fetch_row(); //把number列的数值取总和
4.显示选项的百分比
/*------------------------------百分比显示---------------------------------------------------------*/ echo "<div>"; foreach($attr2 as $vv) { $baifenbi=($vv[2]/$num[0])*100; echo "{$vv[1]} {$baifenbi}%<div style='width:200px;height:6px; border:1px solid black;'><div style='width:{$baifenbi}%;height:6px;background-color:red;'></div></div>"; //显示百分比,是用两个div,外层的固定宽度,内层的通过百分比给宽度赋值,并设背景色 } echo "<input type='button' value='返回' onclick='xianshi(1)'>"; echo "</div>"; } } ?>
5.js实现投票和百分比显示的交替(投票和百分比界面分别写在两个div中)
<script> function xianshi(a) { if(a==0) { document.getElementById("baifenbi").style.display="block"; document.getElementById("timu").style.display="none"; } else { document.getElementById("baifenbi").style.display="none"; document.getElementById("timu").style.display="block"; } } </script>
相关文章推荐
- 2016/3/30 ①投票checkbox ②进度条两个div套起百分比控制内div(width) <div><div></div></div> ③数据库test2 表 diaoyan... 35岁发展方向投票
- ajax+php如何获取部分请求的信息显示在对应的div中
- JQUERY插件:仿QQ今日话题正反方投票百分比显示
- html 两个div并列显示
- 两个Div重叠显示的代码
- 投票gridview里柱状百分比显示
- 让两个DIV居中显示
- 1个网页分成两个固定的部分来显示
- 将两个div左右并列显示并实现点击标题切换内容
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 让两个div并排显示
- JS+CSS设置img在DIV中只显示居中部分
- (转)PHP安全配置之实现安全的两个重点
- 两个div同行显示
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- html 两个div并列显示
- 如何让两个div并排显示
- 两个常用的DIV弹出层效果代码(遮挡整个页面,遮挡可视部分)
- 在HTML中,让两个DIV在同一行显示
- JS+CSS设置img在DIV中只显示Img垂直居中的部分