首页 > 代码库 > jquery 抽奖示例
jquery 抽奖示例
jquery 抽奖示例:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 随机抽奖 </title>
<base href="http://www.mamicode.com/">
<head>
<script type="text/javascript" src="http://www.mamicode.com/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var alldata = http://www.mamicode.com/new Array("cimage/1.jpg","cimage/2.jpg","cimage/3.jpg","cimage/4.jpg",
"cimage/5.jpg","cimage/6.jpg","cimage/7.jpg","cimage/8.jpg","cimage/9.jpg",
"cimage/10.jpg","cimage/11.jpg","cimage/12.jpg","cimage/13.jpg","cimage/14.jpg",
"cimage/15.jpg");
var num = alldata.length - 1;
var show1 = $("#show1");
var show2 = $("#show2");
var show3 = $("#show3");
var btn = $("#btn");
var open = false;
function change(){
var randomVal1 = Math.round(Math.random() * num);
var randomVal2 = Math.round(Math.random() * num);
var randomVal3 = Math.round(Math.random() * num);
var prizeName1 = alldata[randomVal1];
var prizeName2 = alldata[randomVal2];
var prizeName3 = alldata[randomVal3];
show1.attr("src",prizeName1);
show2.attr("src",prizeName2);
show3.attr("src",prizeName3);
}
function run(){
if(!open){
timer=setInterval(change,30);
btn.removeClass(‘start‘).addClass(‘stop‘).text(‘停止‘);
open = true;
}else{
clearInterval(timer);
btn.removeClass(‘stop‘).addClass(‘start‘).text(‘开始抽奖‘);
open = false;
}
}
btn.click(function(){
run();
});
});
</script>
<style>
body{ background:#fff;}
.wrap{ width:300px; margin:100px auto; font-family:"微软雅黑";}
.show{ width:300px; height:300px; background-color:#ff3300; line-height:300px; text-align:center; color:#fff; font-size:28px; -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#FF9600), to(#F84000), color-stop(0.5,#fb6c00)); -moz-box-shadow:2px 2px 10px #BBBBBB; -webkit-box-shadow:2px 2px 10px #BBBBBB; box-shadow:2px 2px 10px #BBBBBB;}
.btn a{ display:block; width:120px; height:50px; margin:30px auto; text-align:center; line-height:50px; text-decoration:none; color:#fff; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;}
.btn a.start{ background:#80b600;}
.btn a.start:hover{ background:#75a700;}
.btn a.stop{ background:#00a2ff;}
.btn a.stop:hover{ background:#008bdb;}
</style>
</head>
<body>
<div>
<img id="show1" height="300px" width="300px" src="http://www.mamicode.com/cimage/1.jpg">
<img id="show2" height="300px" width="300px" src="http://www.mamicode.com/cimage/6.jpg">
<img id="show3" height="300px" width="300px" src="http://www.mamicode.com/cimage/11.jpg">
</div>
<div class="btn">
<a href="javascript:void(0)" class="start" id="btn">开始抽奖</a>
</div>
</body>
</html>
结束，主要为自己做备忘，同时方便有需要的人。呵呵！
jquery 抽奖示例