基于JS实现九宫格抽奖的流程和代码是啥
|
今天这篇我们来学习和了解“基于JS实现九宫格抽奖的流程和代码是什么”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“基于JS实现九宫格抽奖的流程和代码是什么”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！ 主要流程为： 1. 根据效果图，构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抽奖</title> <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 240px; margin: 30px auto; border: 1px solid #ccc; } ul li { width: 60px; height: 60px; line-height: 30px; text-align: center; margin: 10px; float: left; background-color: orange; color: white; } /* 清浮动 */ ul:after { content: ""; display: block; clear: both; } p { margin: 20px auto; text-align: center; } .btn { width: 100px; height: 40px; line-height: 40px; text-align: center; border: none; background-color: skyblue; } </style> </head> <body> <div id="box"> <ul> <li>礼品1</li> <li>礼品2</li> <li>礼品3</li> <li>礼品4</li> <li>礼品5</li> <li>礼品6</li> <li>礼品7</li> <li>礼品8</li> <li>礼品9</li> </ul> <p><button onclick="alert(123)" title="按钮">开始抽奖</button></p> </div> </body> <script> var btn = document.getElementsByTagName("button")[0]; btn.className = "btn"; // 通过标签名 获取元素 var lis = document.getElementsByTagName("li"); // 为元素绑定单击事件 btn.onclick = function () { // 禁用按钮 btn.disabled = true; var timer = setInterval(function () { for (var i = 0; i < lis.length; i++) { lis[i].style.backgroundColor = getColor(); } }, 100); // 使用延时器 清除定时器 setTimeout(function (){ clearInterval(timer) for (var i = 0; i < lis.length; i++) { lis[i].style.backgroundColor = "orange" } var index = Math.floor( Math.random() * lis.length ) lis[index].style.backgroundColor = "red"; // 启用按钮 btn.disabled = false; }, 2000) } // 随机颜色的函数 function getColor() { return "#" + Math.random().toString(16).substr(2, 6); } </script> </html> 关于“基于JS实现九宫格抽奖的流程和代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，小编每天都会为大家更新不同的知识。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
