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

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

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

把代码复制在电脑文本文档中，文本文档后缀名改为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大乐透模拟器（大乐透在线模拟）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）