java 9宫格抽奖_九宫格抽奖HTML+JS版

div{

margin: 100px auto 0px; // 居中

width:500px;

height:250px;

border:3px solid black; // 边框

}

li{

width:129px;

height:59px;

border:3px solid black;

float:left; // 向左浮动

margin:8px 0 0 8px; // 设置图片间的间距

list-style:none;

}

.btn{

border:3px solid blue; // 设置为红色边框

cursor:pointer; // 设置光标类型为指针

}

.cur{

border:3px solid red; // 设置为红色边框

}

zhuanpan

• 1
• 2
• 3
• 谢谢参与
• 点击抽奖
• 1
• 2
• 3
• 谢谢参与

// 整个转动过程所需的步骤

var step = [

['c1',0], // 第一个元素特殊设置

['c1', 500],

['c2', 100],

['c3', 300],

['c4', 200],

['c5', 200],

['c6', 200],

['c7', 200],

['c8', 200],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 200],

['c3', 300],

['c4', 300],

['c5', 300],

['c6', 300],

['c7', 300],

['c8', 300],

['c1', 400],

['c2', 400],

['c3', 400],

['c4', 400],

['c5', 400],

['c6', 400],

['c7', 400],

['c8', 400]

];

// 记录当前步数，即step数组的下标

var current = 1;

// 设置样式和重新设置定时器

function run(){

// 删除之前设置的cur类

$('#'+step[current-1][0]).removeClass('cur');

// 为当前元素设置cur类

$('#'+step[current][0]).addClass('cur');

// 判断step数组所有步骤是否已经走完

if(current == step.length - 1){

alert(step[current][0]);

window.location.reload();

}else{

// 重新设置定时器

setTimeout('run()', step[current][1]);

current++;

}

}

Js写九宫格抽奖

国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

php+lottery.js制作九宫格抽奖实例

php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js

PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表

JS版百度地图API

地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

PureMVC(JS版)源码解析：总结

PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

常见排序算法(JS版)

常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html

随机推荐

jQueryMobile引入文件后样式无法正常显示

jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:

【微网站开发】之微信内置浏览器API使用

最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...

VNC 抓取远程桌面

VNC (Virtual Network Computing)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNI ...

nginx 重启

/etc/init.d/nginx -s reload /etc/init.d/nginx reload

做自己的PHP语法解释器

PHP关键字异构化实验 PHP词法分析和语法分析 简单理解PHP代码执行过程:http://blog.csdn.net/risingsun001/article/details/22888861 PH ...

这可能是新手最容易入门的JVM讲解(不过是一场恋爱)

作者:请叫我红领巾,转载请注明出处http://www.cnblogs.com/xxzhuang/p/7453746.html 一.写在前面 首先,本篇文章并没有涉及原理,而是在笔者撸了

Python基础之Windows下Python3.x环境搭建

本文介绍使用Python3.x搭建Python环境,文章最后将使用Windows自带的cmd写一个简单的Python程序. 下载Python环境安装包 在https:/www.python.org/下 ...

url跳转漏洞(1)

转载 https://landgrey.me/open-redirect-bypass/ 0x00:漏洞场景 URL跳转漏洞的出现场景还是很杂的,出现漏洞的原因大概有以下5个: 1. 写代码时没有考虑 ...

Mysql8远程不能登录报错

mysql8远程登录报错Client does not support authentication protocol requested by server; consider upgrading ...

windows环境下把Python代码打包成独立执行的exe

windows环境下把Python代码打包成独立执行的exe可执行文件   有时候因为出差,突然急需处理一批数据.虽然写好的脚本存储在云端随用随取,然而编译的环境还需要重新搭建,模块也需要重新装载,从 ...