css代码：
@media screen and (min-width:1000px){
*{
margin:0;
padding:0;
transition:all 0.3s;
}
a{
text-decoration:none;
color:DarkBlue;
}
a:hover{
color:red;
}
.outbox{
position:relative;
width:80%;
margin:0 auto;
display:flex;
display:-webkit-flex;
}
.box{
width:100px;
height:100px;
box-shadow:1px 1px black inset,-1px -1px black inset;
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
border-radius:50%;
cursor:pointer;
}
.box span{
display:block;
width:80%;
text-align:center;
}
.outbox div:nth-child(odd){
background:orange;
}
}
index.asp代码
<!--#include file="admin/myinclude/myconnect.asp"-->
<%
call conn_open(conn,"mydata/db.mdb")
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>砸蛋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/pc.css" charset="utf-8">
<meta name="viewport" content="width=10,initial-scale=1,user-scalable=no">
<meta name="applicable-device" content="pc,mobile">
</head>
<body>
<div class="outbox">
<%
'先判断用户是否参与过这个活动，如果参与过则不必参与，下面的代码就没有必要了。判断步骤省略，不然业务逻辑太复杂，写不过来。假设用户没有参与过这个活动。
sql="select id from 奖品"
call rs_open1(rs,sql)
do while not rs.eof
%>
<div class="box" onclick="choujiang(this)">
">
<span>金蛋</span>
</div>
<%
rs.movenext
loop
call rs_close(rs)
%>
</div>
<script>
//用ajax向后台传值，把用户点击的奖品id传值到后台，在后台继续对id进行判断。
function choujiang(obj){
if(obj.children[0].value != ""){//判断id是否为空，id不为空则表示蛋可以砸，为空则表示蛋已经被砸，不能再砸。
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","mydata/mypost.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("tj="+obj.children[0].value);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var node = xmlhttp.responseText;
obj.children[0].value == "";//id强行清空，防止二次砸蛋。
obj.children[1].innerHTML = node;
obj.style.background = "black";
obj.children[1].style.color="red";
}
}
}
}
</script>
</body>
<%
call conn_close(conn)
%>
</html>
mypost.asp代码
<%
'此处做用户名验证，防止未登录用户砸蛋。
'此处判断用户是否已经参与砸蛋活动，如果已经参与活动，则跳转或停止。
if request.form("tj") <> "" then
%>
<!--#include file="../admin/myinclude/myconnect.asp"-->
<%
call conn_open(conn,"db.mdb")
sql="select id,奖品,概率 from 奖品 where id="&request.form("tj")
call rs_open1(rs,sql)
if not rs.eof and not rs.bof then
Randomize
if Int((cint(100/rs("概率")) * Rnd) + 1) = 1 then
response.write "恭喜中大奖了,奖品是"&rs("奖品")
else
response.write "运气太差没有中奖"
end if
end if
call rs_close(rs)
call conn_close(conn)
end if
%>
效果图：
好像不能上传图片，所以就没有效果图了。
