JSはランダム抽選システムを作成します-jsチュートリアル-php.cn

JSはランダム抽選システムを作成します

php中世界最好的语言

リリース： 2018-04-13 13:53:11

オリジナル

3280 人が閲覧しました

今回はJSでランダム抽選システムを作るための注意点を紹介します。実際の事例を見てみましょう。

JavaScriptを使用して、[スタート]ボタンと[ストップ]ボタンを備えた簡単な抽選システムを実装します。

機能:

- 開始ボタンをクリックして宝くじを開始すると、賞品の名前がランダムに表示されます
- 停止ボタンをクリックして宝くじを停止します
- Enter キーを押して宝くじの開始と停止を切り替えます。

効果

HTMLコード:

HTML 構造を作成します。最も基本的な構造は、表示される賞品名とスタートボタンとストップボタンです。

りー

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

ログイン後にコピー

を切り替えます。 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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Swiper はモバイル広告画像カルーセルを実装します

Vue コンポーネント通信 Bus の使用方法

以上がJSはランダム抽選システムを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。