js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法
本文實(shí)例為大家分享了js實(shí)現(xiàn)抽獎(jiǎng)的具體代碼，供大家參考，具體內(nèi)容如下
抽獎(jiǎng)活動(dòng)的原理還是很簡(jiǎn)單的，通過(guò)代碼一目了然，如果看不懂就私聊我，可以私下交流！
方法一：使用table寫一個(gè)隨機(jī)抽獎(jiǎng)
這是html+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'> <link rel='stylesheet' href='http://www.piao2010.com/bcjs/css/test2.css' > <title>抽獎(jiǎng)</title></head> <body> <div class='content'> <div class='top'> 抽獎(jiǎng)活動(dòng) </div> <div class='body'> <table> <tr> <th>百度</th> <th>騰訊</th> <th>阿里</th> <th>京東</th> <th>華為</th> </tr> <tr> <th>滴滴</th> <th>螞蟻金服</th> <th>樂(lè)視</th> <th>中國(guó)電網(wǎng)</th> <th>中石化</th> </tr> <tr> <th>美團(tuán)</th> <th>樂(lè)視</th> <th>小米</th> <th>網(wǎng)易</th> <th>酷我</th> </tr> <tr> <th>愛(ài)奇藝</th> <th>盛大</th> <th>短文學(xué)</th> <th>淺墨詩(shī)韻</th> <th>浪子一秋</th> </tr> </table> </div> <div class='bottom'> <input type='button' name='' value='開(kāi)始' onclick='toStart(this)'> </div> </div></body><script type='text/javascript'> var timer; var button = document.querySelector('#button'); function toStart() { // 啟動(dòng)定時(shí)器 if (timer == undefined) { timer = setInterval(changeStyle, 100); button.setAttribute('value', '停止'); } else { clearInterval(timer); timer = undefined; button.setAttribute('value', '開(kāi)始'); } } // 改變樣式 var a, b; function changeStyle() { var tb = document.querySelector('table'); console.log(a); if (a != undefined) { tb.rows[a].cells[b].style.backgroundColor = 'white'; } // // 獲取要操作的元素 a = parseInt(Math.random() * 4); b = parseInt(Math.random() * 5); // console.log(a); var col = tb.rows[a].cells[b]; col.style.backgroundColor = 'red'; } </script> </html>
方法二：使用span標(biāo)簽寫
html+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'> <link rel='stylesheet' href='http://www.piao2010.com/bcjs/css/test2.css' > <title>抽獎(jiǎng)</title></head> <body> <div class='content'> <div class='top'> 抽獎(jiǎng)活動(dòng) </div> <div id='body'> </div> <div class='bottom'> <input type='button' name='' value='開(kāi)始' onclick='toStart()'> </div> </div></body><script type='text/javascript'> // 獲取要操作的元素 var div = document.getElementById('body'); // 動(dòng)態(tài)添加span for (var i = 0; i < 25; i++) { // 創(chuàng)建一個(gè)新的標(biāo)簽 var el = document.createElement('span'); // 給標(biāo)簽設(shè)置內(nèi)容 el.innerText = i; // 添加子元素 div.appendChild(el); } var timer; var button = document.querySelector('#button'); function toStart() { // 啟動(dòng)定時(shí)器 if (timer == undefined) { timer = setInterval(changeStyle, 100); button.setAttribute('value', '停止'); } else { clearInterval(timer); timer = undefined; button.setAttribute('value', '開(kāi)始'); } } // 改變樣式 var selection; function changeStyle() { var spans = document.getElementsByTagName('span'); if (selection != undefined) { console.log(selection); spans[selection].style.backgroundColor = 'white'; } selection = parseInt(Math.random() * 25); var spans = document.getElementsByTagName('span'); var selectSpan = spans[selection]; selectSpan.style.backgroundColor = 'red'; } </script> </html>
兩個(gè)頁(yè)面的css代碼
*{ margin: 0; padding: 0;}body{ display: block;}.content{ width: 500px; margin: auto;}.top{ text-align: center; height: 50px; color: red; font-size: 30px; }table{ width: 100%; border: 1px solid red; border-spacing: 0;}th{ border: 1px dashed rgb(189, 189, 86); height: 40px;}.bottom{ height: 50px; margin-top: 20px; text-align: center;}.button{ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;} /* test2-1 */.body{ width: 512px; height: 260px; border: 1px solid red;}span{ display: inline-block; width: 100px; height: 50px; border: 1px dashed #b1da1f; line-height: 50px; text-align: center;}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決6. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)7. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)8. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論9. asp批量添加修改刪除操作示例代碼10. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
網(wǎng)公網(wǎng)安備