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

我来为你创建一个简单而美观的骰子工具。

haoteby 2025-09-18 19:13 2 浏览

这个工具不仅功能完整，还包含了动画效果和响应式设计。

```html

<!DOCTYPE html>

<head>

<title>骰子工具 - 随机数生成器</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 20px;

}

.container {

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

border-radius: 20px;

padding: 40px;

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

text-align: center;

max-width: 400px;

width: 100%;

backdrop-filter: blur(10px);

}

h1 {

color: #333;

margin-bottom: 30px;

font-size: 2rem;

font-weight: 600;

}

.dice-container {

margin: 40px auto;

width: 120px;

height: 120px;

position: relative;

perspective: 1000px;

}

.dice {

width: 100%;

height: 100%;

background: #fff;

border-radius: 20px;

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

display: flex;

justify-content: center;

align-items: center;

font-size: 60px;

font-weight: bold;

color: #333;

transition: transform 0.6s ease;

cursor: pointer;

position: relative;

overflow: hidden;

}

.dice::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);

transform: rotate(45deg);

transition: all 0.6s;

opacity: 0;

}

.dice:hover::before {

animation: shine 0.6s ease-in-out;

}

@keyframes shine {

0% {

transform: translateX(-100%) translateY(-100%) rotate(45deg);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: translateX(100%) translateY(100%) rotate(45deg);

opacity: 0;

}

.dice.rolling {

animation: roll 0.6s ease-in-out;

}

@keyframes roll {

0% {

transform: rotateX(0) rotateY(0);

}

25% {

transform: rotateX(180deg) rotateY(90deg);

}

50% {

transform: rotateX(360deg) rotateY(180deg);

}

75% {

transform: rotateX(540deg) rotateY(270deg);

}

100% {

transform: rotateX(720deg) rotateY(360deg);

}

.dot-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

gap: 8px;

width: 80px;

height: 80px;

padding: 10px;

}

.dot {

width: 16px;

height: 16px;

background: #333;

border-radius: 50%;

opacity: 0;

transition: opacity 0.3s ease;

}

.dot.active {

opacity: 1;

}

.roll-button {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

color: white;

border: none;

padding: 15px 40px;

font-size: 18px;

font-weight: 600;

border-radius: 50px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

margin-top: 20px;

}

.roll-button:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);

}

.roll-button:active {

transform: translateY(0);

}

.roll-button:disabled {

opacity: 0.6;

cursor: not-allowed;

transform: none;

}

.result {

margin-top: 30px;

font-size: 24px;

color: #555;

min-height: 30px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

}

.result-number {

font-size: 36px;

font-weight: bold;

color: #667eea;

animation: fadeIn 0.5s ease;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: scale(0.8);

}

to {

opacity: 1;

transform: scale(1);

}

.history {

margin-top: 30px;

padding-top: 20px;

border-top: 1px solid #e0e0e0;

}

.history-title {

font-size: 16px;

color: #666;

margin-bottom: 10px;

}

.history-list {

display: flex;

gap: 8px;

justify-content: center;

flex-wrap: wrap;

}

.history-item {

width: 30px;

height: 30px;

background: #f0f0f0;

border-radius: 6px;

display: flex;

align-items: center;

justify-content: center;

font-size: 14px;

font-weight: 600;

color: #666;

animation: slideIn 0.3s ease;

}

@keyframes slideIn {

from {

opacity: 0;

transform: translateX(-10px);

}

to {

opacity: 1;

transform: translateX(0);

}

@media (max-width: 480px) {

.container {

padding: 30px 20px;

}

h1 {

font-size: 1.5rem;

}

.dice-container {

width: 100px;

height: 100px;

}

.dice {

font-size: 50px;

}

.dot-container {

width: 70px;

height: 70px;

}

.dot {

width: 14px;

height: 14px;

}

</style>

</head>

<body>

</div>

掷骰子

</button>

点击按钮开始

</div>

</div>

let history = [];

const maxHistory = 10;

// 骰子点数对应的点位置

const dicePatterns = {

1: [5],

2: [1, 9],

3: [1, 5, 9],

4: [1, 3, 7, 9],

5: [1, 3, 5, 7, 9],

6: [1, 3, 4, 6, 7, 9]

};

function rollDice() {

const dice = document.getElementById('dice');

const button = document.getElementById('rollButton');

const result = document.getElementById('result');

// 禁用按钮防止重复点击

button.disabled = true;

button.textContent = '掷骰中...';

// 添加滚动动画

dice.classList.add('rolling');

// 清除当前显示的点

const dots = document.querySelectorAll('.dot');

dots.forEach(dot => dot.classList.remove('active'));

// 在动画期间快速切换数字

let animationCount = 0;

const animationInterval = setInterval(() => {

const tempNumber = Math.floor(Math.random() * 6) + 1;

showDots(tempNumber);

animationCount++;

if (animationCount >= 10) {

clearInterval(animationInterval);

}

}, 60);

// 动画结束后显示最终结果

setTimeout(() => {

dice.classList.remove('rolling');

// 生成最终随机数

const finalNumber = Math.floor(Math.random() * 6) + 1;

// 显示骰子点数

showDots(finalNumber);

// 更新结果显示

result.innerHTML = `结果是：<span class="result-number">${finalNumber}</span>`;

// 添加到历史记录

addToHistory(finalNumber);

// 恢复按钮

button.disabled = false;

button.textContent = '再次掷骰';

}, 600);

}

function showDots(number) {

const dots = document.querySelectorAll('.dot');

const pattern = dicePatterns[number];

// 清除所有点

dots.forEach(dot => dot.classList.remove('active'));

// 显示对应的点

pattern.forEach(position => {

const dot = document.querySelector(`[data-position="${position}"]`);

if (dot) {

dot.classList.add('active');

}

});

}

function addToHistory(number) {

history.unshift(number);

// 限制历史记录数量

if (history.length > maxHistory) {

history.pop();

}

updateHistoryDisplay();

}

function updateHistoryDisplay() {

const historyList = document.getElementById('historyList');

historyList.innerHTML = '';

history.forEach((number, index) => {

const item = document.createElement('div');

item.className = 'history-item';

item.textContent = number;

item.style.animationDelay = `${index * 0.05}s`;

historyList.appendChild(item);

});

}

// 初始化显示

showDots(1);

// 添加键盘支持

document.addEventListener('keydown', (e) => {

if (e.code === 'Space' || e.code === 'Enter') {

e.preventDefault();

const button = document.getElementById('rollButton');

if (!button.disabled) {

rollDice();

}

});

// 点击骰子也可以掷骰子

document.getElementById('dice').addEventListener('click', () => {

const button = document.getElementById('rollButton');

if (!button.disabled) {

rollDice();

}

});

</script>

</body>

</html>

```

