js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)小功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)小功能的具體代碼，供大家參考，具體內(nèi)容如下
1.場(chǎng)景：
點(diǎn)擊按鈕開(kāi)始隨機(jī)抽取獎(jiǎng)品，當(dāng)停止那刻停留在大屏幕的是抽中的獎(jiǎng)品（“謝謝”即為沒(méi)獎(jiǎng)）。
2.思路：
眾所周知，抽獎(jiǎng)主要講究的就是隨機(jī)性，并且是在一堆獎(jiǎng)項(xiàng)中抽取。那么可以鎖定方向：用數(shù)組放獎(jiǎng)項(xiàng)名，用Math.random()來(lái)返回介于 0(包含) ~ 1(不包含) 之間的一個(gè)隨機(jī)數(shù)。只要能隨機(jī)選中數(shù)組的下標(biāo)，便能隨機(jī)選中獎(jiǎng)項(xiàng)。
話不多說(shuō)，附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="start">開(kāi)始</button>
<button id="end">停止</button>
<h1 id="txt">請(qǐng)開(kāi)始吧</h1>
<script>
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var otxt=document.getElementById('txt');
var timer;
var m;
var list=['手機(jī)','pad','pad','購(gòu)物卡','購(gòu)物卡','購(gòu)物卡','音響','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝']
// 開(kāi)始
ostart.onclick=function(){
timer=setInterval(function(){
// 產(chǎn)生隨機(jī)數(shù)
m=parseInt(Math.random()*list.length);
// 修改html
otxt.innerHTML=list[m]
// 修改圖片 .setAttribute('src',list[m])
},1000)
}
// 停止
oend.onclick=function(){
clearInterval(timer);
alert('恭喜抽中'+list[m]);
list.splice(m,1,'謝謝');
}
</script>
</body>
</html>
點(diǎn)擊“開(kāi)始”按鈕：
抽獎(jiǎng)結(jié)果：
定時(shí)器的時(shí)間自己隨便調(diào)哦，趕緊試試吧！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- js和html5實(shí)現(xiàn)手機(jī)端刮刮卡抽獎(jiǎng)效果完美兼容android/IOS
- js輪盤(pán)抽獎(jiǎng)實(shí)例分析
- js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼
- js簡(jiǎn)單抽獎(jiǎng)代碼
- js實(shí)現(xiàn)簡(jiǎn)單隨機(jī)抽獎(jiǎng)的方法
- js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)游戲?qū)嵗?/a>
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)效果
- javascript 隨機(jī)抽獎(jiǎng)程序代碼
- JS模擬抽獎(jiǎng)序效果實(shí)現(xiàn)代碼
相關(guān)文章
本文主要介紹了微信小程序動(dòng)畫(huà)效果的實(shí)現(xiàn)方法與原理解析。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
在網(wǎng)站里面會(huì)加載一些js代碼,統(tǒng)計(jì)啊,百度廣告等等，結(jié)果弄得頁(yè)面加載速度很慢，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-03-03
相信大家都知道在SVG中添加文本是使用text元素。但這個(gè)元素不能夠自動(dòng)換行，超出的部分就顯示不出來(lái)了，怎么辦呢？下面通過(guò)這篇文章來(lái)給大家詳細(xì)介紹下實(shí)現(xiàn)的過(guò)程。2016-10-10
純javascript實(shí)現(xiàn)的小游戲《Flappy Pig》實(shí)例
這篇文章主要介紹了純javascript實(shí)現(xiàn)的小游戲《Flappy Pig》,較為詳細(xì)的分析了javascript實(shí)現(xiàn)小游戲《Flappy Pig》的相關(guān)技巧,涉及javascript操作頁(yè)面元素移動(dòng)、碰撞、事件監(jiān)聽(tīng)與觸發(fā)的相關(guān)技巧,需要的朋友可以參考下2015-07-07
JavaScript獲取一個(gè)范圍內(nèi)日期的方法
這篇文章主要介紹了JavaScript獲取一個(gè)范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下2015-04-04
一文總結(jié)JS中邏輯運(yùn)算符的特點(diǎn)
在JavaScript的眾多運(yùn)算符里,提供了三個(gè)邏輯運(yùn)算符&&、||和!,下面這篇文章主要給大家介紹了關(guān)于JS中邏輯運(yùn)算符的特點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)版計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)版計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了js獲取瀏覽器各種屬性的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開(kāi)預(yù)覽
這篇文章主要介紹了JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開(kāi)預(yù)覽,需要的朋友可以參考下2020-05-05