百分比进度条

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 #fanhui{ display:none}
  8 </style>
  9 </head>
 10
 11 <body>
 12 <form action="tpchuli.php" method="post"> <!--表单开头  1 -->
 13 <?php
 14
 15
 16 //连接数据库   1
 17 $db = new  MySQLi("localhost","root","123","mydb");
 18
 19
 20 //写sql语句  1
 21 $sql = "select * from diaoyantimu";
 22
 23 //执行sql语句  1
 24 $result = $db->query($sql);
 25
 26 //调用$result所接受到的数据,转换成二维数组,交给给$attr,再转出去  1
 27 $attr = $result->fetch_all();
 28
 29 foreach($attr as $v) //foreach循环所转换出二维数组,循环遍历出每一条数据  1
 30 {
 31     echo "<div>{$v[1]}</div>";  //输出题目标题   输出你想要显示的那个列的内容
 32                      //   找    这个表       里边的   这个列=这个表里的主键    $v索引[0]是此表的主键    这句话就是将上面那个题目的选项查出来   1
 33     $sxx = "select * from diaoyanxuanxiang where timudaihao=‘{$v[0]}‘";
 34     //        使用块方法来执行 返回结果级对象给$rxx 接受  1
 35     $rxx = $db->query($sxx);
 36     //$axx收到的结果集对象后用fetch_all取出数据  1
 37     $axx = $rxx->fetch_all();
 38
 39     $bs = 0;
 40     if(!empty($_GET["a"]))
 41     {
 42         $bs = $_GET["a"];
 43     }
 44
 45     $s = $bs==1?"none":"block";
 46     //这个div是投票
 47     echo "<div id=‘toupiao‘ style=‘display:{$s}‘>";  //输出div将foreach求出的值扩起来,可以 2
 48     foreach($axx as $v1) //foreach遍历一下二维数组,进了这个选项,这个$v1取到的是每一个选项的信息  1
 49     {
 50         //输出选项的信息    <input 在选项前面加上复选框 name‘给个neme值,此选项是需要提交的! tp[ 以数组的方式提交 ]‘ value=‘{$v1[0]‘提交选项的主键值} /> 1
 51         echo "<div><input type=‘checkbox‘ name=‘tp[]‘ value=‘{$v1[0]}‘ />{$v1[1]}</div>";
 52     }   //显示选项
 53     echo "</div>";  //投票div
 54
 55     $s1 = $bs==0?"none":"block";
 56
 57     //显示投票结果
 58     echo "<div id=‘jieguo‘ style=‘display:{$s1}‘>";
 59
 60     foreach($axx as $v2)  //循环遍历$axx之前上面求出的值
 61     {
 62         $v2[2]; //求百分比 先求当前选项的人数
 63         //再求总人数       求这个列      from      这个表        条件  这个列=这个列的主键
 64         $szrs = "select sum(numbers) from diaoyanxuanxiang where timudaihao=‘{$v[0]}‘";
 65         //使用块方法执行语句
 66         $rzrs = $db->query($szrs);
 67         $azrs = $rzrs->fetch_row();  //取到的是第一条数据 是一维数组
 68         $azrs[0]; //以为数组取索引0 就是总人数
 69
 70         $bfb = ($v2[2]/$azrs[0])*100;    //$bfb =($v2[2]当前人数 除以/ 总人数) 得出的是小数 乘以 *100  就是百分数
 71
 72         //显示$v2[1]选项的内容  <外层 div>设置进度条边框 <里层 div>设置进度</div></div>
 73         echo "<div>{$v2[1]}<div style=‘width:100px; height:10px; border:1px solid black;‘><div style=‘width:{$bfb}%; height:10px; background-color:red‘></div></div>{$v2[2]} {$bfb}%</div>";  //{ $v2[2]  显示人数,} { 显示}百分比 %
 74     } //选项结果
 75
 76     echo "</div>";
 77 }
 78
 79 ?>
 80
 81 <input type="submit" value="投票" />  <!--提交投票-->
 82 <input type="button" id="jg" value="查看结果" onclick="showjg()" />
 83 <input type="button" id="fanhui" value="返回" onclick="showtp()"  />
 84 </form>  <!--表单结束 1-->
 85 </body>
 86
 87 <script type="text/javascript">
 88 function showjg()
 89 {
 90     document.getElementById("jieguo").style.display="block";
 91     document.getElementById("toupiao").style.display="none";
 92     document.getElementById("jg").style.display="none";
 93     document.getElementById("fanhui").style.display="block";
 94
 95 }
 96
 97 function showtp()
 98 {
 99     document.getElementById("jieguo").style.display="none";
100     document.getElementById("toupiao").style.display="block";
101     document.getElementById("jg").style.display="block";
102     document.getElementById("fanhui").style.display="none";
103 }
104 </script>
105 </html>
时间: 2024-12-30 04:11:34

