JS는 무작위 복권 시스템을 만듭니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS는 무작위 복권 시스템을 만듭니다.

php中世界最好的语言

Apr 13, 2018 pm 01:53 PM

javascript 운 체계

이번에는 JS를 이용한 무작위 복권 시스템을 소개해 드리겠습니다. JS를 사용하여 무작위 복권 시스템을 구축할 때의 주의 사항은 무엇입니까?

JavaScript를 사용하여 [시작] 버튼과 [중지] 버튼이 있는 간단한 복권 시스템을 구현하세요.

기능:

- 복권을 시작하려면 시작 버튼을 클릭하세요. 상품 이름이 무작위로 표시됩니다.
- 복권을 중지하려면 중지 버튼을 클릭하세요.
- 복권 시작과 중지 사이를 전환하려면 Enter 키를 누르세요.

효과

HTML 코드:

기본적으로 표시된 상품 이름과 시작 및 중지 버튼을 포함하는 html 구조를 만듭니다.

rreee

Node.js 메인 코드 조각:

먼저 데이터 배열을 정의하고 각 상품의 이름을 작성합니다. 그리고 타이머와 키보드 이벤트 상태 플래그를 초기화합니다(초기 상태는 0, 키보드를 누르면 1로 바뀌고, 키보드를 다시 누르면 0으로 바뀌는 등).

<!doctype html>
<html>
<head>
  <title>抽奖系统</title>
  <meta charset="utf-8">
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
  <p id="title" class="title">开始抽奖啦！</p>
  <p class="btns">
    <span id="play">开 始</span>
    <span id="stop">停 止</span>
  </p>
</body>
</html>

로그인 후 복사

복권 시작 함수 playFun();

var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券'];
  timer = null,
  flag = 0;

로그인 후 복사

정의 복권 중지 함수 stopFun();

function playFun() {
  var title = document.getElementById('title');
  var play = document.getElementById('play');
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  //定时器50毫秒触发一次
  timer = setInterval(function(){
    //获取奖品下标随机数
    var random = Math.floor(Math.random() * data.length);
    //显示随机的奖品名称
    title.innerHTML = data[random];
  }, 50);
  //改变将开始按钮背景色
  play.style.background = '#666';
}

로그인 후 복사

을 정의하세요. Enter 키를 눌러 추첨 상태 이벤트를 전환하세요.

function stopFun(){
  //清除定时器即可结束抽奖
  clearInterval(timer);
  var play = document.getElementById('play');
  //改变将停止按钮背景色
  play.style.background = '#036';
}

로그인 후 복사

Node.js 전체 코드:

document.onkeyup = function(event){
  event = event || window.event;
  //回车键键码为13
  if (event.keyCode == 13) {
    //如果状态flag值为0则开始抽奖，并把状态值改为1，否则停止抽奖并把状态值改为0
    if (flag == 0){
      playFun();
      flag = 1;
    }else{
      stopFun();
      flag = 0;
    }
  }
}

로그인 후 복사

CSS 스타일:

var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
  timer = null, //定时器
  flag = 0; //用于键盘事件状态标记
window.onload = function() {
  var play = document.getElementById('play'),
    stop = document.getElementById('stop');
  // 开始抽奖
  play.onclick = playFun;
  stop.onclick = stopFun;
  // 键盘事件
  document.onkeyup = function(event) {
    event = event || window.event;
    if (event.keyCode == 13) {
      if (flag == 0) {
        playFun();
        flag = 1;
      } else {
        stopFun();
        flag = 0;
      }
    }
  }
}
// 开始抽奖
function playFun() {
  var title = document.getElementById('title');
  var play = document.getElementById('play');
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  timer = setInterval(function() {
    var random = Math.floor(Math.random() * data.length);
    title.innerHTML = data[random];
  }, 50);
  play.style.background = '#999';
}
//停止抽奖
function stopFun() {
  clearInterval(timer);
  var play = document.getElementById('play');
  play.style.background = '#036';
}

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

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

