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="<%=basePath%>">
<head>
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(function(){

var alldata = 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="cimage/1.jpg">
<img id="show2" height="300px" width="300px" src="cimage/6.jpg">
<img id="show3" height="300px" width="300px" src="cimage/11.jpg">
</div>

<div class="btn">
<a href="javascript:void(0)" class="start" id="btn">开始抽奖</a>
</div>

</body>
</html>

结束，主要为自己做备忘，同时方便有需要的人。呵呵！

jquery 抽奖示例的更多相关文章

  1. jQuery抽奖插件 jQueryRotate

    实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...

  2. Jquery cxColor 示例演示

    今天第一次自己做调色板调用,看了半天官方的例子愣是没看懂,唉,码农老矣,尚能码否? 经过对官方下载的示例一删一浏览终于弄出来了,这么简单的东西,官方的Demo逼格也太高了 上代码: <!DOCT ...

  3. python运维开发(十七)----jQuery续(示例)web框架django

    内容目录: jQuery示例 前端插件 web框架 Django框架 jQuery示例 dom事件绑定,dom绑定在form表单提交按钮地方都会绑定一个onclick事件,所有查看网站的人都能看到代码 ...

  4. java springboot2 jquery 抽奖项目源码

    java+springboot2+jquery+jdk8   实现的多种抽奖效果! 体验抽奖地址: http://47.98.175.6:8091/ 赞助获得源码!!!

  5. jQuery插件示例笔记

    插件的种类 封装对象方法的插件 将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作. //注意,为了更好的兼容性开始前有个分号 ;(function($){ //此处将$作为匿名函数的 ...

  6. jquery抽奖插件+概率计算

    写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~. demo lottery.jquery.js $.fn.ex ...

  7. jQuery使用示例详解

    [jquery引用字段] <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv ...

  8. jQuery选择器示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery trigger-bind示例

    $('#btnSearch').bind('click',function(){ .....}) 然后用trigger来激活事件:$('#btnSearch').trigger('click');

随机推荐

  1. C++项目中的extern "C" {}

    from:http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html C++项目中的extern "C" {} 20 ...

  2. 【Json】关于json解析时异常org.json.JSONException: A JSONObject text must begin with '{' at character 1 of {的解决方法

    遇到这种异常有几种情况: 1.JSON格式有问题,检查一下格式. 2.格式没问题,仍然报错,这个是因为你的json文件头里带有编码字符(如UTF-8等),读取字符串时json串是正常的,但是解析就有异 ...

  3. 利用session_set_save_handler()函数将session保存到MySQL数据库中

    PHP保存session默认的是采用的文件的方式来保存的,这仅仅在文件的空间开销很小的windows上是可以采用的,但是如果我们采用uinx或者是liux上的文件系统的时候,这样的文件系统的文件空间开 ...

  4. PHP错误处理函数set_error_handler()的用法

    定义和用法 set_error_handler() 函数设置用户自定义的错误处理函数. 该函数用于创建运行时期间的用户自己的错误处理方法. 该函数会返回旧的错误处理程序,若失败,则返回 null. 语 ...

  5. 提高MYSQL百万条数据的查询速度

    提高MYSQL百万条数据的查询速度 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 nul ...

  6. 7.2WebApi2中的全局异常处理

    现在在WebApi中还没有一种简单的方式去记录或者处理全局的异常.一些未处理的异常可以处理通过异常过滤器,但有大量的异常是异常过滤器不能处理的.例如: 从控制器的构造函数引发的异常. 从消息处理程序引 ...

  7. java final 关键字

    1.修饰类当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用final进行修饰.final类中的成员变量可以根据需要设为final,但是要注意fina ...

  8. (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因

    摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...

  9. getComputedStyle的简单用法

    var number=window.getComputedStyle("元素").style样式名

  10. 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...