JavaScriptを使用して宝くじシステムを実装する方法-jsチュートリアル-php.cn

JavaScriptを使用して宝くじシステムを実装する方法

亚连

リリース： 2018-06-11 17:20:42

オリジナル

4830 人が閲覧しました

この記事では、主に 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 完全なコード:

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

ログイン後にコピー

上記は、私が皆さんのためにコンパイルしたものです。今後の皆様のお役に立つことを願っております。

vueでカスタムグローバルメソッドを実装する方法

Vue2.0でサブ兄弟コンポーネント間のデータインタラクションを実装する方法

ブートストラップでテーブルサポートの高さのパーセンテージを実装する方法

vue 2.x で axios によってカプセル化された get メソッドと post メソッドを使用する方法

vue コンポーネントを渡すオブジェクトに一方向バインディングを実装するには、どうすればよいですか?

以上がJavaScriptを使用して宝くじシステムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。