ホームページ > 記事 > ウェブフロントエンド > 宝くじシステムのJavaScript実装例の共有

宝くじシステムのJavaScript実装例の共有

小云云オリジナル: 2018-01-16 13:24:532653ブラウズ

この記事では主に JavaScript に基づいた抽選システムを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

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

機能:

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

効果

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 の完全なコード:

rrreええ

CSSスタイル:

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

宝くじシステムのJavaScript実装例の共有

関連記事