基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例
為什么會(huì)做這個(gè)東西呢,純屬好玩,閑的
其實(shí)是在上次班會(huì)的時(shí)候想到的,班會(huì)的時(shí)候叫人回答問題,沒人回答
當(dāng)時(shí)就想,我如果抽簽抽到你了,你還是不回答嗎??好吧,一切都是扯淡
先來看看頁面效果吧:
點(diǎn)擊抽取就可以抽簽了,紅色框會(huì)顯示內(nèi)容,(PS:紅色框是沒有的,僅僅做描述)
抽取到的效果圖如下,字體會(huì)隨機(jī)滾動(dòng),最后停止:
里面的抽取內(nèi)容完全可以替換,,,,
下面貼上代碼:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} li{list-style: none;} body{ font-family: "楷體"; user-select:none; background: url('1.jpg') no-repeat; background-size: 100%; /*background-color: red;*/ } .section{ position: relative; width:935px; height: 460px; background-color: rgba(0,0,0,.3); margin:165px auto 0; text-align: center; } .section h2{ height: 90px; line-height: 90px; font-size: 40px; color:#fff; } .section .s-result{ height: 400px; color: #fff; } .s-result .number{ float: left; width: 895px; height: 300px; line-height: 300px; margin-left: 20px; font-size: 60px; font-weight: bold; } .btn{ position:absolute; left: 50%; margin-left: -161px; bottom: -40px; width: 323px; height: 81px; border-radius: 30px; background-color: #000; cursor:pointer; } .btn p{ line-height: 81px; font-size: 50px; color: #fff; } </style> </head> <body> <div class="section"> <h2>看看誰最幸運(yùn)??!</h2> <div class="s-result"> </div> <div class="btn"> <p>點(diǎn) 擊 抽 取</p> </div> </div> <script> var oBtn = document.getElementsByClassName('btn')[0]; var oResult = document.getElementsByClassName('s-result')[0]; var arrName = ['張三','李四','王五','趙六','李xx','楊xx','張xx','A_dmin']; //抽簽的內(nèi)容 var step = 1; var cnt = 1; var flag = true; oBtn.onclick = function (){ if(flag){ step = 1; creatName(); flag = false; }else{ var d = document.getElementsByClassName('number')[0]; oResult.removeChild(d); step = 1; creatName(); } } function getName(){ var num = Math.floor(Math.random()*(arrName.length-1)); var n = arrName[num]; arrName.splice(num,1); return n; } function creatName(){ if(step > cnt){ return null; } step++; var oDiv = document.createElement('div'); oDiv.className = 'number'; oResult.appendChild(oDiv); var dis = 1; var maxDis = 30; var mySet = setInterval(function(){ dis++; if(dis > maxDis){ oDiv.innerHTML = getName(); clearInterval(mySet); creatName(); return null; } oDiv.innerHTML = arrName[Math.floor(Math.random()*(arrName.length-1))]; },50); } </script> </body> </html>
PS:
有點(diǎn)小瑕疵,可點(diǎn)擊多次,每次隨機(jī)的結(jié)果都是不一樣的,所以當(dāng)內(nèi)容抽取完之后,頁面會(huì)顯示undefined,不過影響不大,啊哈哈哈哈
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js抽獎(jiǎng)轉(zhuǎn)盤實(shí)現(xiàn)方法分析
- js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
- js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法
- Vue.js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)總結(jié)及實(shí)現(xiàn)思路
- php+lottery.js實(shí)現(xiàn)九宮格抽獎(jiǎng)功能
- JS實(shí)現(xiàn)簡單的抽獎(jiǎng)轉(zhuǎn)盤效果示例
- 200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
相關(guān)文章
基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素與相關(guān)屬性的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12手寫的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
這篇文章主要介紹了手寫的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù),用來取元素的樣式,需要的朋友可以參考下2014-06-06Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來通過本文給大家介紹Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式,對(duì)js表單驗(yàn)證正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03JavaScript常規(guī)加密技術(shù)實(shí)現(xiàn)方式詳解
這篇文章主要為大家介紹了JavaScript常規(guī)加密技術(shù)實(shí)現(xiàn)方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04純javascript實(shí)現(xiàn)圖片延時(shí)加載方法
看到一篇博客說土豆網(wǎng)的圖片是延遲加載的。原理是這樣:頁面可見區(qū)域以下的圖片先不加載,等到用戶向下滾動(dòng)到圖片位置時(shí),再進(jìn)行加載。這樣做的好處是當(dāng)頁面有好幾屏內(nèi)容時(shí),這樣我們就可以只加載用戶需要看的圖片,減少服務(wù)器向用戶瀏覽器發(fā)送圖片文件所產(chǎn)生的負(fù)荷。2015-08-08Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾門戶式風(fēng)格頁面
這篇文章主要介紹了Bootstrap編寫一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾門戶式風(fēng)格頁面,感興趣的小伙伴們可以參考一下2016-07-07js 創(chuàng)建一個(gè)浮動(dòng)div的代碼
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼,一般用來指導(dǎo)用戶下面的操作與多條件選擇。點(diǎn)擊一下就可顯示,具體的大家可以自由發(fā)揮。2009-12-12JS 數(shù)字轉(zhuǎn)換為大寫金額的簡單實(shí)例
下面小編就為大家?guī)硪黄狫S 數(shù)字轉(zhuǎn)換為大寫金額的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08javascript html5搖一搖功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04