后台如何利用 HTML 投票

html-css07

后台如何利用 HTML 投票,第1张

用application做,不知道你是否满意,

首先在你网站根目录下新建一个名为:Global.asa的文件,然后把下列代码贴上去:

<script language="vbscript" runat="server">

Sub Application_OnStart

application("yes")=0

application("no")=0

End Sub

</script>

然后再建一个投票的ASP文件,内容:

<style type="text/css">

<!--

.Vote {

height: 15px

width: 200px

border: 1px solid #0033FF

}

#cYes {

background-color: #FF6600

height: 15px

width: 100px

}

#cNo {

background-color: #FF6600

height: 15px

width: 100px

}

-->

</style>

<form action="" method="post">

<br />

<input name="yes" type="radio" value="yes" onclick="if (this.checked==true) no.checked=false" />赞成<br />

<input name="no" type="radio" value="no" onclick="if (this.checked==true) yes.checked=false"/>反对<br />

<input name="投票" type="submit" value="投票" />

</form>

<%

nyes=0

nNo=0

'如果想重新计票,用下面四行

'application.lock()

'application("yes")=application("yes")+1

'application("no")=application("no")+1

'application.unlock()

count=application("yes")+application("no")

if count<>0 then

nyes=int(application("yes")*200/count)

nNo=int(application("no")*200/count)

end if

sYes=Request.form("yes")

sNo=Request.form("no")

act= Request.form("投票")

if act="投票" Then

if sYes="yes" Then

application.lock()

application("yes")=application("yes")+1

application.unlock()

Else

if sNo="no" then

application.lock()

application("no")=application("no")+1

application.unlock()

end if

End if

'图形化显示投票结果

count=application("yes")+application("no")

if count<>0 then

nyes=int(application("yes")*200/count)

nNo=int(application("no")*200/count)

end if

end if

%>

赞成:<%=application("yes")%>票

<div class="Vote" ><div ID="cYes" neme="cYes" style="width:<%=nyes%>px"></div></div>

反对::<%=application("no")%>票

<div class="Vote" ><div ID="cNo" neme="cNo" style="width:<%=nNo%>px"></div></div>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>动漫投票</title>

</head>

<!-- 这里使用了一张背景,注释掉了。

<body style="background-image:url(body.jpeg) background-size:100% background-repeat: no-repeat">

 -->

 <body>

    <div align="center"><img src="head2.jpg" /></div>

    <div  align="center">

    <h4>热门动漫投票</h4>

        <table id="main" >

            <tr >

                <td>

                    <input type="radio" name="option" checked="checked"/>猫和老鼠

                </td>

            </tr>

            <tr>

                <td style="width:550px">

                    <div id=0 style="background-color:#acd6ff width:0 height:20px border-width:0px">

                    </div>

                </td>

                <td>

                    <label id="label0">0</label>票

                </td>

            </tr>

            <tr>

                <td>

                    <input type="radio" name="option"  />海贼王

                </td>

            </tr>

            <tr >

                <td>

                    <div id=1 style="background-color:#0066cc height:20px width:0 border-width:0px border-color:blue border-style:solid  text-align:right" ></div>

                    

                </td>

                <td>

                <label id="label1">0</label>票

                </td>

            </tr>    

            <tr >

                <td>

                    <input type="radio" name="option"  />喜羊羊

                </td>

            </tr>

            <tr >

                <td>

                    <div id=2 style="background-color:#ff7575 height:20pxwidth:0  border-width:0px border-color:blue border-style:solid  text-align:right" ></div>

                    

                </td>

                <td>

                <label id="label2">0</label>票

                </td>

            </tr>    

            <tr>

                <td>

                    <input type="radio" name="option" />其他

                </td>

            </tr>

            <tr >

                <td>

                    <div id=3 style="background-color:#5cadadheight:20pxwidth:0 border-width:0px border-color:blue border-style:solid  text-align:right" ></div>

                    

                </td>

                <td>

                <label id="label3">0</label>票

                </td>

            </tr>

        

            <tr>

                <td><p>

                    <input type="submit" value="确认投票" onclick="vote()"/>        

                </td>

            </tr>

        </table>

    </div>

</body>

<script type="text/javascript">

 

    //在每个投票选项后面写了个div,用div的宽度来代表当前该选项的投票数。

    function vote(){    //函数vote,当点击确认投票的时候,调用vote方法

        

        //for循环的条件是,所有投票选项的个数。

        for(var i = 0 i < document.getElementsByName("option").length i++){

            

            //查找到是哪个投票选项被选中

            if(document.getElementsByName("option")[i].checked == true){

                var width = document.getElementById(i).style.width    //获取到当前选项的宽度。

                width = parseInt(width)//将宽度转化为int型,因为获取到的width的单位是px

                width += 3//改变width的值,这里就是定义每次投票的进度条的增速

                document.getElementById(i).style.width = width+"px"//修改原div的宽度

                

                var label = "label"+i//lable标签里面写的是当前的投票数目。

                var num = document.getElementById(label).innerText//获取到当前的票数

                document.getElementById(label).innerText = ++num//票数加1,并修改原值

            }

        }

 

        //alert("投票成功")

        

    }

 

