HBuilder制作英雄皮肤抽奖小游戏

用HBuilder制作英雄皮肤抽奖小游戏，主要用到“轮播图”和“定时器”，至于“轮播图”和“定时器”

是什么，请自行百度就OK。话不多少，直接上程序代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>皮肤抽奖</title><!--设置css样式--><style>.boxs {margin: 150px auto;width: 1040px;height: 465px;padding: 30px;background: url(img/back1.jpg) repeat center center;position: relative;text-align: center;}.boxs h1 {position: absolute;left: 425px;height: 10px;color: #f66;}.innerBox {width: 930px;height: 225px;padding: 0 15px;position: absolute;left: 65px;top: 120px;overflow: hidden;}.innerBox div {list-style: none;float: left;padding: 5px;width: 300px;height: 225px;overflow: hidden;position: relative;}.innerBox ul{list-style: none;position: absolute;left: 0;top: 0;padding: 0;        margin: 0;  }.innerBox li img {display: block;width: 300px;height: 225px;}#Play {width: 100px;height: 100px;border-radius: 50%;background-color: #66f;color: #fff;font-size: 30px;font-weight: 500;margin-top: 360px;}</style><!--导入随机数js文件（js文件中封装了一个生成指定范围的随机数函数）--><script src="js/random.js"></script><!--导入jQuery文件--><script src="jquery-3.2.1.js"></script><script>jQuery(function($) {//创建对象（按钮、抽奖框、图片列表和下标）var $play = $('#Play');var $box1 = $('.box1');var $ul1 = $box1.children('ul');var $box2 = $('.box2');var $ul2 = $box2.children('ul');var $box3 = $('.box3');var $ul3 = $box3.children('ul');var index1 = 0;var index2 = 0;var index3 = 0;//复制第一张图片，并放到最后var firstPic =$('.warp1 li').first().clone();$ul1.append(firstPic);var firstPic =$('.warp2 li').first().clone();$ul2.append(firstPic);var firstPic =$('.warp3 li').first().clone();$ul3.append(firstPic);//设置按钮点击事件$play.on('click', function() {//重置下标值index1 = 0;index2 = 0;index3 = 0;//设置定时器var timerStart1 = setInterval(autoplay1, 30);var timeStop1 = randomNumber(120, 130)*30;var timerStart2 = setInterval(autoplay2, 30);var timeStop2 = randomNumber(142, 152)*30;var timerStart3 = setInterval(autoplay3, 30);var timeStop3 = randomNumber(164, 174)*30;//点击按钮后设置延时结束（3个抽奖框停止时间不一样）var firstBox = setTimeout(function() {clearInterval(timerStart1);}, timeStop1);var secondBox = setTimeout(function() {clearInterval(timerStart2);}, timeStop2);var thirdBox = setTimeout(function() {clearInterval(timerStart3);}, timeStop3);                    //计算返回最终显示的图片对应的编号function numJpg(num){var jpgNumPrv = parseInt((num / 30 - 100)%10);                  return jpgNumPrv;}var num1 = numJpg(timeStop1);var num2 = numJpg(timeStop2);var num3 = numJpg(timeStop3);//通过返回的图片对应的编号判断是否中奖setTimeout(function() {if(num1 === num2 && num2 === num3){alert('恭喜中奖了,中奖皮肤编号为'+num1);                         }else{alert('继续努力');}}, 8000);});//自动轮播图function autoplay1() {index1++;if(index1 === $ul1.children().length){index1 = 1;$ul1.css('top','0px');}var toper = -index1*$box1.height();$ul1.animate({                   top:toper},20);}function autoplay2() {index2++;if(index2 === $ul2.children().length){index2 = 1;$ul2.css('top','0px');}var toper = -index2*$box1.height();$ul2.animate({                 top:toper},20);}function autoplay3() {index3++;if(index3 === $ul3.children().length){index3 = 1;$ul3.css('top','0px');}var toper = -index3*$box1.height();$ul3.animate({                 top:toper},20);}})</script>
</head><body><div class="boxs"><h1>王者荣耀皮肤抽奖</h1><div class="innerBox"><div class="box1"><ul class="warp1">  <li><img src="img/1.jpg" alt="" /></li><li><img src="img/2.jpg" alt="" /></li><li><img src="img/3.jpg" alt="" /></li><li><img src="img/4.jpg" alt="" /></li><li><img src="img/5.jpg" alt="" /></li><li><img src="img/6.jpg" alt="" /></li><li><img src="img/7.jpg" alt="" /></li><li><img src="img/8.jpg" alt="" /></li><li><img src="img/9.jpg" alt="" /></li><li><img src="img/10.jpg" alt="" /></li></ul></div><div class="box2"><ul class="warp2">        <li><img src="img/1.jpg" alt="" /></li><li><img src="img/2.jpg" alt="" /></li><li><img src="img/3.jpg" alt="" /></li><li><img src="img/4.jpg" alt="" /></li><li><img src="img/5.jpg" alt="" /></li><li><img src="img/6.jpg" alt="" /></li><li><img src="img/7.jpg" alt="" /></li><li><img src="img/8.jpg" alt="" /></li><li><img src="img/9.jpg" alt="" /></li><li><img src="img/10.jpg" alt="" /></li></ul></div><div class="box3"><ul class="warp3"><li><img src="img/1.jpg" alt="" /></li><li><img src="img/2.jpg" alt="" /></li><li><img src="img/3.jpg" alt="" /></li><li><img src="img/4.jpg" alt="" /></li><li><img src="img/5.jpg" alt="" /></li><li><img src="img/6.jpg" alt="" /></li><li><img src="img/7.jpg" alt="" /></li><li><img src="img/8.jpg" alt="" /></li><li><img src="img/9.jpg" alt="" /></li><li><img src="img/10.jpg" alt="" /></li></ul></div></div><button id="Play">开始抽奖</button></div>
</body>
</html>

效果图如下：

需要注意的是：

1，需要先导入随机数函数

<script src="js/random.js"></script>

具体函数代码如下：

function randomNumber(start, end){    var randomNum = parseInt(Math.random()*(end-start)+start);
    return randomNum;
}

2，导入jQuery文件

<script src="jquery-3.2.1.js"></script>

3，导入图片

在body内部导入图片，图片可以自己找。

HBuilder制作英雄皮肤抽奖小游戏相关推荐

android 数字滚动抽奖_2020年会必备，Excel轻松制作抽奖小游戏
不知不觉就到了年底,新的一年即将从明天开始.时光流逝,不禁让人感慨万千. 当然在这个时间大家应都在期待着年终奖.年会吧.今天我想和大家分享一个Excel制作的抽奖小游戏,可以一次抽一人也可以一次抽多人 ...
使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏描述一个抽奖小游戏demo, 点击抽奖按钮进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击抽奖按钮 ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
Unity制作随机数字抽奖小案例
Unity制作随机数字抽奖小案例 1. 搭建 UI 界面 2. 实现思路 2-1. 创建 RandomNumber 类 [挂载在每个抽奖格子(Numbers下面的Image)] 2-2. 创建 Sta ...
HTML5小游戏-简单抽奖小游戏
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
unity课设小游戏_Unity制作20个迷你小游戏实例训练视频教程
本教程是关于Unity制作20个迷你小游戏实例训练视频教程,时长:20小时,大小:3.8 GB,MP4高清视频格式,教程使用软件:Unity,附源文件,作者:Raja Biswas,共97个章节,语言 ...
python设计抽奖游戏球_python3实现小球转动抽奖小游戏
最近老师在讲 tkinter,所以我做了一个抽奖小游戏. 一.效果图先上效果图.红色的小球会围绕蓝色小球做环形运动.我设置的四个角是奖品,其余的都是再接再厉. 二.方法基于tkinter中的but ...
计算机课玩的小游戏怎么找,能够回味电脑课的小游戏是什么怎么制作这两个小游戏...
能够回味电脑课的小游戏是什么,怎么制作这两个小游戏.在我的世界里回味已经是很多人的游玩乐趣之一了,因为这个游戏超高的自由度还有各种玩法可以让我们回味童年的种种. 这些小游戏乍一看都不怎么需要技巧简单 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...

HBuilder制作英雄皮肤抽奖小游戏

HBuilder制作英雄皮肤抽奖小游戏相关推荐

最新文章

热门文章