html5投票系统哪个比较好？_随笔

<!DOCTYPE html>

<html>

<head>

</head>

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

-->

<body>

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

<tr >

<td>

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

</td>

</tr>

<tr>

</div>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

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

</td>

</tr>

<tr >

<td>

</td>

<td>

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

</td>

</tr>

<tr >

<td>

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

</td>

</tr>

<tr >

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

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

</td>

</tr>

<tr >

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td><p>

</td>

</tr>

</table>

</div>

</body>

//在每个投票选项后面写了个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

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

首先，先预计一个投票系统需要的项目，有几个页面。一、建立一个数据库存放投票结果的数据；二、第一个页面：vote.asp这是一个投票页面，给网页游览者投票的页面；三、处理页面：addvote.asp这是处理投票数据的页面，是不可见的。四、显示结果页面：view.asp显示投票的结果。

一个投票系统制作大概有以下流程：

1. 先建立一个数据库名字为：data.mdb,data.mdb数据库里有表：vote。vote有fgood(很好),fmid(中等),fbad(很差)这三个列,这个数据表vote: 表中列：有：fgood,fmid,fbad

2. 建立一个投票页面：vote.asp

在这个页面里面实现表单数据的传输，设计如下：

这是部分的效果，表单名：form1. 代码如下：

<form name="form1" method="post" action="addvote.asp"> 把传输方式设为：post。把动作设为：addvote.asp(这是处理投票结果的页面，由这个动作转到这个处理页面进行数据处理)。

3. 建立一个数据库的链接页：conn.asp.

通过这里把程序与数据库链接起来。

源代码：<%

set conn=server.createobject("adodb.connection")

connstr="Provider=Microsoft.jet.oledb.4.0data source="&server.mappath("data.mdb")

conn.open connstr

4. 建立投票处理页面：addvote.asp。

里面包含数据库链接文件：conn.asp,代码：。这个页面里主要对vote.asp页面传输过来的表单数据进行处理，把相应的表单数据更新到数据里。传输的数据有三种：fgood、fmid、fbad。处理代码：

if (request.Form("rbresult"))="" then

response.Write(" language=javascript>alert(‘还没投呢！')history.back()</script>")‘//这里检验传输表单是否为空

else response.Write(" language=javascript>alert('谢谢投票！')go(1)</script>")

if(request.form("rbresult")<>"")then Command1__strupdate = request.form("rbresult")

set rs = Server.CreateObject("ADODB.recordset")

sql= "UPDATE vote SET "&Command1__strupdate&"="&Command1__strupdate&"+1"

set rs=conn.execute(sql)

end if

5. 接下来就是处理如何显示投票结果的页面：view.asp。页面效果如下：

这个页面的处理代码：

<%Set rsvote = Server.CreateObject("ADODB.Recordset")

Sql = "SELECT fGood, fMid, fBad, (fGood+fMid+fBad) as VTotal, (fGood/VTotal) as GoodPercent, (fMid/VTotal) as MidPercent, (fBad/VTotal) as BadPercent FROM Vote"

Rsvote=conn.execute(sql)

%> ’//这段代码对数据进行处理

接下来就是显示的问题了。经常看到网站上的投票结果有一个比例长短，这个如何实现呢，其实这个就是利用了网页表格的宽度可以用百分比来表示来做的。步骤如下：

(1).先建立一个四行两列的表格

(2).在表格里面写入数据库的数据以显示结果：

这里的数据是处理完后的数据，处理过程已经在上面的代码中实现了，下面就是把数据与表格绑定，而柱状的比例条，则是把得到的百分比来绑定内嵌的表格的宽度，因为这个显示的表格宽度数据是一个动态的数据，也就是说可以随着数据的改变而改变柱状的比例了。绑定如下：

总票数： <%rsvote(“total”)%>

很好：表格内嵌,设宽为：<%rsvote(“GoodPercent”)%>

共有：<%rsvote(“fGood”)%>人

中等：表格内嵌,设宽为：<%rsvote(“MidPercent”)%>

共有：<%rsvote(“fMid”)%>人

很差：表格内嵌,设宽为：<%rsvote(“BadPercent”)%>

共有：<%rsvote(“fBad”)%>人

6．测试成功了，结果是正确的。显示效果如（5.）中图所示。

总结：总的说来，建立一个网站的投票系统是非常有用的，通过本次的制作，从中我学到了很多知识，如：对数据库的连接，对数据库的 *** 作等语法都有相当多的了解，而且这个投票系统是我个人为班级做的网站http://soho8.net/03eit/上的一个投票系统。作为一个成功的网站是需要有一个投票系统的。能够更好地学习交流、改进。以提高网站制作者的水平，更能够建设出更好的网站。也可以把投票系统改成其他的项目，如问卷调查，完全可以用这个方法来做。然后进行处理统计数据并加以显示。以上为本人做网站过程中制作投票系统的一个总结。在网站建设中有诸多不足之处：对网站开发平台不够熟悉，很多组件及其之间的联系掌握不够以至不能灵活运用，造成网站内容不丰富，结构不太合理。但收获还是梃大的，在这次设计中，使我综合运用所学知识和技能对实际问题的分析概括能力加强，通过检索文献资料、了解、学习、掌握学科专业领域中新的知识和发展动态，并恰当地将其运用到，同时让我深深体会到网站建设的艰辛与乐趣，开发者必须态度端正，认真制定设计方案和工作计划，严格按照流程完成设计的各个环节。

用Cookie来记录最后一次投票的时间，每次投票时就和当前时间作对比，可以防止重复投票，票数也用Cookie来记录，但只能对同一台机器有效了。我只能给你设置和读取Cookie的代码，怎么用只是取决于你的业务逻辑，很简单自己实现吧。/*设置cookie@param cookieName -- Cookie名称@param cookieValue -- Cookie的值*/

function setCookie(cookieName, cookieValue) {

if(cookieValue == "") {

return

}

var date = new Date()

date.setTime(date.getTime()+1000*(60*60*24*10)) //设置cookie过期时间

document.cookie = cookieName + "=" + escape(cookieValue) + "expires=" + date.toGMTString()

}/*根据cookie名称读取cookie的值@param cookieName -- Cookie名称*/function readCookieValue(cookieName) {

var v = document.cookie

var start1 = v.indexOf(cookieName)

if(start1 == -1) { //没有找到对应名称的Cookie

return ""

}else {

var start = v.indexOf("=",start1)+1

var end = v.indexOf("",start)

return unescape(v.substring(start,end))

}

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7306021.html

html5投票系统哪个比较好？

发表评论

评论列表（0条）