jQuery는 간단한 복권 게임 기술 공유를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

小云云

Jan 12, 2018 am 11:36 AM

jquery 운 게임

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7514

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Nvgpucomp64.dll로 인해 Windows PC 게임이 중단됩니다. Mar 26, 2024 am 08:20 AM

Nvgpucomp64.dll로 인해 게임이 자주 충돌하는 경우 여기에 제공된 해결 방법이 도움이 될 수 있습니다. 이 문제는 일반적으로 오래되거나 손상된 그래픽 카드 드라이버, 손상된 게임 파일 등으로 인해 발생합니다. 이러한 문제를 해결하면 게임 충돌을 처리하는 데 도움이 될 수 있습니다. Nvgpucomp64.dll 파일은 NVIDIA 그래픽 카드와 연결되어 있습니다. 이 파일이 충돌하면 게임도 충돌합니다. 이는 일반적으로 LordsofttheFallen, LiesofP, RocketLeague 및 ApexLegends와 같은 게임에서 발생합니다. Nvgpucomp64.dll이 N인 경우 Windows PC에서 게임과 충돌함

슈퍼피플 게임 다운로드 및 설치 방법 소개 Mar 30, 2024 pm 04:01 PM

슈퍼피플 게임은 Steam 클라이언트를 통해 다운로드할 수 있습니다. 이 게임의 크기는 일반적으로 다운로드 및 설치에 1시간 30분 정도 걸립니다. 새로운 글로벌 비공개 테스트 신청 방법 1) 스팀 스토어에서 'SUPERPEOPLE' 검색(스팀 클라이언트 다운로드) 2) 'SUPERPEOPLE' 스토어 페이지 하단의 'SUPERPEOPLE 비공개 테스트 접근 권한 요청' 클릭 3) 접근 요청 버튼, "SUPERPEOPLECBT" 게임은 스팀 라이브러리에서 확인하실 수 있습니다. 4) "SUPERPEOPLECBT"에서 설치 버튼을 클릭하신 후 다운로드 받으세요.

win11에서 Spider Solitaire는 어디에 있습니까? Win11에서 Spider Solitaire 게임을 플레이하는 방법 Mar 01, 2024 am 11:37 AM

AAA 명작과 모바일 게임을 충분히 플레이한 친구들, 어린 시절의 컴퓨터 게임을 다시 경험하고 싶나요? 그렇다면 Windows 11의 Spider Solitaire를 함께 찾아보세요! 인터페이스에서 시작 메뉴를 클릭하고 "모든 앱" 버튼을 클릭합니다. Microsoft의 Solitaire 시리즈 게임 애플리케이션인 "MicrosoftSolitaireCollection"을 찾아 선택합니다. 로딩이 완료되면 선택 인터페이스로 들어가서 "스파이더 솔리테어"를 찾고 "스파이더 솔리테어"를 선택하세요. 인터페이스가 약간 바뀌었지만 여전히 이전과 동일합니다.

ASUS는 Intel 13/14세대 프로세서의 게임 안정성을 향상시키기 위해 BIOS 업데이트를 출시했습니다. Apr 20, 2024 pm 05:01 PM

4월 20일 이 사이트의 소식에 따르면 ASUS는 최근 Intel 13/14세대 프로세서에서 게임 실행 시 충돌 등의 불안정성을 개선하는 BIOS 업데이트를 출시했습니다. 이 사이트는 이전에 플레이어들이 Bandai Namco의 격투 게임 "철권 8"의 PC 데모 버전을 실행할 때 컴퓨터에 충분한 메모리와 비디오 메모리가 있어도 시스템이 충돌하고 메모리 부족을 나타내는 오류 메시지가 표시되는 등의 문제를 보고했다고 보고했습니다. 유사한 충돌 문제는 "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" 및 "The Finals"와 같은 많은 게임에서도 나타났습니다. RAD는 올해 2월에 긴 기사를 게재하여 게임 충돌 문제가 Intel 프로세서의 BIOS 설정, 높은 클럭 주파수 및 높은 전력 소비의 조합이라고 설명했습니다.

Win11에서 게임을 플레이할 때 입력 방법을 비활성화하는 방법 Mar 15, 2024 pm 02:40 PM

최근 일부 친구들은 게임을 할 때 입력 방법을 자주 누르는 것이 게임 경험에 큰 영향을 미친다고 보고했습니다. 여기서는 Win11에서 게임을 할 때 입력 방법을 비활성화하는 방법에 대해 자세히 소개하겠습니다. 친구들이 와서 구경할 수 있어요. 비활성화 방법: 1. 오른쪽 하단에 있는 작업 표시줄에서 입력 방법 아이콘을 마우스 오른쪽 버튼으로 클릭하고 목록에서 "언어 기본 설정"을 선택합니다. 2. 새 인터페이스로 들어간 후 "기본 언어 추가" 옵션을 클릭하세요. 3. 팝업창에서 "English (United States)"를 선택하세요. 4. "다음"을 다시 클릭하세요. 5. 그런 다음 필요에 따라 일부 옵션을 설치할지 여부를 선택합니다. 6. 그런 다음 "설치"를 클릭하고 설치가 완료될 때까지 기다립니다. 7. 그런 다음 오른쪽 하단에 있는 입력 방법 상태 표시줄을 클릭하고 "영어(

PS5 Pro의 길을 닦는 'No Man's Sky'의 업데이트 코드는 콘솔 개발 코드명 'Trinity'와 이미지 품질 구성 파일을 '놀랐습니다' Jul 22, 2024 pm 01:10 PM

22일 본 사이트 소식에 따르면 외신인 Twistedvoxel은 '노 맨스 스카이'의 최신 '월드 파트 1' 업데이트 코드에서 소문난 PS5 개발 코드명 'Trinity'와 관련 화질 구성 파일을 발견해 소니가 PS5Pro 모델이 최근 출시되었습니다. "No Man's Sky"는 최근 업데이트를 통해 게임의 그래픽 성능을 향상시켰지만, 많은 플레이어들은 이것이 HelloGames가 PS5 Pro의 최신 그래픽 사전 설정에 따르면 사전에 새로운 모델의 길을 닦은 것이라고 믿고 있습니다. 스케일링이 0.6에서 0.8로 증가했습니다. 이는 게임의 평균 해상도가 더 높고 일부 그래픽 세부 사항이 "높음"에서 "울트라" 수준으로 업그레이드되었음을 의미합니다.

Excel 복권 애플릿을 만드는 방법 Mar 20, 2024 am 11:40 AM

일상생활에서 우리는 추첨이 필요한 일을 많이 접하게 되는데, 전통적인 방법은 종이 숫자를 사용하여 무작위로 숫자를 그리는 것입니다. 전자 소프트웨어의 발달로 컴퓨터를 사용하여 추첨을 할 수 있게 되었습니다. 오늘은 엑셀복권애플릿 만드는 방법입니다. 1. 먼저 Excel 소프트웨어를 열고 준비한 테이블을 엽니다. 테이블에는 이름이 포함되어 있어야 합니다. 2. 그런 다음 아래 그림과 같이 오른쪽 셀을 병합하고 오늘 밤 행운이 있는 사람을 검정색으로 채우고 아래 셀을 병합하여 빨간색으로 채웁니다. 3. 그런 다음 아래 그림과 같이 빨간색 영역에 randbetween 함수를 입력하고 첫 번째 줄을 2로 마지막 줄을 7로 설정합니다. 4. 그런 다음 앞에 ind를 입력합니다.