分两个页面,要点:提交form 相连action method  两个页面可以合成一个页面action传到自身页面   但分开较清晰

第一个页面vote.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票</title>
<style type="text/css">
*
{
margin:0px auto;
padding:0px;
}
h3
{
margin:10px;
}
.diyiceng
{
height:220px;
width:200px;
background-color:#FFF;
position:absolute;
visibility:visible;
left:10px;
top:40px;
}
.dierceng
{
height:220px;
width:800px;
background-color:#FFF;
position:absolute;
visibility:hidden;
left:0px;
top:0px;
}
.xuanxiang
{
position:absolute;
}
.jindu
{
width:200px;
height:10px;
position:absolute;
left:100px;
border:solid #999 1px;
}
.jindutiao
{ height:8px;
position:absolute;
background-color:#0F0;
border:solid 1px #00FF00;
}
.shuzi
{
position:absolute;
left:320px;
}
.baifenbi
{
position:absolute;
left:350px;
}
</style>
</head> <body> <h3>35岁发展方向</h3> <div class="diyiceng" id="diyiceng">
<form action="votechuli.php" method="post">
<?php $db=new mysqli("localhost","root","123","test2");
!mysqli_connect_error()or die("连接错误"); $sql="select * from DiaoYanXuanXiang";
$resulttp=$db->query($sql); while($row = $resulttp->fetch_row())
{ //print_r($row);
echo "<div><input type='checkbox' name='test[]' value='".$row[0]."'/>".$row[1]."</div><br />";
} ?> <input type="submit" name="submit" value="提交" />&nbsp;&nbsp;
<input type="button" name="chakan" value="查看结果" onclick="xianshi()"/>
</form>
<?php
$db=new mysqli("localhost","root","123","test2");
!mysqli_connect_error()or die("连接错误"); $sql="select * from DiaoYanXuanXiang";
$result=$db->query($sql); echo "<div class='dierceng' id='yincang'>";
echo "<form>"; $sqlsum = "select SUM(numbers) from DiaoYanXuanXiang";
$resultsum = $db->query($sqlsum);
$aa = $resultsum->fetch_row();
$zongshu = $aa[0]; while($rowjg = $result->fetch_row())
{
$xuanxiang = $rowjg[1];
$shuliang = $rowjg[2];
$baifenbi = $shuliang/$zongshu*100;
$baifenbi1=round($baifenbi,1);//对小数取一位 echo "<div><div class='xuanxiang'>".$xuanxiang."</div>
<div class='jindu'><div class='jindutiao' style='width:".$baifenbi."%'></div></div>
<div class='shuzi'>".$shuliang."</div>
<div class='baifenbi'>".$baifenbi1."%</div></div><br /><br />";
} echo "<input type='button' name='fanhui' value='返回' onclick='buxianshi()' />";
echo "</form>";
echo "</div></div>"; ?>
</body>
</html>
<script>
function xianshi()
{
var a=document.getElementById("yincang");
if(a.style.visibility="hidden")
{
a.style.visibility="visible";
} }
function buxianshi()
{
var a=document.getElementById("yincang");
if(a.style.visibility="visible")
{
a.style.visibility="hidden";
} } </script>

效果图:

第二个页面

