<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<title>双色球
模拟开奖系统</title>
<style>
/* 核心样式 */
.container {
text
-align: center;
margin: 20px auto;
max
-width: 800px;
font
-family: Arial, sans
-serif;
}
.
balls-container {
margin: 20px;
min
-height: 60px;
}
.ball {
display: inline
-block;
width: 40px;
height: 40px;
line
-height: 40px;
border
-radius: 50%;
margin: 5px;
font
-weight: bold;
opacity: 0;
transform: scale
(0.5
);
transition: all 0.5s ease
-out;
}
.ball.show {
opacity: 1;
transform: scale
(1
);
}
.
red-ball {
background: #ff4444;
color: white;
}
.
blue-ball {
background: #4444ff;
color: white;
}
#startBtn {
padding: 12px 24px;
font
-size: 18px;
background: #4CAF50;
color: white;
border: none;
border
-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
#startBtn:hover {
background: #45a049;
}
#startBtn:disabled {
background: #cccccc;
cursor: not
-allowed;
}
</style>
</head>
<body>
<div class="container">
<h2>🎱 双色球
模拟开奖系统</h2>
<button id="startBtn" onclick="startLottery
()">开始摇号</button>
<div class="result
-area">
<div id="
redBalls" class="
balls-container"></div>
<div id="
blueBall" class="
balls-container"></div>
</div>
</div>
<script>
// 红球生成算法（无重复）
function generate
RedBalls() {
const
balls = new Set
()
while
(balls.size < 6
) {
balls.add
(Math.floor
(Math.r
andom
() * 33
) + 1
)
}
return [...
balls].sort
((a,b
) => a
- b
)
}
// 蓝球生成算法
function generate
BlueBall
() {
return Math.floor
(Math.r
andom
() * 16
) + 1
}
// 动画显示逻辑
function startLottery
() {
const btn = document.getElementById
('startBtn'
)
btn.disabled = true
btn.textContent = '摇号中...'
// 清空上次结果
document.getElementById
('
redBalls'
).innerHTML = ''
document.getElementById
('
blueBall'
).innerHTML = ''
// 生成新号码
const
reds = generate
RedBalls()
const
blue = generate
BlueBall
()
// 红球逐个显示
reds.forEach
((num, index
) => {
setTimeout
(() => {
const ball = document.createElement
('div'
)
ball.className = 'ball
red-ball'
ball.textContent = num.toString
().padStart
(2, '0'
)
document.getElementById
('
redBalls'
).appendChild
(ball
)
// 触发动画
setTimeout
(() => ball.classList.add
('show'
), 10
)
}, 500 * index
)
}
)
// 蓝球延迟显示
setTimeout
(() => {
const ball = document.createElement
('div'
)
ball.className = 'ball
blue-ball'
ball.textContent =
blue.toString
().padStart
(2, '0'
)
document.getElementById
('
blueBall'
).appendChild
(ball
)
setTimeout
(() => {
ball.classList.add
('show'
)
btn.disabled = false
btn.textContent = '重新摇号'
}, 10
)
}, 500 *
reds.length
+ 1000
)
}
</script>
</body>
</html>
以上面的代码为基础，增加以下功能：机选任意注并打出这些号码组合
最低0.47元/天 解锁文章
扫一扫
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
