js实现双色球

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值