이 글은 간단한 복권 게임을 구현하기 위한 jQuery를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
오늘 작성할 내용은 jQuery를 사용하여 로또 케이스를 작성하는 것입니다. 페이지에는 4개의 구성 요소가 포함되어 있으며 두 개의 버튼은 시작 및 중지 버튼입니다. 두 개의 상자에는 각각 사람과 상품이 들어 있습니다. 시작 버튼을 클릭하면 사람들이 계속 전환합니다. 대기 중인 추첨 결과는 추첨 상자에 표시됩니다. 중지 버튼을 누르면 두 개의 상자에 각각 사람의 이름과 당첨된 상금이 표시됩니다.
페이지 렌더링은 다음과 같습니다.
페이지가 그다지 아름답지 않을 수도 있습니다. 우리가 주로 구현하는 것은
함수입니다. 먼저 본문에 컴포넌트
<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 = [ 'A君' , ' B君 ' , ' C君 ' , ' D君 ', ' E君 ' , ' F君 ' , ' G君 ']; var list2 = ['YSL', ' iphone7', ' iphone6', ' 手表', ' 小红花', ' 谢谢参与',' 谢谢参与',' 谢谢参与']; // 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+PHP 주사위 복권 게임 예제 구현, jquery dice_PHP 튜토리얼
JS 디지털 복권 게임 구현 방법_javascript 기술
js 대형 회전목마 복권 게임 구현 example_javascript 기술
jQuery, PHP, Mysql 복권 프로그램 구현 예제 자세한 설명
복권 확률 계산을 PHP로 구현하는 방법 알고리즘 예시 공유
위 내용은 jQuery는 간단한 복권 게임 기술 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!