</script>

</html>

--------------------- 

作者:王Bob 

来源:CSDN 

原文:https://blog.csdn.net/u011215133/article/details/51068484 

版权声明:本文为博主原创文章,转载请附上博文链接!

可以看看这个一个简单的投票系统,可以参考下。

这是一个简单的投票程序,对于刚学PHP和朋友来说是一个很不错的入门程序。在这里给大家介绍一下,希望能对朋友们有所帮助。该系统是由以下四个文件组成的:有HTML调查表单的survey.htm,实现调查功能的survey.php,记录调查项目的data.txt和记录调查结果的survey.txt.其中data.txt和survey.txt我们可以用NOTEPAD分别创建之,并传到程序目录下。文件data.txt中存的是要进行调查的项目,注意每个项目应占一行;而survey.txt则可以是一个什么内容也没有的空文件。Survey.htm的代码可以如如下所示:<html>

<head>

<title>survey</title>

</head>

<body>

<form method="POST" action="survey.php">

<p><input type="radio" value="0" name="vote">调查项目一</p>

<p><input type="radio" name="vote" value="1">调查项目二</p>

<p><input type="radio" name="vote" value="2">调查项目三</p>

<p><input type="radio" name="vote" value="3">调查项目四</p>

<p><input type="radio" name="vote" value="4">调查项目五</p>

<p><input type="hidden" name="go" value="1">

<p><input type="submit" value="提交" name="B1"></p>

<a href="survey.php?result=1">查看结果</a>

</form>

</body>

</html>注意文件data.txt中的调查项目与上面的调查项目在个数和排列顺序必须保持一致,否则会出错或调查的结果不准确。同时为了将调查结果显示成条形图形式,应该准备若干种不同颜色的条形图片。如:0.gif,1.gif,2.gif,3.gif,4.gif等.以下是实现调查功能的survey.php代码:<?

$data="data.txt"

$votes="survey.txt"

$dataf=file($data) /*读出调查项目文件中的项目*/

$file_votes=fopen($votes, "r")

$line_votes=fgets($file_votes, 255)/*读出已经记录的调查结果*/

fclose($file_votes)

$single_vote=explode("|", $line_votes)/* 并将数据按指定的字串切开,再将字串传回到数组变量中 */

if ($result!=1) /*如果已经接受了调查*/

{

$file_votes=file($votes, "r")

if ($REMOTE_ADDR == $file_votes[1]) /*检查是不是同一个人*/

{

echo "<center><font color=red>您已投过票了,谢谢您的参与!</font></center>"

exit

}

/*如果IP不重复,则执行以下程序*/

$ficdest=fopen($votes, "w")

for ($i=0$i<=count($dataf)-1$i++)

{

if ($i == $vote)

{ /*判断选择了哪个项目*/

$single_vote[$i]+=1

}

fputs($ficdest, "$single_vote[$i]|")/*将数据写回文件*/

}

fputs($ficdest, "\n$REMOTE_ADDR")/* //写入投票者IP*/

fclose($ficdest)

$result=1/*投票成功*/

}

/*写入投票结果后并显示投票结果*/

if ($result==1)

{

echo "<table cellpadding=10>"

for ($i=0$i<=count($dataf)-1$i++)

{

/*取得投票总数*/

$tot_votes+=$single_vote[$i]

}

for ($i=0$i<=count($dataf)-1$i++)

{

$imag=strval($i).".gif"/*判断用哪种条形图片来显示统计结果*/

$stat[$i]=$single_vote[$i]/$tot_votes*100/*计算百分比*/

$scla=$stat[$i]*5/*条形图和放大倍数,这里是安百分数的5倍的相素的宽度来显示的*/

echo "<tr><td><li><font face=Verdana size=2>"

echo "$dataf[$i]</font></td><td align=left><font face=Verdana size=2>"

echo "<img src=\"$imag\" height=20 width=$scla align=middle>"/*输出条形码图*/

printf("%.1f", "$stat[$i]")

echo "%</font></td><td align=center><font face=Verdana size=2>"

/*输出本栏目投票数*/

echo "$single_vote[$i]</font>"

echo "</td></tr>"

}

echo "</table><p>"

echo "<font face=Verdana size=2>总投票数:$tot_votes </font>"

}

?>说明: 在这里为了防止一人多投是采用记录最近的一位投票者的IP的方法来实现的,而最近的一位投票的IP地址是WEB客户机在对服务器发出请求时存储在环境变量REMOTE_ADDR中的。我也是一个初学者,关于这篇文章可能有许多错误和不当之处欢迎各位提出宝贵的意见和建议。谢谢!