这个骰子工具具有以下特点：

1. **视觉设计**：

- 现代化的渐变背景和毛玻璃效果

- 真实的骰子外观，使用点阵显示1-6的数字

- 平滑的动画效果和过渡

2. **交互功能**：

- 点击按钮或骰子都可以掷骰子

- 掷骰时有旋转动画，模拟真实骰子滚动

- 支持键盘操作（空格键或回车键）

3. **用户体验**：

- 防止重复点击的按钮状态管理

- 清晰的结果显示

- 历史记录功能，显示最近10次的结果

- 响应式设计，适配移动设备

4. **细节优化**：

- 悬停效果和光泽动画

- 平滑的动画过渡

- 友好的提示文字

你可以直接保存这个HTML文件并在浏览器中打开使用。希望这个骰子工具能满足你的需求！

e preventdefault

上一篇：前端文件系统_前端文件管理插件
下一篇：Web前端必备基础知识点，百万网友:牛逼

我来为你创建一个简单而美观的骰子工具。

相关推荐

开源的人脸识别框架（人脸识别开源sdk源码）

图像算法应用6:半小时快速完成人脸检测及人脸识别

基于OpenCV的视频人脸识别java考勤jsp源代码Mysql

科幻小说《情绪指针》:如果我们失去一切情绪

DeepSeek+Photoshop，一键生成PS脚本的保姆级教程与深度体验!

Linux服务器程序规范 - 系统资源限制和改变工作目录和根目录

探索Python中的人脸识别:深入pyfacelib库

交换机端口映射详解（交换机端口映射）

什么是Token?如何查看网页Token（浏览器 token）

使用C# EasyHook进行钩子操作（c# soket）

我来为你创建一个简单而美观的骰子工具。

相关推荐

开源的人脸识别框架（人脸识别开源sdk源码）

图像算法应用6:半小时快速完成人脸检测及人脸识别

基于OpenCV的视频人脸识别java考勤jsp源代码Mysql

科幻小说《情绪指针》:如果我们失去一切情绪

DeepSeek+Photoshop，一键生成PS脚本的保姆级教程与深度体验!

Linux服务器程序规范 - 系统资源限制和改变工作目录和根目录

探索Python中的人脸识别:深入pyfacelib库

交换机端口映射详解（交换机 端口映射）

什么是Token?如何查看网页Token（浏览器 token）

使用C# EasyHook进行钩子操作（c# soket）

交换机端口映射详解（交换机端口映射）