JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统，JS做出随机抽奖系统的注意事项有哪些，下面就是实战案例，一起来看一下。
用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。
功能：
- 点开始按钮开始抽奖，随机出现奖品名称；
- 点停止按钮即可停止抽奖；
- 按下回车键可切换开始抽奖和停止抽奖。
效果
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主要代码片段：
首先，定义data数组，写入各奖品名称。并初始化timer定时器，和键盘事件状态flag(一开始状态为0，按下键盘变成1，再按键盘变成0，如此切换).
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
定义开始抽奖函数playFun();
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';
}定义停止抽奖函数stopFun();
function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}按回车键切换抽奖状态事件；
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 = ['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';
}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: '微软雅黑';
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;
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci JS做出随机抽奖系统. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran!
Mar 25, 2024 pm 12:30 PM
Pendaraban Matriks Umum (GEMM) ialah bahagian penting dalam banyak aplikasi dan algoritma, dan juga merupakan salah satu petunjuk penting untuk menilai prestasi perkakasan komputer. Penyelidikan mendalam dan pengoptimuman pelaksanaan GEMM boleh membantu kami lebih memahami pengkomputeran berprestasi tinggi dan hubungan antara perisian dan sistem perkakasan. Dalam sains komputer, pengoptimuman GEMM yang berkesan boleh meningkatkan kelajuan pengkomputeran dan menjimatkan sumber, yang penting untuk meningkatkan prestasi keseluruhan sistem komputer. Pemahaman yang mendalam tentang prinsip kerja dan kaedah pengoptimuman GEMM akan membantu kami menggunakan potensi perkakasan pengkomputeran moden dengan lebih baik dan menyediakan penyelesaian yang lebih cekap untuk pelbagai tugas pengkomputeran yang kompleks. Dengan mengoptimumkan prestasi GEMM
Sistem pemanduan pintar Qiankun ADS3.0 Huawei akan dilancarkan pada bulan Ogos dan akan dilancarkan pada Xiangjie S9 buat kali pertama
Jul 30, 2024 pm 02:17 PM
Pada 29 Julai, pada majlis pelepasan kereta baharu AITO Wenjie yang ke-400,000, Yu Chengdong, Pengarah Urusan Huawei, Pengerusi Terminal BG, dan Pengerusi Smart Car Solutions BU, menghadiri dan menyampaikan ucapan dan mengumumkan bahawa model siri Wenjie akan akan dilancarkan tahun ini Pada bulan Ogos, Huawei Qiankun ADS 3.0 versi telah dilancarkan, dan ia dirancang untuk terus naik taraf dari Ogos hingga September. Xiangjie S9, yang akan dikeluarkan pada 6 Ogos, akan memperkenalkan sistem pemanduan pintar ADS3.0 Huawei. Dengan bantuan lidar, versi Huawei Qiankun ADS3.0 akan meningkatkan keupayaan pemanduan pintarnya, mempunyai keupayaan bersepadu hujung-ke-hujung, dan mengguna pakai seni bina hujung ke hujung baharu GOD (pengenalpastian halangan am)/PDP (ramalan). membuat keputusan dan kawalan), menyediakan fungsi NCA pemanduan pintar dari ruang letak kereta ke ruang letak kereta, dan menaik taraf CAS3.0
Bagaimana untuk membuat applet loteri excel
Mar 20, 2024 am 11:40 AM
Dalam kerja harian, kita menghadapi banyak perkara yang memerlukan melukis lot Kaedah tradisional ialah melukis nombor secara rawak menggunakan nombor kertas Dengan perkembangan perisian elektronik, kita boleh menggunakan komputer untuk melukis lot hari ini ialah Bagaimana untuk membuat applet loteri excel. 1. Mula-mula, kita buka perisian Excel dan buka jadual yang kita sediakan Jadual mesti mengandungi nama kita. 2. Kemudian kita gabungkan sel di sebelah kanan, isi hitam siapa yang bertuah malam ini, dan gabungkan sel di bawah dan isikan merah, seperti yang ditunjukkan dalam rajah di bawah. 3. Kemudian kita masukkan fungsi randbetween di kawasan merah dan tetapkan baris pertama kepada 2 dan baris terakhir kepada 7, seperti yang ditunjukkan dalam rajah di bawah. 4. Lepas tu kita masuk ind depan
Versi sistem Apple 16 manakah yang terbaik?
Mar 08, 2024 pm 05:16 PM
Versi terbaik sistem Apple 16 ialah iOS16.1.4 Versi terbaik sistem iOS16 mungkin berbeza dari orang ke orang Penambahan dan peningkatan dalam pengalaman penggunaan harian juga telah dipuji oleh ramai pengguna. Versi sistem Apple 16 yang manakah adalah yang terbaik Jawapan: iOS16.1.4 Versi terbaik sistem iOS 16 mungkin berbeza dari orang ke orang. Menurut maklumat awam, iOS16, yang dilancarkan pada 2022, dianggap sebagai versi yang sangat stabil dan berprestasi, dan pengguna cukup berpuas hati dengan pengalaman keseluruhannya. Selain itu, penambahan ciri baharu dan penambahbaikan dalam pengalaman penggunaan harian dalam iOS16 juga telah diterima baik oleh ramai pengguna. Terutamanya dari segi hayat bateri yang dikemas kini, prestasi isyarat dan kawalan pemanasan, maklum balas pengguna agak positif. Walau bagaimanapun, memandangkan iPhone14
Sentiasa baru! Siri Huawei Mate60 dinaik taraf kepada HarmonyOS 4.2: Peningkatan awan AI, Dialek Xiaoyi sangat mudah digunakan
Jun 02, 2024 pm 02:58 PM
Pada 11 April, Huawei secara rasmi mengumumkan pelan peningkatan 100 mesin HarmonyOS 4.2 kali ini, lebih daripada 180 peranti akan mengambil bahagian dalam peningkatan, meliputi telefon bimbit, tablet, jam tangan, fon kepala, skrin pintar dan peranti lain. Pada bulan lalu, dengan kemajuan mantap pelan peningkatan 100 mesin HarmonyOS4.2, banyak model popular termasuk Huawei Pocket2, siri Huawei MateX5, siri nova12, siri Huawei Pura, dll. juga telah mula menaik taraf dan menyesuaikan diri, yang bermaksud bahawa akan ada Lebih ramai pengguna model Huawei boleh menikmati pengalaman biasa dan selalunya baharu yang dibawa oleh HarmonyOS. Berdasarkan maklum balas pengguna, pengalaman model siri Huawei Mate60 telah bertambah baik dalam semua aspek selepas menaik taraf HarmonyOS4.2. Terutamanya Huawei M
Apakah sistem pengendalian komputer?
Jan 12, 2024 pm 03:12 PM
Sistem pengendalian komputer ialah sistem yang digunakan untuk mengurus perkakasan komputer dan program perisian Ia juga merupakan program sistem pengendalian yang dibangunkan berdasarkan semua sistem perisian yang berbeza mempunyai pengguna yang berbeza. Di bawah, editor akan berkongsi dengan anda apa itu sistem pengendalian komputer. Apa yang dipanggil sistem pengendalian adalah untuk mengurus perkakasan komputer dan program perisian Semua perisian dibangunkan berdasarkan program sistem pengendalian. Sebenarnya, terdapat banyak jenis sistem pengendalian, termasuk yang untuk kegunaan industri, kegunaan komersial dan kegunaan peribadi, meliputi pelbagai aplikasi. Di bawah, editor akan menerangkan kepada anda apa itu sistem pengendalian komputer. Apakah sistem pengendalian komputer sistem Windows Sistem Windows ialah sistem pengendalian yang dibangunkan oleh Microsoft Corporation dari Amerika Syarikat. daripada kebanyakannya
Perbezaan dan persamaan arahan cmd dalam sistem Linux dan Windows
Mar 15, 2024 am 08:12 AM
Linux dan Windows ialah dua sistem pengendalian biasa, masing-masing mewakili sistem Linux sumber terbuka dan sistem Windows komersial. Dalam kedua-dua sistem pengendalian, terdapat antara muka baris arahan untuk pengguna berinteraksi dengan sistem pengendalian. Dalam sistem Linux, pengguna menggunakan baris arahan Shell, manakala dalam sistem Windows, pengguna menggunakan baris arahan cmd. Baris arahan Shell dalam sistem Linux ialah alat yang sangat berkuasa yang boleh menyelesaikan hampir semua tugas pengurusan sistem.
Penjelasan terperinci tentang cara mengubah suai tarikh sistem dalam pangkalan data Oracle
Mar 09, 2024 am 10:21 AM
Penjelasan terperinci tentang kaedah mengubah suai tarikh sistem dalam pangkalan data Oracle Dalam pangkalan data Oracle, kaedah mengubah suai tarikh sistem terutamanya melibatkan pengubahsuaian parameter NLS_DATE_FORMAT dan menggunakan fungsi SYSDATE. Artikel ini akan memperkenalkan kedua-dua kaedah ini dan contoh kod khusus mereka secara terperinci untuk membantu pembaca lebih memahami dan menguasai operasi mengubah suai tarikh sistem dalam pangkalan data Oracle. 1. Ubah suai kaedah parameter NLS_DATE_FORMAT NLS_DATE_FORMAT ialah data Oracle