百分比进度条的相关文章

css3圆形百分比进度条的实现原理

原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必用2个圆心相同,半径不同的div即可实现.大圆的颜色即为圆形进度条的底色,小圆的颜色即为中间百分比的遮罩颜色白色,还要加上左右2边一边一个半圆,也就是说总共应该有4个div,一个大圆的div中包含3个div,左右一边半个圆,遮罩div处于最上面. 那这里的一边半个圆怎么实现呢?使用css的clip属

HTML5圆形百分比进度条插件circleChart(记录)

介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图) circleChart使用方法 在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script> <script src="path/to/circleChart.min.js"></script> HTML结构 使用一个<div>元素作为该圆形百分

JS框架_(JQbar.js)柱状图动态百分比进度条特效

柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /

使用ajax实现简单的带百分比进度条

需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" borderco

Js 百分比进度条

[构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] CSS代码 body { background-color: #f5f7f9; color: #6c6c6c; font: 300 1em/1.5em; } .container { left: 50%; position: absolute; top: 40%; transform: translate(-50%, -50%); -webkit-tran

控制台进度条

今天在整理资料的时候,翻出多年前在网上看到的一篇帖子,一个控制台的进度条,非常酷炫,原文出处-传送门. 记得在刚开始接触编程的时候,用控制台写些小工具玩,也喜欢将信息打印到屏幕上,看着不断闪动的屏幕觉得很酷,后来一次偶然的机会看到了这个进度条让控制台的输出又上了一个层次,感谢作者. static void Main(string[] args) { Random r = new Random(); while (true) { ConsoleProgressBar bar = new Conso

Qt编写自定义控件13-多态进度条

前言 多态进度条,顾名思义,有多重状态,其实本控件主要是用来表示百分比进度的,由于之前已经存在了百分比进度条控件,名字被霸占了,按照先来先得原则,只好另外取个别名叫做多态进度条,应用场景是,某种任务有三种状态,比如正常状态.警戒状态.报警状态,这三种状态都分别有一个占比,需要用不同的颜色表示,这样就衍生出了此控件,类似于堆积图.接下来节假日四天,可以全身心投入研发还未完工的大屏UI程序,基础控件部分+二级界面部分都已经做好,现在专心整合到主界面和打通数据流(采用数据库采集+网络采集两种方式).多

常用的网页加载进度条

下面有三种方式,看自己需求: 一.顶部进度条 在html代码中间插入jq代码  执行动画.页面加载到哪部分,进度条就会相应的向前走多少 当全部加载完成后将loading进度条模块隐藏 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content=&qu

python手写实现进度条

哈哈哈,我们平时都经常见到python的进度条,安装pip包的时候,更新的时候,调用第三方库的时候,,,但是很少有人试过自己实现,今天来了兴趣就自己写一套哈哈哈 进度条的输出是在原地刷新的,所以用到输出的‘\r’和time库的sleep(),‘\r’即“换行,光标在上一行”.这里提供两种方法: ————使用print() for i in range(0,101,2):    print('\r----->>',i, '<<-----',end = "", fl