金狮镖局 Design By www.egabc.com
本文实例为大家分享了js实现抽奖的具体代码,供大家参考,具体内容如下
抽奖活动的原理还是很简单的,通过代码一目了然,如果看不懂就私聊我,可以私下交流!
方法一:使用table写一个随机抽奖
这是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="css/test2.css" > <title>抽奖</title> </head> <body> <div class="content"> <div class="top"> 抽奖活动 </div> <div class="body"> <table> <tr> <th>百度</th> <th>腾讯</th> <th>阿里</th> <th>京东</th> <th>华为</th> </tr> <tr> <th>滴滴</th> <th>蚂蚁金服</th> <th>乐视</th> <th>中国电网</th> <th>中石化</th> </tr> <tr> <th>美团</th> <th>乐视</th> <th>小米</th> <th>网易</th> <th>酷我</th> </tr> <tr> <th>爱奇艺</th> <th>盛大</th> <th>短文学</th> <th>浅墨诗韵</th> <th>浪子一秋</th> </tr> </table> </div> <div class="bottom"> <input type="button" name="" id="button" class="button" value="开始" onclick="toStart(this)"> </div> </div> </body> <script type="text/javascript"> var timer; var button = document.querySelector("#button"); function toStart() { // 启动定时器 if (timer == undefined) { timer = setInterval(changeStyle, 100); button.setAttribute("value", "停止"); } else { clearInterval(timer); timer = undefined; button.setAttribute("value", "开始"); } } // 改变样式 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标签写
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="css/test2.css" > <title>抽奖</title> </head> <body> <div class="content"> <div class="top"> 抽奖活动 </div> <div class="body" id="body"> </div> <div class="bottom"> <input type="button" name="" id="button" class="button" value="开始" onclick="toStart()"> </div> </div> </body> <script type="text/javascript"> // 获取要操作的元素 var div = document.getElementById("body"); // 动态添加span for (var i = 0; i < 25; i++) { // 创建一个新的标签 var el = document.createElement("span"); // 给标签设置内容 el.innerText = i; // 添加子元素 div.appendChild(el); } var timer; var button = document.querySelector("#button"); function toStart() { // 启动定时器 if (timer == undefined) { timer = setInterval(changeStyle, 100); button.setAttribute("value", "停止"); } else { clearInterval(timer); timer = undefined; button.setAttribute("value", "开始"); } } // 改变样式 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>
两个页面的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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,抽奖
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无js实现抽奖的两种方法的评论...
更新日志
2024年09月23日
2024年09月23日
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]