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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

php中世界最好的语言

Apr 13, 2018 pm 01:53 PM

javascript 宝くじシステム

今回は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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7467

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CUDA の汎用行列乗算: 入門から習熟まで! Mar 25, 2024 pm 12:30 PM

General Matrix Multiplication (GEMM) は、多くのアプリケーションやアルゴリズムの重要な部分であり、コンピューターハードウェアのパフォーマンスを評価するための重要な指標の 1 つでもあります。 GEMM の実装に関する徹底的な調査と最適化は、ハイパフォーマンスコンピューティングとソフトウェアシステムとハードウェアシステムの関係をより深く理解するのに役立ちます。コンピューターサイエンスでは、GEMM を効果的に最適化すると、計算速度が向上し、リソースが節約されます。これは、コンピューターシステムの全体的なパフォーマンスを向上させるために非常に重要です。 GEMM の動作原理と最適化方法を深く理解することは、最新のコンピューティングハードウェアの可能性をより有効に活用し、さまざまな複雑なコンピューティングタスクに対してより効率的なソリューションを提供するのに役立ちます。 GEMMのパフォーマンスを最適化することで

ファーウェイのQiankun ADS3.0インテリジェント運転システムは8月に発売され、初めてXiangjie S9に搭載される Jul 30, 2024 pm 02:17 PM

7月29日、AITO Wenjieの40万台目の新車のロールオフ式典に、ファーウェイの常務取締役、ターミナルBG会長、スマートカーソリューションBU会長のYu Chengdong氏が出席し、スピーチを行い、Wenjieシリーズモデルの発売を発表した。 8月にHuawei Qiankun ADS 3.0バージョンが発売され、8月から9月にかけて順次アップグレードが行われる予定です。 8月6日に発売されるXiangjie S9には、ファーウェイのADS3.0インテリジェント運転システムが初搭載される。 LiDARの支援により、Huawei Qiankun ADS3.0バージョンはインテリジェント運転機能を大幅に向上させ、エンドツーエンドの統合機能を備え、GOD（一般障害物識別）/PDP（予測）の新しいエンドツーエンドアーキテクチャを採用します。意思決定と制御）、駐車スペースから駐車スペースまでのスマート運転のNCA機能の提供、CAS3.0のアップグレード

Apple 16 システムのどのバージョンが最適ですか? Mar 08, 2024 pm 05:16 PM

Apple 16 システムの最適なバージョンは iOS16.1.4 です。iOS16 システムの最適なバージョンは人によって異なります。日常の使用体験における追加と改善も多くのユーザーから賞賛されています。 Apple 16 システムの最適なバージョンはどれですか? 回答: iOS16.1.4 iOS 16 システムの最適なバージョンは人によって異なる場合があります。公開情報によると、2022 年にリリースされた iOS16 は非常に安定していてパフォーマンスの高いバージョンであると考えられており、ユーザーはその全体的なエクスペリエンスに非常に満足しています。また、iOS16では新機能の追加や日常の使用感の向上も多くのユーザーからご好評をいただいております。特に最新のバッテリー寿命、信号性能、加熱制御に関して、ユーザーからのフィードバックは比較的好評です。ただし、iPhone14を考慮すると、

Excel宝くじアプレットの作り方 Mar 20, 2024 am 11:40 AM

私たちは日々の仕事の中で、くじを引く必要があることがたくさんありますが、従来は紙の数字を使ってランダムに数字を引く方法が主流でしたが、電子ソフトの発達により、コンピュータを使ってくじを引くことができるようになりました。今日はExcel宝くじアプレットの作り方です。 1. まず、Excel ソフトウェアを開き、作成したテーブルを開きます (テーブルには私たちの名前が含まれている必要があります)。 2. 次に、下図に示すように、右側のセルを結合して、今夜幸運な人を黒で塗りつぶし、下のセルを結合して赤で塗りつぶします。 3. 次に、下の図に示すように、赤い領域に randbetween 関数を入力し、最初の行を 2 に、最後の行を 7 に設定します。 4. 次に、前に ind を入力します。

常に新しい! Huawei Mate60シリーズがHarmonyOS 4.2にアップグレード：AIクラウドの強化、Xiaoyi方言はとても使いやすい Jun 02, 2024 pm 02:58 PM

4月11日、ファーウェイはHarmonyOS 4.2 100台のアップグレード計画を初めて正式に発表し、今回は携帯電話、タブレット、時計、ヘッドフォン、スマートスクリーンなどのデバイスを含む180台以上のデバイスがアップグレードに参加する予定だ。先月、HarmonyOS4.2 100台アップグレード計画の着実な進捗に伴い、Huawei Pocket2、Huawei MateX5シリーズ、nova12シリーズ、Huawei Puraシリーズなどの多くの人気モデルもアップグレードと適応を開始しました。 HarmonyOS によってもたらされる共通の、そして多くの場合新しい体験を楽しむことができる Huawei モデルのユーザーが増えることになります。ユーザーのフィードバックから判断すると、HarmonyOS4.2にアップグレードした後、Huawei Mate60シリーズモデルのエクスペリエンスがあらゆる面で向上しました。特にファーウェイM

コンピュータのオペレーティングシステムとは何ですか? Jan 12, 2024 pm 03:12 PM

コンピュータオペレーティングシステムは、コンピュータハードウェアとソフトウェアプログラムを管理するために使用されるシステムです。また、すべてのソフトウェアシステムに基づいて開発されたオペレーティングシステムプログラムでもあります。オペレーティングシステムが異なれば、ユーザーも異なります。では、コンピュータシステムとは何でしょうか?以下では、編集者がコンピューターのオペレーティングシステムとは何かについて説明します。いわゆるオペレーティングシステムはコンピュータのハードウェアとソフトウェアプログラムを管理するもので、すべてのソフトウェアはオペレーティングシステムプログラムに基づいて開発されます。実際、OSには産業用、商業用、個人用など多くの種類があり、幅広い用途に対応しています。以下では、編集者がコンピューターのオペレーティングシステムとは何かについて説明します。 Windows システムとはどのようなコンピュータのオペレーティングシステムですか? Windows システムは、米国 Microsoft Corporation によって開発されたオペレーティングシステムです。ほとんどよりも

Oracleデータベースのシステム日付を変更する方法の詳細な説明 Mar 09, 2024 am 10:21 AM

Oracle データベースでのシステム日付の変更方法の詳細説明 Oracle データベースでのシステム日付の変更方法は、主に NLS_DATE_FORMAT パラメータの変更と SYSDATE 関数の使用です。この記事では、読者が Oracle データベースのシステム日付を変更する操作をよりよく理解し、習得できるように、これら 2 つの方法とその具体的なコード例を詳しく紹介します。 1. NLS_DATE_FORMAT パラメータメソッドの変更 NLS_DATE_FORMAT は Oracle データです

Linux と Windows システムにおける cmd コマンドの相違点と類似点 Mar 15, 2024 am 08:12 AM

Linux と Windows は 2 つの一般的なオペレーティングシステムで、それぞれオープンソースの Linux システムと商用 Windows システムを表します。どちらのオペレーティングシステムにも、ユーザーがオペレーティングシステムと対話するためのコマンドラインインターフェイスがあります。 Linux システムでは、ユーザーはシェルコマンドラインを使用しますが、Windows システムでは、cmd コマンドラインを使用します。 Linux システムのシェルコマンドラインは、ほぼすべてのシステム管理タスクを完了できる非常に強力なツールです。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック