jQuery实现简单抽奖大转盘

上效果！！！

初始页面效果

点击开始后效果

上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>抽奖</title><script src="../js/jquery.js"></script><style>*{margin: 0;padding: 0;}li{list-style: none;}.box{margin: 50px auto;width: 430px;text-align: center;}.box input{margin-top: 30px;margin-bottom: 30px;width: 400px;height: 48px;border: 2px solid skyblue;color:red;font-size: 16px;font-weight: 700;}.box ul{display: flex;flex-wrap: wrap;justify-content: center;}.box ul li{margin-right: 20px;margin-bottom: 20px;width: 120px;height: 120px;background-image: linear-gradient(to bottom right, rgb(155, 236, 242), rgb(168, 242, 138));text-align: center;line-height: 120px;box-shadow: 4px 4px 5px rgb(225, 125, 200);font-size: 20px;text-shadow: 2px 2px 3px rgb(236, 87, 7);}.box ul li:nth-child(3n){margin-right: 0;}.box .start{background-image: linear-gradient(to bottom right, rgb(9, 216, 231), rgb(75, 238, 10));}.active{background-image: linear-gradient(to bottom right, red, yellow)!important;}</style>
</head>
<body><div class="box"><h1>抽奖大转盘</h1><input type="text"><br><ul><li class="li1 ">冰箱</li><li class="li2">餐具</li><li class="li3">抽纸</li><li class="li8">电饼档</li><li class="start">开始</li><li class="li4">微波炉</li><li class="li7">玩偶</li><li class="li6">茶杯</li><li class="li5">夏凉被</li></ul></div><script>// 产生随机数函数function getRandom(N,M){return Math.floor(Math.random()*(M-N+1))+N}// 设置变量// sums 总转动次数let sums = getRandom(10,20);// sum 转动次数let sum = 0;// i 控制哪个li改变颜色的变量let i = 0;// 给开始li添加点击事件$('.box .start').click(function(){// 设置定时器let time = setInterval(function(){sum++;i++;// 取消有active属性的li的该属性$('.active').removeClass('active');//  给转动到的li添加active属性$(`.li${i}`).addClass('active');//    当li转动到第八个，重新转动if(i == 8){i = 0}if(sum > sums){// 清除定时器clearInterval(time);    //    渲染input$('.box input').val(`  恭喜你抽中:${$('.active').text()}！！！`)}},200) })</script>
</body>
</html>

注意：

当用clearInterval（）清除定时器的时候一定要放在setInterval（）里面呀，否则清除不掉啊~~~

jQuery实现简单抽奖大转盘相关推荐

js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
qq开放平台之站内应用-php抽奖大转盘,jQuery实现大转盘抽奖活动仿QQ音乐代码分享...
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:--------------------------- ...
微信小程序独家秘笈之抽奖大转盘
代码地址如下: http://www.demodashi.com/demo/14209.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
Redis 抽奖大转盘的实战示例
本文主要介绍了Redis 抽奖大转盘的实战示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.编程学习资料点击领取目录 1. 项目介绍 2. 项目演示 3. 表结 ...
vue幸运抽奖大转盘的丑绝实现
自己通过canvas+vue(vue不是必备的可以)实现的一个抽奖转盘,重点在实现逻辑,所以样式丑绝. 基本效果图,中间指针可以替换为图片数据格式转盘的分块由传入的数组长度确定,分为4,6,8块还 ...
产品经理的金字塔之旅---抽奖大转盘产品逻辑
抽奖大转盘产品逻辑作为一个好的活动推广,抽奖大转盘这一活动往往是必不可少的.但是之前作为一个用户角度单纯的只是希望自己可以中奖,根本不会从产品的角度去思考这一产品逻辑,现作为一名产品经理才明白并不是 ...
css3抽奖转盘,从零制作CSS3抽奖大转盘
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果. 我只说思路和重要的CSS3代码. Paste_Image.png 外盘外盘是指有彩灯的深橙色圆环,以及圆环的外边线. 外盘设 ...
用c语言写抽奖大转盘,iOS抽奖大转盘的二种实现方法
有个朋友需要写个抽奖大转盘的功能,就让我帮忙写了下.我用了2种方法实现了效果,在这里和大家一起分享下. 一.一键转动大转盘我一开始拿到手的是一堆的图片,然后自己花了点时间,搭建出美工要求的UI,接下 ...
javaScript实现抽奖大转盘（一）
今天试了试自己写个抽奖大转盘. 先是借了两张别人的图片: 下面是布局部分: <div class="round"><div class="box&quo ...

jQuery实现简单抽奖大转盘

初始页面效果

点击开始后效果

上代码

jQuery实现简单抽奖大转盘相关推荐

最新文章

热门文章