自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数,

代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<style type="text/css">

* {

margin: 0;

padding: 0

}

#wrap {

width: 420px;

height: 420px;

margin-top: 30px;

position: absolute;

left: 200px;

background: url(img/turnplate-bg.png);

border-radius: 50%;

}

#ul1 {

width: 420px;

height: 420px;

margin-top: 30px;

position: absolute;

left: 200px;

border-radius: 50%;

list-style: none;

}

#ul1 li{

width: 8px;height: 418px;

position: absolute;left: 207px;top: 3px;

}

#point{

width: 10px;height: 10px;background: red;

font-size: 12px;color: red;border-radius: 50%;

position: absolute;top: 2px;left: -1px;

box-shadow: 0px 0px 20px white;

animation: move1 1s linear infinite;

}

#box {

width: 400px;

height: 400px;

background: url(img/prize.png);

background-size: 100%;

position: absolute;

transform: rotate(18deg);

left: 10px;

top: 10px;

}

#handle {

width: 136px;

height: 136px;

position: absolute;

left: 143px;

top: 141px;

transition: all 5s ease-out;

z-index: 4;

}

#img1 {

width: 136px;

height: 222px;

position: absolute;

top: -44px;

}

#history{

width: 600px;

height: 400px;

border: 1px solid green;

position: absolute;

top: 30px;left: 700px;

}

#title{

font-size: 20px;

color: green;

width: 160px;

margin: 0 auto;

border-bottom: 1px solid green;

}

#num{font-size: 30px;color: red;}

@keyframes move1{

0%{background: yellow;}

25%{background: red;}

50%{background: green;}

75%{background: blue;}

100%{background: yellow;}

}

</style>

</head>

<body>

<div id="wrap">

<div id="box">

</div>

<div id="handle">

<img src="img/turnplate-pointer.png" id="img1" />

</div>

</div>

<ul id="ul1">

</ul>

<div id="history">

<div id="title">

你已经抽奖<span id="num"></span>次

</div>

<div id="">

<br/><br/><br/><br/>

实现要求：<hr /> <br/><br/>1、有且仅有3次抽奖机会;<br/><br/> 2、开始抽奖，指针随机转5-10圈（每圈360deg，即转的度数为1800-3600之间任意数）;<br/> <br/>3、要求把抽奖次数记录下来，把页面关掉重新打开依然有效；

</div>

</div>

</body>

</html>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

var arr = ['30M流量包', '100M流量包', '2闪币', '50M流量包', '10闪币',

'谢谢参与', '5闪币', '10M流量包', '20M流量包', '20闪币']

//定义随机度数

function randFun(max, min) {

return parseInt(Math.random() * (max - min) + min)

}

//显示抽奖次数

$('#num').html(numFun());

//防止多次点击

var lock1 = true,

lock2 = false,

lock3 = false;

//每次随机的转圈度数

var index1 = randFun(1800, 3600);

var index2 = randFun(index1+1800, index1+3600);

var index3 = randFun(index2+1800, index2+3600);

//第一次点击

$('#handle').on('click', function() {

if(lock1) {

lock1 = false;

$('#handle')[0].style.transform = 'rotate(' + index1 + 'deg)';

var a = Math.ceil((index1 % 360) / 36);

setTimeout(function() {

alert(arr[a - 1])

lock2 = true;

if(!document.cookie){

document.cookie = '抽奖次数=1';

$('#num').html(numFun());

}else{

var sum = Number(numFun())+1;

document.cookie = '抽奖次数='+sum;

$('#num').html(numFun());

}

}, 5000)

}

})

//第二次点击

$('#handle').on('click', function() {

if(lock2) {

lock2 = false;

$('#handle')[0].style.transform = 'rotate(' +index2 + 'deg)';

var b = Math.ceil((index2 % 360) / 36);

setTimeout(function() {

alert(arr[b - 1]);

lock3 = true;

var sum = Number(numFun())+1;

document.cookie = '抽奖次数='+sum;

$('#num').html(sum)

}, 5000)

}

})

//第三次点击

$('#handle').on('click', function() {

if(lock3) {

lock3 = false;

$('#handle')[0].style.transform = 'rotate(' +index3 + 'deg)';

var c = Math.ceil((index3 % 360) / 36);

setTimeout(function() {

alert(arr[c - 1]);

var sum = Number(numFun())+1;

document.cookie = '抽奖次数='+sum;

$('#num').html(sum)

$('#handle').on('click',function(){

alert('你的抽奖次数已用尽,请充100元钱获得一次抽奖机会?');

})

}, 5000)

}

})

//闪光灯

function lightsFun(){

for(var i = 0;i < 24;i++){

$('#ul1').append('<li><div id="point"></div></li>');

}

var lis = $('#ul1 li');

for(var j = 0;j<lis.length;j++){

lis[j].style.transform = 'rotate('+j*15+'deg)';

}

}

lightsFun()

//获取cookie数值

function numFun(){

return document.cookie.split('=')[1];

}

</script>

模仿抽奖转盘,并且用cookie记录历史次数的更多相关文章

  1. cookie记录浏览记录

    cookie记录浏览记录 HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做 ...

  2. cookie记录用户的浏览商品的路径

    在电子商务的网站中,经常要记录用户的浏览路径,以判断用户到底对哪些商品感兴趣,或者哪些商品之间存在关联. 下面将使用cookie记录用户的浏览过的历史页面.该网站将每个页面的标题保存在该页面的$TIT ...

  3. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  4. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  5. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

  6. cookie记录用户名

    在说如何用cookie记录用户名之前,我们先来说说cookie的工作原理: cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 ; 1. ...

  7. history 清空历史记录 或 history不记录历史命令

    # vi ~/.bash_history 清空里面的记录,并退出当前shell # exit(一定要退出当前shell) # history 1 vi ~/.bash_history 2 histor ...

  8. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  9. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

随机推荐

  1. 紫书 例题 10-11 UVa 11181（概率计算）

    这道题不能凭感觉做了.要套公式 r个人买了东西叫事件E, 第i个人买东西的概率叫做事件Ei 求得是P(E|Ei), 则P(E|Ei)= P(E|Ei)/ P(E) 那么P(E)可以枚举求得, 用递归求 ...

  2. STARTUPINFO结构体

    typedef struct _STARTUPINFO { DWORD cb; //包含STARTUPINFO结构中的字节数.如果Microsoft将来扩展该结构,它可用作版本控制手段.应用程序必须将 ...

  3. monkey自定义脚本

    自定义脚本稳定性测试 常规的monkey是执行随机的事件流,如果想让monkey测试某个特定的场景,这个时候需要自定义脚本. 用户需要先笔记好脚本再存放在手机上,通过启动monkey -f参数调用脚本 ...

  4. 多线程(二)Object类方法、线程的操作sleep()，join()，interrupt()，yield()

    四.Object类简介 Object类是所有类的超类,之所以放在线程部分是因为其方法很多是和线程有关的.比如以下三个: wait()方法.wait(long timeout)和wait(long ti ...

  5. python之ORM

    pymysql python操作数据库的基本步骤: 导入相应的python模块: 使用connect函数连接数据库,并返回一个connection对象: 通过connection对象的cursor方法 ...

  6. 洛谷-P3389-高斯消元模板

    链接: https://www.luogu.org/problem/P3389 题意: 给定一个线性方程组,对其求解 思路: 高斯消元,从第一项消到最后一项,消成一个上三角矩阵.再从最后一项依次向上回 ...

  7. mysql 报错从 新安装

    卸载从新安装,综合运用 https://www.jb51.net/article/146050.htm https://www.jb51.net/article/90275.htm https://w ...

  8. 【CF521C】Pluses everywhere（贡献）

    题意:有一个长为n的数字字符串,要求其中插入k个加号,求所有合法表达式的和之和 0<=k<n<=1e5 思路:参考官方题解,讲的很好很清楚 字符串下标从0开始 考虑第i位d[i]的贡 ...

  9. JavaWeb_(SSH论坛)_五、帖子模块

    基于SSH框架的小型论坛项目 一.项目入门 传送门 二.框架整合 传送门 三.用户模块 传送门 四.页面显示 传送门 五.帖子模块 传送门 六.点赞模块 传送门 七.辅助模块 传送门 回复帖子 分析回 ...

  10. Spring boot之JPA/Hibernate/Spring Data

    1.什么是JPA? JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA(Java Per ...