当前位置：网站首页 > 技术文章 > 正文

用HTML显示3D大乐透模拟器（大乐透在线模拟）

zhezhongyun 2025-07-28 01:15 37 浏览

把代码复制在电脑文本文档中，文本文档后缀名改为html ,这样你就自己制作成功一个大乐透机选模拟器，来试试吧。

<!DOCTYPE html>

<head>

<title>3D大乐透模拟器</title>

<style>

body {

font-family: 'Microsoft YaHei', sans-serif;

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

perspective: 1000px;

}

.container {

text-align: center;

}

h1 {

color: #e74c3c;

text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

margin-bottom: 30px;

}

.lottery-machine {

width: 300px;

height: 400px;

position: relative;

transform-style: preserve-3d;

animation: rotate 15s infinite linear;

margin: 0 auto 30px;

}

.machine-body {

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(145deg, #e74c3c, #c0392b);

border-radius: 20px;

box-shadow: 0 20px 40px rgba(0,0,0,0.3);

transform-style: preserve-3d;

}

.machine-top {

position: absolute;

width: 80%;

height: 15%;

background: #fff;

border-radius: 10px;

top: 10%;

left: 10%;

transform: translateZ(20px);

box-shadow: inset 0 0 10px rgba(0,0,0,0.2);

}

.ball-display {

position: absolute;

width: 80%;

height: 50%;

background: rgba(255,255,255,0.9);

border-radius: 15px;

top: 30%;

left: 10%;

transform: translateZ(30px);

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

padding: 10px;

box-sizing: border-box;

box-shadow: inset 0 0 15px rgba(0,0,0,0.1);

}

.ball {

width: 40px;

height: 40px;

border-radius: 50%;

background: radial-gradient(circle at 30% 30%, #fff, #f1c40f);

display: flex;

justify-content: center;

align-items: center;

margin: 5px;

font-weight: bold;

color: #e74c3c;

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

transform-style: preserve-3d;

animation: ballFloat 3s infinite ease-in-out;

}

.ball:nth-child(2) {

animation-delay: 0.2s;

background: radial-gradient(circle at 30% 30%, #fff, #3498db);

}

.ball:nth-child(3) {

animation-delay: 0.4s;

background: radial-gradient(circle at 30% 30%, #fff, #2ecc71);

}

.ball:nth-child(4) {

animation-delay: 0.6s;

background: radial-gradient(circle at 30% 30%, #fff, #9b59b6);

}

.ball:nth-child(5) {

animation-delay: 0.8s;

background: radial-gradient(circle at 30% 30%, #fff, #e67e22);

}

.machine-bottom {

position: absolute;

width: 60%;

height: 10%;

background: #333;

border-radius: 5px;

bottom: 10%;

left: 20%;

transform: translateZ(15px);

}

.button {

position: absolute;

width: 60px;

height: 60px;

background: #f1c40f;

border-radius: 50%;

bottom: -30px;

left: 50%;

transform: translateX(-50%) translateZ(40px);

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

color: #c0392b;

box-shadow: 0 10px 20px rgba(0,0,0,0.2);

transition: all 0.3s;

}

.button:hover {

background: #f39c12;

transform: translateX(-50%) translateZ(40px) scale(1.1);

}

.button:active {

transform: translateX(-50%) translateZ(40px) scale(0.95);

}

@keyframes rotate {

0% { transform: rotateY(0deg); }

100% { transform: rotateY(360deg); }

}

@keyframes ballFloat {

0%, 100% { transform: translateY(0) translateZ(0); }

50% { transform: translateY(-10px) translateZ(10px); }

}

.result {

margin-top: 50px;

background: rgba(255,255,255,0.8);

padding: 20px;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

max-width: 500px;

}

.generated-numbers {

display: flex;

justify-content: center;

flex-wrap: wrap;

margin: 15px 0;

}

.result-ball {

width: 50px;

height: 50px;

border-radius: 50%;

background: #e74c3c;

color: white;

display: flex;

justify-content: center;

align-items: center;

margin: 5px;

font-weight: bold;

font-size: 20px;

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}

.result-ball.blue {

background: #3498db;

}

</style>

</head>

<body>

<h1>3D大乐透模拟器</h1>

</div>

</div>

<h2>本期开奖号码</h2>

<p>祝您好运！下次开奖时间：<span id="next-draw"></span></p>

</div>

function generateNumbers() {

// 生成前区5个号码(1-35)

let frontNumbers = [];

while(frontNumbers.length < 5) {

let num = Math.floor(Math.random() * 35) + 1;

if(!frontNumbers.includes(num)) {

frontNumbers.push(num);

}

frontNumbers.sort((a, b) => a - b);

// 生成后区2个号码(1-12)

let backNumbers = [];

while(backNumbers.length < 2) {

let num = Math.floor(Math.random() * 12) + 1;

if(!backNumbers.includes(num)) {

backNumbers.push(num);

}

backNumbers.sort((a, b) => a - b);

// 显示结果

document.getElementById('result').style.display = 'block';

let numbersDiv = document.getElementById('numbers');

numbersDiv.innerHTML = '';

// 添加前区号码

frontNumbers.forEach(num => {

let ball = document.createElement('div');

ball.className = 'result-ball';

ball.textContent = num;

numbersDiv.appendChild(ball);

});

// 添加分隔符

let separator = document.createElement('div');

separator.style.display = 'flex';

separator.style.alignItems = 'center';

separator.innerHTML = '<span style="margin: 0 5px; font-size: 20px;">+</span>';

numbersDiv.appendChild(separator);

// 添加后区号码

backNumbers.forEach(num => {

let ball = document.createElement('div');

ball.className = 'result-ball blue';

ball.textContent = num;

numbersDiv.appendChild(ball);

});

// 设置下次开奖时间(假设是3天后)

let nextDraw = new Date();

nextDraw.setDate(nextDraw.getDate() + 3);

document.getElementById('next-draw').textContent = nextDraw.toLocaleDateString() + ' 20:00';

}

</script>

</body>

</html>

text-align 属性

上一篇：文字如何居中，居左，居右?（文字居中是什么意思）
下一篇：An objective assessment of the China-EU relationship needed

用HTML显示3D大乐透模拟器（大乐透在线模拟）

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库