js实现双色球

最新推荐文章于 2022-10-28 20:38:30 发布

原创最新推荐文章于 2022-10-28 20:38:30 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

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

16 篇文章

订阅专栏

js算法

8 篇文章

订阅专栏

这个示例展示了如何使用JavaScript实现一个双色球彩票号码的随机生成，并结合定时器实现滚动效果。每个红球（除了最后一个蓝球）的数值在1到32之间随机，而蓝球的数值在1到15之间随机。页面加载后，号码将在5秒间隔逐个显示，35秒后停止滚动。

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

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