当前位置：网站首页>Hbuilder makes hero skin lottery games

Hbuilder makes hero skin lottery games

2022-06-24 10:33:00 【Land without autumn】

use HBuilder Make hero skin lottery games , Mainly used “ Shuffling figure ” and “ Timer ”, as for “ Shuffling figure ” and “ Timer ”

What is it? , Please go to Baidu by yourself OK. What words do not , Directly on the program code ：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title> Skin lottery </title>
	<!-- Set up css style -->
	<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>
	<!-- Import random number js file （js The file encapsulates a random number function that generates a specified range ）-->
	<script src="js/random.js"></script>
	<!-- Import jQuery file -->
	<script src="jquery-3.2.1.js"></script>
	
	<script>
		jQuery(function($) {
			// Create objects （ Button 、 Lottery box 、 Picture list and subscript ）
			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;
			
			// Copy the first picture , And put it to the end 
			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);
			
			// Set button click event 
			$play.on('click', function() {
				// Reset subscript value 
				index1 = 0;
				index2 = 0;
				index3 = 0;
				// Set the timer 
				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;
				// Click the button to set the end of delay （3 The stop time of each lottery box is different ）
				var firstBox = setTimeout(function() {
					clearInterval(timerStart1);
				}, timeStop1);
				var secondBox = setTimeout(function() {
					clearInterval(timerStart2);
				}, timeStop2);
				var thirdBox = setTimeout(function() {
					clearInterval(timerStart3);
				}, timeStop3);					
				
				// Calculate and return the number corresponding to the finally displayed picture 
				function numJpg(num){
					var jpgNumPrv = parseInt((num / 30 - 100)%10);					
					return jpgNumPrv;
				}
				
				var num1 = numJpg(timeStop1);
				var num2 = numJpg(timeStop2);
				var num3 = numJpg(timeStop3);
				
				// Judge whether to win the prize by the number corresponding to the returned picture 
				setTimeout(function() {
					if(num1 === num2 && num2 === num3){
						
						alert(' Congratulations on winning the prize , The winning skin number is '+num1);							
					}else{
						alert(' Continue to work hard ');
					}
				}, 8000);
			});
			
			// Automatic rotation chart 
			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> King glory skin draw </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"> Start raffle </button>
	</div>
</body>
</html>

The renderings are as follows ：

It should be noted that ：

1, You need to import the random number function first 

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

The specific function code is as follows ：

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

2, Import jQuery file 

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

3, Import image

stay body Import pictures internally , You can find the pictures yourself .

原网站

版权声明
本文为[Land without autumn]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/175/202206240923112738.html

边栏推荐

猜你喜欢

随机推荐