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

随机推荐

mongo vue的常用操作

查找在某个范围内的记录: {"_id":{$in: [a,b,c]}}     如果images是个数组,则查询方式与普通数据一样:{"images":&quo ...

django(一)搭建开发环境

本学习系列均使用centos7操作系统,基于python3进行操作.centos7下的python3安装配置http://www.cnblogs.com/Guido-admirers/p/625941 ...

C# 图片旋转360度程序

这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...

zend studio 10 字体,颜色,快捷键等相关设置

一.修改字体 没想到zend studio 10中对中文显示不太好看,似乎有点小了.修改如下:打开 Window->Preferences->General->Appearance- ...

动态规划——线性dp

我们在解决一些线性区间上的最优化问题的时候,往往也能够利用到动态规划的思想,这种问题可以叫做线性dp.在这篇文章中,我们将讨论有关线性dp的一些问题. 在有关线性dp问题中,有着几个比较经典而基础的模 ...

SOAP详解

1. SOAP简介 1.1应用背景 对于应用程序开发来说,使程序之间进行因特网通信是很重要的.目前的应用程序通过使用远程过程调用(RPC)在诸如 DCOM 与 CORBA 等对象之间进行通信,但是 H ...

odoo Model字段的参数

odoo Model字段的参数 class Field(object): """ The field descriptor contains the field defi ...

C++类的成员

1.成员变量 成员变量可以是任何类型,如基本数据类型.引用.另一个类的对象或指针.自身类的引用或指针,但不能是自身类的对象: 成员变量不能指定为auto.register.extern 存储类型. 1 ...

【转】避免全表扫描的sql优化

对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描:· 使用ANALYZE TABLE tbl_name为扫 ...

Mysql date,datetime的区别以及相互转换

参考:https://blog.csdn.net/a3025056/article/details/62885104/ 在数据库中一直有这三个时间类型有点搞不太清楚. 今天就来说一下之间的区别,其实是 ...

html+抽奖游戏,九宫格抽奖HTML+JS版相关推荐

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

    div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...

  2. php jquery ajax九宫格抽奖,jQuery九宫格抽奖

    插件描述:网页中常用的九宫格抽奖代码 更新时间:2017/2/16 下午6:56:04 更新说明: 1.代码进行了优化: 2.更新了实际项目中用到的ajax接口请求,案例中注释便于展示效果: 3.主要 ...

  3. 你遇到过的测试难题(4)活动抽奖转盘九宫格抽奖测试用例测试点

    你遇到过的测试难题(4)关于抽奖活动概率测试 业务背景 测试计划 测试准备 测试关注点 测试总结 时间测试: 中奖记录: 中奖概率: 性能测试: 安全性测试: 时间场景: 动效场景: 概率场景: 抽奖 ...

  4. PHP九宫格翻牌抽奖,PHP 九宫格抽奖代码

    商城中营销活动最常见的就是大转盘抽奖了最近SHOPNC中正好需要这个12宫格抽奖,今天整理了下. 前端主要代码 友情提示:每次抽奖消耗5个百利积分 我的积分:19分 10倍积分 40倍积分 20倍积分 ...

  5. php九宫格抽奖思路,九宫格抽奖概率问题!!

    这种逻辑应该后台写,并且在提交中奖结果时要进行验证,否则前端太容易篡改数据了. 点击抽奖时,请求后台 后台返回抽奖结果 前端播放抽奖动画,并且保证最后停在返回的中奖结果项上 --- 更新 --- 大致 ...

  6. Android之九宫格抽奖及大转盘抽奖

    一:先来张效果图 二:实现步骤: -------.九宫格抽奖是从后台服务器获取的数据,图片文字以及抽奖选中位置都是后台控制 一:九宫格抽奖 1九宫格抽奖工具类(里面包含网络请求,不需要的可去掉) pa ...

  7. java 9宫格抽奖_原生JS实现九宫格抽奖

    本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: 谢谢惠顾 十万元现金 谢谢惠顾 iphone11 抽奖 美的冰箱 谢谢惠顾 50元红包 谢谢惠顾 CSS样式代码: ...

  8. js实现九宫格抽奖功能

    分享一下js的九宫格抽奖功能 首先是html部分: <div class="box"><div class="div2">短裙</ ...

  9. jQuery实现九宫格抽奖游戏

    # 九宫格抽奖游戏 本项目在github [链接]([https://github.com/freya0608/squaredUp](https://github.com/freya0608/squa ...

最新文章

  1. MYSQL 查询数据排序数据和分组数据
  2. PHP7 学习笔记(七)如何使用zephir编译一个扩展记录
  3. 全国计算机二级qq闪退,电脑上QQ闪退怎么回事?各个系统版本电脑QQ闪退现象的解决方法介绍...
  4. 反爬终极方案总结---字体反爬
  5. 在ASP.NET Core中使用百度在线编辑器UEditor
  6. html:(17):img标签和表单标签
  7. java quartz 数据库_SpringBoot+Quartz+数据库存储
  8. 左边任务栏_Windows10 系统桌面底部的任务栏在侧边了怎么还原
  9. Spring4.0编程式定时任务配置
  10. 算法一看就懂之「 数组与链表 」
  11. Kubernetes详解(二十三)——Deployment控制器更新策略
  12. 如何在苹果Mac中使用聚焦搜索 NTFS 格式磁盘?
  13. 精灵骑士二觉_守护者二觉转职分析 精灵骑士二觉能有多强
  14. 干货!软考高级网络规划设计师备考经验分享
  15. WPS添加带背景颜色的文本框
  16. html5平板游戏列表
  17. 决战平安京选择正确的服务器,决战!平安京怎么预先选择自己的位置 匹配预选位流程攻略...
  18. 阻容感基础06:电容器分类(1)-陶瓷电容
  19. 面试问到关于数据库的问题,看了这篇够用了!
  20. DeepRMethylSite:一种基于深度学习的蛋白质精氨酸甲基化位点预测方法

热门文章

  1. 片上总线Wishbone 学习—— 转载请注明出处:http://blog.csdn.net/ce123
  2. 《C专家编程》之 安静的改变
  3. 关于win10无限重启的解决方案
  4. 计算机网络base,计算机网络中的术语100Base-TX/FX指的是什么?
  5. 滴滴-2019+快手2020(A)-校园招聘算法工程师笔试题
  6. 一只小白,在学习delphi.感觉很吃力。。
  7. 燃石、泛生子会师纳斯达克,从招股书看异同(文末附IPO招股书)
  8. 英语翻译作业(十二)
  9. 微信QQ邮箱插件,附件Excel 无法打开,或者打开乱码问题
  10. AutoCAD Civil 3D创建点文件描述码(点特征码)集控制展点样式与特性