7465

Cakephp 튜토리얼

1376

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

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

CUDA의 보편적인 행렬 곱셈: 입문부터 숙련까지! Mar 25, 2024 pm 12:30 PM

GEMM(일반 행렬 곱셈)은 많은 응용 프로그램과 알고리즘의 중요한 부분이며 컴퓨터 하드웨어 성능을 평가하는 중요한 지표 중 하나이기도 합니다. GEMM 구현에 대한 심층적인 연구와 최적화는 고성능 컴퓨팅과 소프트웨어와 하드웨어 시스템 간의 관계를 더 잘 이해하는 데 도움이 될 수 있습니다. 컴퓨터 과학에서 GEMM의 효과적인 최적화는 컴퓨팅 속도를 높이고 리소스를 절약할 수 있으며, 이는 컴퓨터 시스템의 전반적인 성능을 향상시키는 데 중요합니다. GEMM의 작동 원리와 최적화 방법에 대한 심층적인 이해는 현대 컴퓨팅 하드웨어의 잠재력을 더 잘 활용하고 다양하고 복잡한 컴퓨팅 작업에 대한 보다 효율적인 솔루션을 제공하는 데 도움이 될 것입니다. GEMM의 성능을 최적화하여

화웨이의 Qiankun ADS3.0 지능형 운전 시스템은 8월에 출시될 예정이며 처음으로 Xiangjie S9에 출시될 예정입니다. Jul 30, 2024 pm 02:17 PM

7월 29일, AITO Wenjie의 400,000번째 신차 출시 행사에 Huawei 전무이사이자 Terminal BG 회장이자 Smart Car Solutions BU 회장인 Yu Chengdong이 참석하여 연설을 했으며 Wenjie 시리즈 모델이 출시될 것이라고 발표했습니다. 올해 출시 예정 지난 8월 Huawei Qiankun ADS 3.0 버전이 출시되었으며, 8월부터 9월까지 순차적으로 업그레이드를 추진할 계획입니다. 8월 6일 출시되는 Xiangjie S9에는 화웨이의 ADS3.0 지능형 운전 시스템이 최초로 탑재됩니다. LiDAR의 도움으로 Huawei Qiankun ADS3.0 버전은 지능형 주행 기능을 크게 향상시키고, 엔드투엔드 통합 기능을 갖추고, GOD(일반 장애물 식별)/PDP(예측)의 새로운 엔드투엔드 아키텍처를 채택합니다. 의사결정 및 제어), 주차공간부터 주차공간까지 스마트 드라이빙의 NCA 기능 제공, CAS3.0 업그레이드

Apple 16 시스템의 어떤 버전이 가장 좋나요? Mar 08, 2024 pm 05:16 PM

Apple 16 시스템의 최고 버전은 iOS16.1.4입니다. iOS16 시스템의 최고 버전은 사람마다 다를 수 있으며 일상적인 사용 경험의 추가 및 개선도 많은 사용자로부터 호평을 받았습니다. Apple 16 시스템의 가장 좋은 버전은 무엇입니까? 답변: iOS16.1.4 iOS 16 시스템의 가장 좋은 버전은 사람마다 다를 수 있습니다. 공개 정보에 따르면 2022년에 출시된 iOS16은 매우 안정적이고 성능이 뛰어난 버전으로 평가되며, 사용자들은 전반적인 경험에 상당히 만족하고 있습니다. 또한, iOS16에서는 새로운 기능 추가와 일상 사용 경험 개선도 많은 사용자들에게 호평을 받고 있습니다. 특히 업데이트된 배터리 수명, 신호 성능 및 발열 제어 측면에서 사용자 피드백은 비교적 긍정적이었습니다. 그러나 iPhone14를 고려하면

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

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

항상 새로운! Huawei Mate60 시리즈가 HarmonyOS 4.2로 업그레이드: AI 클라우드 향상, Xiaoyi Dialect는 사용하기 매우 쉽습니다. Jun 02, 2024 pm 02:58 PM

