后台如何利用 HTML 投票

html-css033

后台如何利用 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 

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

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

投票系统制作方法如下:

操作工具:vivo X9

操作系统:Funtouch OS 7.127

软件:微信v8.2

一、打开微信,在搜索栏里输入“微信投票”,在下面的关联窗口里单击“微信投票小程序”进行搜索。

二、在搜索结果里选择“腾讯投票”小程序。

三、页面会自动跳转到小程序,本例选择新建一个单选投票。

四、进入投票设置页面,设置标题,内容和选项,点击完成。

五、进入下一页面后可以看到新建的投票页面,右上角有个转发按钮,点击。

六、在最下方会出现一个转发,单击该按钮。

七、页面会跳转到转发对象页面,选择要发给的微信朋友或微信群即可,系统即会自动将投票链接发到该朋友或群里。