這篇文章主要介紹了原生js如何實(shí)現(xiàn)隨機(jī)點(diǎn)名功能,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
海珠ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
具體內(nèi)容如下
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,js部分有注釋
<!DOCTYPE html> <html lang="en"> <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> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; margin: 10px auto; border: 2px solid #ccc; text-align: center; } .lucking{ width: 200px; height: 180px; border: 1px solid #000; position: relative; } .lucking img{ position: absolute; left: 0; bottom: 0; } .wrapper ul li{ width: 100px; height: 50px; line-height: 50px; text-align: center; margin: 4px; border:2px solid #ccc; border-radius: 5px; /* 不設(shè)置float:left的原因 1: 浮動不能讓父盒子撐開高度 2: display:inline-block 具有行內(nèi)元素的屬性特征,給父盒子加text-align:center 可使其居中 */ display: inline-block; } .wrapper button{ margin-top: 20px; width: 80px; height: 40px; border: none; background-color: #ddd; border-radius: 5px; font-weight: 700; outline: none; cursor: pointer; } .wrapper .active{ background-color: #f1084a; font-weight: 700; } </style> </head> <body> <div class="wrapper" id="_wrapper"> <ul id="_ul"></ul> <button class="start">開始點(diǎn)名</button> <button class="stop">停止</button> <div class="lucking" id="_lucking"> <p></p> <img src="1.gif" > </div> </div> </body> </html> <script> var array = ['楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫','李易峰','楊雨婷','張蓓','王潔','鄧倫']; // 獲取元素 var _wrapper = document.getElementById('_wrapper'); var ul = document.getElementById('_ul');; var timer = null; init(); function init(){ // 動態(tài)創(chuàng)建li for(var i = 0; i < array.length;i++) { var oli = document.createElement('li'); oli.innerHTML = array[i]; ul.appendChild(oli); } // 點(diǎn)擊 click(); } function click(){ // 獲取start按鈕 var start = _wrapper.getElementsByTagName('button')[0]; var stop = _wrapper.getElementsByTagName('button')[1]; var lucking = document.getElementById('_lucking'); // 定時器 start.addEventListener('click',function(){ clearInterval(timer); timer = setInterval(function(){ // 獲得隨機(jī)數(shù) var random = Math.floor(Math.random()*array.length); for(var i = 0;i < array.length;i++) { ul.children[i].className = ''; } ul.children[random].className = 'active'; },50); }); stop.addEventListener('click',function(){ clearInterval(timer); // 找到此時的元素 var active = document.getElementsByClassName('active')[0]; lucking.children[0].innerText = "幸運(yùn)兒:" + active.innerText; }) } </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“原生js如何實(shí)現(xiàn)隨機(jī)點(diǎn)名功能”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前文章:原生js如何實(shí)現(xiàn)隨機(jī)點(diǎn)名功能
分享路徑:http://bm7419.com/article6/jcscog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)