100行前端代码实现九宫格抽奖功能

话不多说，直接上效果：

主要流程为：

1. 根据效果图，构建静态页面

2. 获取元素(自带的属性)

3. 绑定事件

4. 事件触发之后

4.1 所有的li元素在指定的时间间隔下颜色随机变化

4.2 延时器 2秒后清除定时器

4.3 在清除定时器之后,所有的li背景色复位,随机选一个

代码实现过程如下：

<!DOCTYPE html>

<html>

<head>

<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>

<ul>

</ul>

</div>

</body>

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>

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。千语创想支持APP定制开发，一键网站自动生成app、网站转app、网站封装app，有网站即可生成自己的app。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/quickaddcustom

转载请注明来自：https://www.qianyuthink.com/news/6313.html

上一页：网站开发|元宵节给网站挂个灯笼
下一页：APP封装是什么？