>  기사  >  웹 프론트엔드  >  jQuery는 간단한 복권 게임 기술 공유를 구현합니다.

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

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

이 글은 간단한 복권 게임을 구현하기 위한 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는 간단한 복권 게임 기술 공유를 구현합니다.

관련 추천 :

jQuery+PHP 주사위 복권 게임 예제 구현, jquery dice_PHP 튜토리얼

JS 디지털 복권 게임 구현 방법_javascript 기술

js 대형 회전목마 복권 게임 구현 example_javascript 기술

jQuery, PHP, Mysql 복권 프로그램 구현 예제 자세한 설명

복권 확률 계산을 PHP로 구현하는 방법 알고리즘 예시 공유

위 내용은 jQuery는 간단한 복권 게임 기술 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.