js實現(xiàn)簡單抽獎小功能
更新時間：2021年09月18日 14:43:45 作者：百里夭夭
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單抽獎小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡單抽獎小功能的具體代碼，供大家參考，具體內容如下
1.場景：
點擊按鈕開始隨機抽取獎品，當停止那刻停留在大屏幕的是抽中的獎品（“謝謝”即為沒獎）。
2.思路：
眾所周知，抽獎主要講究的就是隨機性，并且是在一堆獎項中抽取。那么可以鎖定方向：用數(shù)組放獎項名，用Math.random()來返回介于 0(包含) ~ 1(不包含) 之間的一個隨機數(shù)。只要能隨機選中數(shù)組的下標，便能隨機選中獎項。
話不多說，附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="start">開始</button>
<button id="end">停止</button>
<h1 id="txt">請開始吧</h1>
<script>
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var otxt=document.getElementById('txt');
var timer;
var m;
var list=['手機','pad','pad','購物卡','購物卡','購物卡','音響','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝']
// 開始
ostart.onclick=function(){
timer=setInterval(function(){
// 產(chǎn)生隨機數(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>
點擊“開始”按鈕：
抽獎結果：
定時器的時間自己隨便調哦，趕緊試試吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Nuxt.js 是一個基于 Vue.js 的通用應用框架。 通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。這篇文章主要介紹了Nuxt.js開啟SSR渲染 ,需要的朋友可以參考下2018-11-11
Bootstrap每天必學之響應式導航、輪播圖,本文的主要內容是在導航條的下方做一張輪播圖，自動播放最新的重要動態(tài)，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript使用RegExp進行正則匹配的方法,實例分析了RegExp對象在進行正則匹配時的相關使用技巧,需要的朋友可以參考下2015-07-07
Webpack 5 是一款強大的模塊打包工具,可用于將許多分散的模塊按照依賴關系打包成一個（或多個）bundle,這篇文章給大家介紹webpack 5 mode的作用和區(qū)別解析,感興趣的朋友跟隨小編一起看看吧2024-01-01
JavaScript實現(xiàn)x秒后自動跳轉到一個頁面
今天看視頻學習時學習了一種新技術，即平時我們在一個頁面點擊“提交”或“確認”會自動跳轉到一個頁面,在網(wǎng)上搜了一下，關于這個技術處理有多種方法,有興趣的朋友可以參考下2013-01-01
js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)，在本文將為大家介紹使用數(shù)組做到這一點，感興趣的朋友可以參考下2013-11-11
ES6引入了一個新的函數(shù)類型，發(fā)現(xiàn)它并不符合這種運行到結束的特性。這類新的函數(shù)被稱為生成器。生成器的出現(xiàn)是我們知道原來有時代碼并不會順利的運行，可以通過暫停的方式進行異步回調，讓我們摒棄了此前的認知。本文就來聊聊JavaScript中生成器的相關知識2022-11-11![js中[]、{}、()區(qū)別示例淺析](http://img.jbzj.com/images/xgimg/bcimg7.png)
很多人都知道在js中[]表示的是數(shù)組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關于js中[]、{}、()區(qū)別的相關資料,需要的朋友可以參考下2023-06-06
JavaScript實現(xiàn)數(shù)組隨機排序的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組隨機排序的方法,涉及javascript數(shù)組遍歷與排序的相關技巧,需要的朋友可以參考下2015-06-06
鼠標事件是到目前為止最重要的事件。在這一章我將介紹一些鼠標事件的最常見的問題和技巧。2010-02-02