基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例
為什么會(huì)做這個(gè)東西呢，純屬好玩，閑的
其實(shí)是在上次班會(huì)的時(shí)候想到的，班會(huì)的時(shí)候叫人回答問(wèn)題，沒人回答
當(dāng)時(shí)就想，我如果抽簽抽到你了，你還是不回答嗎？？好吧，一切都是扯淡
先來(lái)看看頁(yè)面效果吧：
點(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>看看誰(shuí)最幸運(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)容抽取完之后，頁(yè)面會(huì)顯示undefined，不過(guò)影響不大，啊哈哈哈哈
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. vue實(shí)現(xiàn)web在線聊天功能2. JavaScript實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區(qū)別及如何配置MyBatis4. Springboot 全局日期格式化處理的實(shí)現(xiàn)5. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)6. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題7. 解決Android Studio 格式化 Format代碼快捷鍵問(wèn)題8. 在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)9. Python使用urlretrieve實(shí)現(xiàn)直接遠(yuǎn)程下載圖片的示例代碼10. Java使用Tesseract-Ocr識(shí)別數(shù)字
網(wǎng)公網(wǎng)安備