집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

小云云원래의: 2018-01-12 11:36:281850검색

이 글은 간단한 복권 게임을 구현하기 위한 jQuery를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

오늘 작성할 내용은 jQuery를 사용하여 로또 케이스를 작성하는 것입니다. 페이지에는 4개의 구성 요소가 포함되어 있으며 두 개의 버튼은 시작 및 중지 버튼입니다. 두 개의 상자에는 각각 사람과 상품이 들어 있습니다. 시작 버튼을 클릭하면 사람들이 계속 전환합니다. 대기 중인 추첨 결과는 추첨 상자에 표시됩니다. 중지 버튼을 누르면 두 개의 상자에 각각 사람의 이름과 당첨된 상금이 표시됩니다.

페이지 렌더링은 다음과 같습니다.

jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

페이지가 그다지 아름답지 않을 수도 있습니다. 우리가 주로 구현하는 것은

함수입니다. 먼저 본문에 컴포넌트

<body>
<input type = "button" class = "btn" id = "start" value = "开始">
<input type = "button" class = "btn" id = "stop" value = "停止">

<p id = "number" class = "box1"></p>
<p id = "jiangpin" class = "box2"></p>
</body>

를 정의한 다음 스타일을 설정합니다.

css 코드:

<style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 .btn{
 width: 90px;
 height: 40px;
 background-color: lightgreen;
 color: white;
 font-size: 18px;
 font-family: "微软雅黑";
 text-align: center;
 line-height: 40px;

 }
 .box1{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top:150px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 .box2{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top: 300px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 </style>

다음 단계는 함수를 작성하는 것입니다. 여기서 인용한 것은 "http://libs.baidu.com/jquery/1.9.0/jquery.js"의 jQuery 라이브러리입니다.

<script >
$(document).ready(function(){

// 1. 首先第一步定义两个数组，存放人员和奖品

var list1 = [ &#39;A君&#39; , &#39; B君 &#39; , &#39; C君 &#39; , &#39; D君 &#39;, &#39; E君 &#39; , &#39; F君 &#39; , &#39; G君 &#39;];
var list2 = [&#39;YSL&#39;, &#39; iphone7&#39;, &#39; iphone6&#39;, &#39; 手表&#39;, &#39; 小红花&#39;, &#39; 谢谢参与&#39;,&#39; 谢谢参与&#39;,&#39; 谢谢参与&#39;];


// 2. 为开始按钮绑定点击事件

$("#start").click(function(){
 //2.1 先将奖品的盒子中的内容初始化
 $("#jiangpin").html("等待抽奖中...");

 //2.2 利用setInterval()函数进行人员名字切换
 // 定义一个变量去接受它每次的状态
 functionId = setInterval(function(){
 var n = Math.floor(Math.random() * list1.length);
 $("#number").html(list1[n]);
 },30);

 });

// 3. 为停止按钮绑定点击事件
 $("#stop").click(function(){
 // 3.1 清除setInterval()。并停止在最后一次的人员名上
 clearInterval(functionId);
 // 3.2 随机产生奖品数组的下标，并将下标对应的元素写入奖品区
 var jiang = Math.floor(Math.random() * list2.length);
 $("#jiangpin").html(list2[jiang]);
 });
})
</script>

이 경우는 비교적 간단하므로 자세히 설명하지 않겠습니다. 최종 렌더링은 아래에 첨부되어 있습니다.

시작 버튼을 클릭한 후 인원 이름이 빠르게 전환되는 방법입니다.

jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

아래는 정지 버튼을 누른 최종 우승자와 그에 따른 상품

jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

관련 기사