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

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

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

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

1.場景：

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

2.思路：

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

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

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

您可能感興趣的文章:

js
抽獎

相關(guān)文章

微信小程序的動畫效果詳解
本文主要介紹了微信小程序動畫效果的實(shí)現(xiàn)方法與原理解析。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
Javascript加載速度慢的解決方案
在網(wǎng)站里面會加載一些js代碼,統(tǒng)計(jì)啊,百度廣告等等，結(jié)果弄得頁面加載速度很慢，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下
2014-03-03
D3.js實(shí)現(xiàn)文本的換行詳解
相信大家都知道在SVG中添加文本是使用text元素。但這個(gè)元素不能夠自動換行，超出的部分就顯示不出來了，怎么辦呢？下面通過這篇文章來給大家詳細(xì)介紹下實(shí)現(xiàn)的過程。
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操作頁面元素移動、碰撞、事件監(jiān)聽與觸發(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),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧
2013-12-12
JavaScript實(shí)現(xiàn)簡單網(wǎng)頁版計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單網(wǎng)頁版計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
js獲取瀏覽器的各種屬性
本篇文章主要介紹了js獲取瀏覽器各種屬性的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-04-04
JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開預(yù)覽
這篇文章主要介紹了JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開預(yù)覽,需要的朋友可以參考下
2020-05-05