votechuli.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<?php
$test=$_POST["test"]; //1.造连接对象
$db=new mysqli("localhost","root","123","test2");
//2.判断是否连接成功
!mysqli_connect_error()or die("连接失败"); for($i=0;$i<count($test);$i++)
{
$sql="update DiaoYanXuanXiang set numbers=numbers+1 where ids='".$test[$i]."'"; $result=$db->query($sql);//为什么query后要加($sql,0)1代表增删改 变化的一面 0代表 查询 不变的一面 } //判断是否修改成功
if($result)
{
header("Location:vote.php");
}
else
{
echo "修改失败!";
} ?>
</body>
</html>

效果图:

2016/3/30 ①投票checkbox ②进度条两个div套起百分比控制内div(width) <div><div></div></div> ③数据库test2 表 diaoyan... 35岁发展方向投票的更多相关文章

  1. ionic 横向滚动 ion-scroll 进度条(步骤)// 根据后台数据控制当前默认滑动到的位置

    <ion-scroll zooming="false" direction="x" style="width: 100%;" scro ...

  2. Android 自学之进度条ProgressBar

    进度条(ProgressBar)也是UI界面中的一种非常使用的组件,通常用于向用户显示某个耗时完成的百分比.因此进度条可以动态的显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应, ...

  3. Android 自定义view --圆形百分比(进度条)

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...

  4. android多线程进度条

    多线程实现更新android进度条. 实例教程,详细信息我已经注释   android多线程进度条   01package com.shougao.hello; 02 03import android ...

  5. QT中可以用QProgressBar或着QProgressDialog来实现进度条

    QProgressBar的使用 首先在designer中拖一个按钮和进度条部件,按下面初始化 //补充:下面两句写在MainWindow的构造函数里进行初始化 ui->progressBar-& ...

  6. 制作进度条(UISlider)

    怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种. 可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可 ...

  7. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  8. QT中进度条的使用

    在QT中可以用QProgressBar或着QProgressDialog来实现进度条. QProgressBar的使用 首先在designer中拖一个按钮和进度条部件,按下面初始化 //补充:下面两句 ...

  9. 进度条(ProgressBar)的功能与用法

    进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的的百分比.进度条可以动态的显示进度,因此避免长时间的执行某个耗时的操作,让用户感觉程序失去了响应,从而更好的提高用户界面的友 ...

随机推荐

  1. JavaScript中函数的调用

    JavaScript中函数的调用 制作人:全心全意 在JavaScript中,函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称和参数. ...

  2. 【HIHOCODER 1163】 博弈游戏·Nim游戏

    描述 今天我们要认识一对新朋友,Alice与Bob. Alice与Bob总是在进行各种各样的比试,今天他们在玩一个取石子的游戏. 在这个游戏中,Alice和Bob放置了N堆不同的石子,编号1..N,第 ...

  3. *lucene索引_的删除和更新

    [删除] [恢复删除] [强制删除] [优化和合并] [更新索引] 附: 代码: IndexUtil.java: package cn.hk.index; import java.io.File; i ...

  4. AI学习笔记(01)

    [1]在Ai中,每个对象有两个属性:填充颜色和描边颜色.   [2]在AI中,非要选中,才操作.而PS中,选中图层即可.   [3]AI中,都是路径.   [4]选择工具是选中整个路径,而直接选择工具 ...

  5. iframe in ipad safari

    http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebconten ...

  6. Laya 项目解耦

    Manager解耦业务逻辑 Data解耦数据逻辑 View-UI解耦页面逻辑 ModuleController解耦通信逻辑

  7. [luoguP1772] [ZJOI2006]物流运输(DP + spfa)

    传送门 预处理cost[i][j]表示从第i天到第j天起点到终点的最短距离 f[i]表示前i天到从起点到终点的最短距离 f[0] = -K f[i] = min(f[i], f[j - 1] + co ...

  8. hdu 1059二进制优化背包问题

    #include<stdio.h> #include<string.h> int max(int a,int b ) {  return a>b?a:b; } int a ...

  9. mappedBy的具体使用及其含义

    mappedBy: 1>只有OneToOne,OneToMany,ManyToMany上才有mappedBy属性,ManyToOne不存在该属性: 2>mappedBy标签一定是定义在被拥 ...

  10. SpringData JPA进阶查询—JPQL/原生SQL查询、分页处理、部分字段映射查询

    上一篇介绍了入门基础篇SpringDataJPA访问数据库.本篇介绍SpringDataJPA进一步的定制化查询,使用JPQL或者SQL进行查询.部分字段映射.分页等.本文尽量以简单的建模与代码进行展 ...