jQuery实现简单的抽奖游戏技术分享
本文主要为大家详细介绍了jQuery实现简单的抽奖游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
今天要写的是，利用jQuery写一个抽奖的案例，页面包含四个组件，两个按钮分别是开始和停止的按钮。两个box，分别盛放人员和奖品。当点击开始按钮时，人员不停地进行切换。抽奖的box中显示等待抽奖结果。当按下停止按钮时，两个盒子分别显示人员名，和所中的奖品。
页面的效果图如下：
可能页面没有那么好看。我们主要实现的是功能
首先在body中定义组件
<body> <input type = "button" class = "btn" id = "start" value = "开始"> <input type = "button" class = "btn" id = "stop" value = "停止"> <p id = "number" class = "box1"></p> <p id = "jiangpin" class = "box2"></p> </body>
再进行样式设置：
css代码：
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.btn{
width: 90px;
height: 40px;
background-color: lightgreen;
color: white;
font-size: 18px;
font-family: "微软雅黑";
text-align: center;
line-height: 40px;
}
.box1{
position: absolute;
width: 230px;
height: 100px;
margin: 10px 50px;
top:150px;
left: 60%;
background-color: gold;
color: black;
border-radius: 8%;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.box2{
position: absolute;
width: 230px;
height: 100px;
margin: 10px 50px;
top: 300px;
left: 60%;
background-color: gold;
color: black;
border-radius: 8%;
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>接下来就是写函数了。在这里我引用的是”http://libs.baidu.com/jquery/1.9.0/jquery.js“；的jQuery库。
<script >
$(document).ready(function(){
// 1. 首先第一步定义两个数组，存放人员和奖品
var list1 = [ 'A君' , ' B君 ' , ' C君 ' , ' D君 ', ' E君 ' , ' F君 ' , ' G君 '];
var list2 = ['YSL', ' iphone7', ' iphone6', ' 手表', ' 小红花', ' 谢谢参与',' 谢谢参与',' 谢谢参与'];
// 2. 为开始按钮绑定点击事件
$("#start").click(function(){
//2.1 先将奖品的盒子中的内容初始化
$("#jiangpin").html("等待抽奖中...");
//2.2 利用setInterval()函数进行人员名字切换
// 定义一个变量去接受它每次的状态
functionId = setInterval(function(){
var n = Math.floor(Math.random() * list1.length);
$("#number").html(list1[n]);
},30);
});
// 3. 为停止按钮绑定点击事件
$("#stop").click(function(){
// 3.1 清除setInterval()。并停止在最后一次的人员名上
clearInterval(functionId);
// 3.2 随机产生奖品数组的下标，并将下标对应的元素写入奖品区
var jiang = Math.floor(Math.random() * list2.length);
$("#jiangpin").html(list2[jiang]);
});
})
</script>这个案例比较简单，所以就不赘述了，下面附上最后的效果图：
这个是点击了开始按钮之后，人员名进行快速的切换中：
下面这个是点击了停止按钮的最终中奖人员和对应的奖品
相关推荐：
jQuery+PHP实现的掷色子抽奖游戏实例，jquery色子_PHP教程
Atas ialah kandungan terperinci jQuery实现简单的抽奖游戏技术分享. 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
1376
52
Nvgpucomp64.dll menyebabkan permainan Windows PC ranap;
Mar 26, 2024 am 08:20 AM
Jika Nvgpucomp64.dll menyebabkan permainan anda kerap ranap, penyelesaian yang disediakan di sini boleh membantu anda. Masalah ini biasanya disebabkan oleh pemacu kad grafik yang lapuk atau rosak, fail permainan yang rosak, dsb. Membetulkan isu ini boleh membantu anda menangani ranap permainan. Fail Nvgpucomp64.dll dikaitkan dengan kad grafik NVIDIA. Apabila fail ini ranap, permainan anda juga akan ranap. Ini biasanya berlaku dalam permainan seperti LordsoftheFallen, LiesofP, RocketLeague dan ApexLegends. Nvgpucomp64.dll ranap permainan pada Windows PC jika N
Pengenalan kepada cara memuat turun dan memasang permainan superpeople
Mar 30, 2024 pm 04:01 PM
Permainan superpeople boleh dimuat turun melalui klien wap Saiz permainan ini ialah kira-kira 28G Ia biasanya mengambil masa satu setengah jam untuk memuat turun dan memasang Berikut ialah tutorial muat turun dan pemasangan khusus untuk anda. Kaedah baharu untuk memohon ujian tertutup global 1) Cari "SUPERPEOPLE" dalam kedai Steam (muat turun klien stim) 2) Klik "Minta akses kepada ujian tertutup SUPERPEOPLE" di bahagian bawah halaman kedai "SUPERPEOPLE" 3) Selepas mengklik butang minta butang akses, Permainan "SUPERPEOPLECBT" boleh disahkan dalam perpustakaan Steam 4) Klik butang pasang dalam "SUPERPEOPLECBT" dan muat turun
Di manakah Spider Solitaire dalam win11 Bagaimana untuk bermain permainan Spider Solitaire dalam win11
Mar 01, 2024 am 11:37 AM
Rakan-rakan yang telah cukup bermain karya AAA dan permainan mudah alih, adakah anda ingin menghidupkan semula permainan komputer zaman kanak-kanak anda? Kemudian mari kita cari Spider Solitaire dalam Windows 11 bersama-sama! Klik menu Mula pada antara muka, klik butang "Semua Apl"; Cari dan pilih "MicrosoftSolitaireCollection", iaitu aplikasi permainan siri Solitaire Microsoft; Selepas pemuatan selesai, masukkan antara muka pemilihan dan cari "Spider Solitaire"; Walaupun antara muka telah berubah sedikit, ia masih sama seperti dahulu
ASUS mengeluarkan kemas kini BIOS untuk meningkatkan kestabilan permainan pada pemproses generasi ke-13/14 Intel
Apr 20, 2024 pm 05:01 PM
Menurut berita dari laman web ini pada 20 April, ASUS baru-baru ini mengeluarkan kemas kini BIOS, yang meningkatkan ketidakstabilan seperti ranap ketika menjalankan permainan pada pemproses generasi ke-13/14 Intel. Tapak ini sebelum ini melaporkan bahawa pemain melaporkan masalah termasuk apabila menjalankan versi demo PC permainan pertempuran Bandai Namco "Tekken 8", walaupun jika komputer mempunyai memori dan memori video yang mencukupi, sistem akan ranap dan menggesa mesej ralat yang menunjukkan memori tidak mencukupi. Isu ranap yang sama juga muncul dalam banyak permainan seperti "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" dan "The Finals". RAD menerbitkan artikel panjang pada Februari tahun ini, menjelaskan bahawa masalah ranap permainan adalah gabungan tetapan BIOS, frekuensi jam tinggi dan penggunaan kuasa tinggi pemproses Intel.
Bagaimana untuk melumpuhkan kaedah input semasa bermain permainan dalam Win11
Mar 15, 2024 pm 02:40 PM
Baru-baru ini, beberapa rakan telah melaporkan bahawa mereka sering menekan kaedah input semasa bermain permainan, yang sangat mempengaruhi pengalaman permainan Kawan-kawan boleh datang tengok. Melumpuhkan kaedah: 1. Klik kanan ikon kaedah input dalam bar tugas di penjuru kanan sebelah bawah dan pilih "Keutamaan Bahasa" dalam senarai. 2. Selepas memasuki antara muka baharu, klik pilihan "Tambah bahasa pilihan". 3. Dalam tetingkap pop timbul, pilih "Bahasa Inggeris (Amerika Syarikat)". 4. Klik "Seterusnya" sekali lagi. 5. Kemudian pilih sama ada untuk memasang beberapa pilihan mengikut keperluan anda. 6. Kemudian klik "Pasang" dan tunggu pemasangan selesai. 7. Kemudian klik pada bar status kaedah input di sudut kanan bawah dan pilih "Bahasa Inggeris (
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
Membuka jalan untuk PS5 Pro, kod kemas kini untuk 'No Man's Sky' 'mengejutkan' nama kod pembangunan konsol 'Trinity' dan fail konfigurasi kualiti imej
Jul 22, 2024 pm 01:10 PM
Menurut berita dari laman web ini pada 22 Julai, media asing twistedvoxel menemui nama kod pembangunan PS5 yang dikhabarkan "Trinity" dan fail konfigurasi kualiti imej yang berkaitan dalam kod kemas kini "World Part 1" terbaru "No Man's Sky", yang membuktikan bahawa Sony adalah dijangka Model PS5Pro telah dilancarkan baru-baru ini. Walaupun "No Man's Sky" telah meningkatkan prestasi grafik permainan dalam kemas kini baru-baru ini, ramai pemain masih percaya bahawa ini mungkin HelloGames membuka jalan untuk model baharu lebih awal Menurut pratetap grafik terkini, di bawah resolusi dinamik permainan itu penskalaan telah ditingkatkan daripada 0.6 kepada 0.8, yang bermaksud permainan mempunyai resolusi purata yang lebih tinggi dan beberapa butiran grafik dinaik taraf daripada tahap "Tinggi" kepada "Ultra", tetapi sejak setiap permainan
Penjelasan tentang cara menghidupkan kebenaran mikrofon untuk permainan telefon mudah alih Apple
Mar 22, 2024 pm 05:56 PM
1. Klik pada [Privasi] dalam tetapan telefon. 2. Klik pilihan [Mikrofon]. 3. Hidupkan suis di sebelah kanan aplikasi permainan yang memerlukan kebenaran tetapan mikrofon.