4월 11일, 화웨이는 처음으로 HarmonyOS 4.2 100개 시스템 업그레이드 계획을 공식 발표했습니다. 이번에는 휴대폰, 태블릿, 시계, 헤드폰, 스마트 스크린 및 기타 장치를 포함하여 180개 이상의 장치가 업그레이드에 참여할 것입니다. 지난달 HarmonyOS4.2 100대 업그레이드 계획이 꾸준히 진행됨에 따라 Huawei Pocket2, Huawei MateX5 시리즈, nova12 시리즈, Huawei Pura 시리즈 등을 포함한 많은 인기 모델도 업그레이드 및 적응을 시작했습니다. 더 많은 Huawei 모델 사용자가 HarmonyOS가 제공하는 일반적이고 종종 새로운 경험을 즐길 수 있을 것입니다. 사용자 피드백에 따르면 HarmonyOS4.2를 업그레이드한 후 Huawei Mate60 시리즈 모델의 경험이 모든 측면에서 개선되었습니다. 특히 화웨이 M

컴퓨터 운영 체제는 무엇입니까? Jan 12, 2024 pm 03:12 PM

컴퓨터 운영체제는 컴퓨터 하드웨어와 소프트웨어 프로그램을 관리하는 데 사용되는 시스템이기도 하며, 모든 소프트웨어 시스템을 기반으로 개발된 운영체제 프로그램이기도 합니다. 아래에서 편집자는 컴퓨터 운영 체제가 무엇인지 공유합니다. 소위 운영 체제는 컴퓨터 하드웨어 및 소프트웨어 프로그램을 관리하는 것입니다. 모든 소프트웨어는 운영 체제 프로그램을 기반으로 개발됩니다. 실제로 산업용, 상업용, 개인용 등 광범위한 응용 프로그램을 포괄하는 다양한 유형의 운영 체제가 있습니다. 아래에서는 편집자가 컴퓨터 운영 체제가 무엇인지 설명합니다. Windows 시스템이란 어떤 컴퓨터 운영 체제입니까? Windows 시스템은 미국 Microsoft Corporation에서 개발한 운영 체제입니다. 무엇보다

Oracle 데이터베이스에서 시스템 날짜를 수정하는 방법에 대한 자세한 설명 Mar 09, 2024 am 10:21 AM

Oracle 데이터베이스에서 시스템 날짜를 수정하는 방법에 대한 자세한 설명 Oracle 데이터베이스에서 시스템 날짜를 수정하는 방법은 주로 NLS_DATE_FORMAT 매개 변수를 수정하고 SYSDATE 함수를 사용하는 것입니다. 이 기사에서는 독자가 Oracle 데이터베이스에서 시스템 날짜를 수정하는 작업을 더 잘 이해하고 숙달할 수 있도록 이 두 가지 방법과 구체적인 코드 예제를 자세히 소개합니다. 1. NLS_DATE_FORMAT 매개변수 메소드 수정 NLS_DATE_FORMAT은 Oracle 데이터입니다.

Linux 및 Windows 시스템에서 cmd 명령의 차이점과 유사점 Mar 15, 2024 am 08:12 AM

Linux와 Windows는 각각 오픈 소스 Linux 시스템과 상용 Windows 시스템을 대표하는 두 가지 일반적인 운영 체제입니다. 두 운영 체제 모두 사용자가 운영 체제와 상호 작용할 수 있는 명령줄 인터페이스가 있습니다. Linux 시스템에서는 사용자가 Shell 명령줄을 사용하고 Windows 시스템에서는 cmd 명령줄을 사용합니다. Linux 시스템의 Shell 명령줄은 거의 모든 시스템 관리 작업을 완료할 수 있는 매우 강력한 도구입니다.

See all articles

JS는 무작위 복권 시스템을 만듭니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제