복권 시스템의 JavaScript 구현 공유 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

복권 시스템의 JavaScript 구현 공유 예

小云云

Jan 16, 2018 pm 01:24 PM

javascript js 예

이 글은 주로 JavaScript 기반의 복권 시스템을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

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

기능:

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

Effect

html 코드:

html 구조를 생성합니다. 가장 기본적인 것은 표시된 상품 이름과 시작 및 중지 버튼을 포함하는 것입니다.

<!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>

로그인 후 복사

js 메인 코드 스니펫:

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

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

로그인 후 복사

복권 시작 함수 playFun()을 정의합니다. ;

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

로그인 후 복사

복권 중지 기능 정의 stopFun();

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

로그인 후 복사

복권 상태 이벤트를 전환하려면 Enter 키를 누르세요.

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;
    }
  }
}

로그인 후 복사

js 전체 코드:

var data = [&#39;Phone7&#39;, &#39;Ipad&#39;, &#39;三星笔记本&#39;, &#39;佳能相机&#39;, &#39;惠普打印机&#39;, &#39;谢谢参与&#39;, &#39;100元充值卡&#39;, &#39;1000元超市购物券&#39;],
  timer = null, //定时器
  flag = 0; //用于键盘事件状态标记

window.onload = function() {

  var play = document.getElementById(&#39;play&#39;),
    stop = document.getElementById(&#39;stop&#39;);

  // 开始抽奖
  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(&#39;title&#39;);
  var play = document.getElementById(&#39;play&#39;);
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  timer = setInterval(function() {
    var random = Math.floor(Math.random() * data.length);
    title.innerHTML = data[random];
  }, 50);
  play.style.background = &#39;#999&#39;;
}
//停止抽奖
function stopFun() {
  clearInterval(timer);
  var play = document.getElementById(&#39;play&#39;);
  play.style.background = &#39;#036&#39;;
}

로그인 후 복사

css 스타일 :

* {
  margin: 0;
  padding: 0;
}

.title {
  font-size: 24px;
  font-weight: bold;
  width: 400px;
  height: 70px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  color: #f00;
}

.btns {
  width: 190px;
  height: 30px;
  margin: 0 auto;
}

.btns span {
  font-family: &#39;微软雅黑&#39;;
  font-size: 14px;
  line-height: 27px;
  display: block;
  float: left;
  width: 80px;
  height: 27px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border: 1px solid #eee;
  border-radius: 7px;
  background: #036;
}

로그인 후 복사

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1653

Cakephp 튜토리얼

1413

라라벨 튜토리얼

1306

PHP 튜토리얼

1251

C# 튜토리얼

1224

Related knowledge

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.

Golang의 포인터 변환 모범 사례를 알아보세요. Feb 24, 2024 pm 03:51 PM

Golang은 다양한 애플리케이션과 서비스를 개발하는 데 사용할 수 있는 강력하고 효율적인 프로그래밍 언어입니다. Golang에서 포인터는 데이터를 보다 유연하고 효율적으로 운영하는 데 도움이 되는 매우 중요한 개념입니다. 포인터 변환은 다양한 유형 간의 포인터 작업 프로세스를 나타냅니다. 이 기사에서는 특정 예제를 사용하여 Golang의 포인터 변환 모범 사례를 학습합니다. 1. 기본 개념 Golang에서 각 변수에는 주소가 있으며, 주소는 메모리에서 변수의 위치입니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles

복권 시스템의 JavaScript 구현 공유 예

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제