js實(shí)現(xiàn)簡單抽獎(jiǎng)小功能

更新時(shí)間：2021年09月18日 14:43:45 作者：百里夭夭

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單抽獎(jiǎng)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單抽獎(jiǎng)小功能的具體代碼，供大家參考，具體內(nèi)容如下

1.場(chǎng)景：

點(diǎn)擊按鈕開始隨機(jī)抽取獎(jiǎng)品，當(dāng)停止那刻停留在大屏幕的是抽中的獎(jiǎng)品（“謝謝”即為沒獎(jiǎng)）。

2.思路：

眾所周知，抽獎(jiǎng)主要講究的就是隨機(jī)性，并且是在一堆獎(jiǎng)項(xiàng)中抽取。那么可以鎖定方向：用數(shù)組放獎(jiǎng)項(xiàng)名，用Math.random()來返回介于 0(包含) ~ 1(不包含) 之間的一個(gè)隨機(jī)數(shù)。只要能隨機(jī)選中數(shù)組的下標(biāo)，便能隨機(jī)選中獎(jiǎng)項(xiàng)。

話不多說，附上代碼：

<!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">請(qǐng)開始吧</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','購物卡','購物卡','購物卡','音響','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝','謝謝']
   // 開始
   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)擊“開始”按鈕：

抽獎(jiǎng)結(jié)果：

定時(shí)器的時(shí)間自己隨便調(diào)哦，趕緊試試吧！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Nuxt.js開啟SSR渲染的教程詳解
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。通過對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。這篇文章主要介紹了Nuxt.js開啟SSR渲染 ,需要的朋友可以參考下
2018-11-11
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖,本文的主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖，自動(dòng)播放最新的重要?jiǎng)討B(tài)，感興趣的小伙伴們可以參考一下
2016-04-04
JavaScript使用RegExp進(jìn)行正則匹配的方法
這篇文章主要介紹了JavaScript使用RegExp進(jìn)行正則匹配的方法,實(shí)例分析了RegExp對(duì)象在進(jìn)行正則匹配時(shí)的相關(guān)使用技巧,需要的朋友可以參考下
2015-07-07
webpack 5 mode的作用和區(qū)別解析
Webpack 5 是一款強(qiáng)大的模塊打包工具,可用于將許多分散的模塊按照依賴關(guān)系打包成一個(gè)（或多個(gè)）bundle,這篇文章給大家介紹webpack 5 mode的作用和區(qū)別解析,感興趣的朋友跟隨小編一起看看吧
2024-01-01
JavaScript實(shí)現(xiàn)x秒后自動(dòng)跳轉(zhuǎn)到一個(gè)頁面
今天看視頻學(xué)習(xí)時(shí)學(xué)習(xí)了一種新技術(shù)，即平時(shí)我們?cè)谝粋€(gè)頁面點(diǎn)擊“提交”或“確認(rèn)”會(huì)自動(dòng)跳轉(zhuǎn)到一個(gè)頁面,在網(wǎng)上搜了一下，關(guān)于這個(gè)技術(shù)處理有多種方法,有興趣的朋友可以參考下
2013-01-01
js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)，在本文將為大家介紹使用數(shù)組做到這一點(diǎn)，感興趣的朋友可以參考下
2013-11-11
一文了解你不知道的JavaScript生成器篇
ES6引入了一個(gè)新的函數(shù)類型，發(fā)現(xiàn)它并不符合這種運(yùn)行到結(jié)束的特性。這類新的函數(shù)被稱為生成器。生成器的出現(xiàn)是我們知道原來有時(shí)代碼并不會(huì)順利的運(yùn)行，可以通過暫停的方式進(jìn)行異步回調(diào)，讓我們摒棄了此前的認(rèn)知。本文就來聊聊JavaScript中生成器的相關(guān)知識(shí)
2022-11-11
js中[]、{}、()區(qū)別示例淺析
很多人都知道在js中[]表示的是數(shù)組對(duì)象,{}表示的是對(duì)象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關(guān)于js中[]、{}、()區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-06-06
JavaScript實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法,涉及javascript數(shù)組遍歷與排序的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
JavaScript Event學(xué)習(xí)第九章鼠標(biāo)事件
鼠標(biāo)事件是到目前為止最重要的事件。在這一章我將介紹一些鼠標(biāo)事件的最常見的問題和技巧。
2010-02-02