js实现双色球

最新推荐文章于 2022-03-26 01:38:14 发布

mwsblue

最新推荐文章于 2022-03-26 01:38:14 发布

阅读量270

点赞数

分类专栏： js算法前端基础

本文链接：https://blog.csdn.net/mwsblue/article/details/115647362

版权

前端基础同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

js算法

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述
这里涉及到闭包、函数自调用以及定时器

<!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>双色球</title>

	<style>
		ul {
			display: flex;
		}

		li {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			list-style: none;
			text-align: center;
			line-height: 50px;
			color: white;
		}

		ul>li:not(.last) {

			background-color: red;
		}

		ul>li:last-child {

			background-color: blue;
		}
	</style>
</head>

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li class="last"></li>
	</ul>
	<script>
		var times;
		for (var i = 0; i < 7; i++) {
			(function (i) {
				setTimeout(function () {
					if (times) {
						clearInterval(times)
					}
					times = setInterval(function () {
						if (i == 6) {
							document.querySelectorAll("li")[i].innerHTML = Math.floor(Math.random() * 15 + 1);
						} else {
							document.querySelectorAll("li")[i].innerHTML = Math.floor(Math.random() * 32 + 1);
						}
					}, 50)


				}, 5000 * i)
			}(i))
		}

		setTimeout(function () {
			clearInterval(times)
		}, 35000)

	</script>
</body>

</html>

mwsblue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> <tit.
复制链接

扫一扫