집 > 기사 > 웹 프론트엔드 > JS는 무작위 복권 시스템을 만듭니다.

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

php中世界最好的语言원래의: 2018-04-13 13:53:113204검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!