介绍
开发者们大家好！我很高兴分享我的最新项目：Flip Coin 应用程序。这个简单而有趣的项目可以让您模拟经典的硬币翻转，非常适合决策或只是为了好玩。这是如何使用 HTML、CSS 和 JavaScript 创建交互式 Web 应用程序的绝佳示例。
项目概况
翻转硬币 是一个基于网络的应用程序，可以模拟翻转硬币。用户可以点击按钮来掷硬币，结果将显示在屏幕上。该项目演示了基本的 Web 开发技术，并提供了练习前端技能的实践方法。
特征
-
硬币翻转模拟：点击按钮翻转硬币，看看它是正面还是反面。
-
视觉反馈：以简单的动画显示硬币的结果，以增强用户体验。
-
响应式设计：该应用程序旨在在各种设备上良好运行。
使用的技术
-
HTML：提供翻转硬币应用程序的结构。
-
CSS：设计应用程序的样式并添加动画以获得视觉上吸引人的体验。
-
JavaScript：实现抛硬币逻辑并处理用户交互。
项目结构
以下是项目结构的概述：
Flip-Coin/
├── index.html
├── style.css
└── script.js
登录后复制
-
index.html：包含 Flip Coin 应用程序的 HTML 结构。
-
style.css：包含 CSS 样式，实现简洁的交互式设计。
-
script.js：管理硬币翻转逻辑和用户交互。
安装
要开始该项目，请按照以下步骤操作：
-
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
登录后复制
-
打开项目目录:
-
运行项目:
- 在网络浏览器中打开index.html 文件以使用Flip Coin 应用程序。
用法
-
在网络浏览器中打开网站。
-
点击“抛硬币”按钮来抛硬币。
-
在屏幕上查看结果，显示硬币是正面还是反面落地。
代码说明
超文本标记语言
index.html 文件定义了 Flip Coin 应用程序的结构，包括按钮和显示结果的区域。这是一个片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flip Coin</title>
<link rel="stylesheet" href="style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div id="main">
<div id="logo_image"></div>
<div class="container">
<p>Flipping your fate with a click</p>
<div class="stats">
<p id="heads-count">建立一个翻转硬币网站: 0</p>
<p id="tails-count">Tails: 0</p>
</div>
<div class="coin">
<div class="heads">
<img
src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg"
alt="建立一个翻转硬币网站"
/>
</div>
<div class="tails">
<img
src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg"
alt="Tails"
/>
</div>
</div>
<div id="buttons">
<button id="flip-button">Flip coin</button>
<button id="reset-button">Reset</button>
<audio id="flip-sound">
<source src="./assets/coin-flip-88793.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
登录后复制
CSS
style.css 文件设计翻转硬币应用程序的样式，为硬币翻转添加简单的动画。以下是一些关键样式：
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
body {
height: 100%;
width: 100%;
background-color: #072ac8;
}
#main {
display: flex;
justify-content: center;
width: 100%;
height: 90vh;
}
#logo_image {
width: 250px;
height: 100px;
background: url(./assets/original-68bc1d89ca3ea0450d8ca9f3a1403d42-removebg-preview.png);
background-position: center;
background-size: cover;
align-items: center;
justify-content: center;
}
.container {
background: #a2d6f9;
width: 700px;
height: 500px;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
border-radius: 10px;
-webkit-perspective: 300px;
perspective: 300px;
}
.container p {
text-align: center;
font-size: 20px;
}
.stats {
display: flex;
align-items: center;
justify-content: space-between;
color: #101020;
font-weight: 500;
line-height: 50px;
font-size: 20px;
}
.coin {
height: 150px;
width: 150px;
position: relative;
margin: 50px auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.tails {
transform: rotateX(180deg);
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
.coin img {
width: 145px;
}
.heads,
.tails {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
button {
width: 260px;
padding: 10px 0;
border: 2.5px solid black;
font-size: 22px;
border-radius: 5px;
cursor: pointer;
}
#flip-button {
background: #072ac8;
color: white;
}
#flip-button:disabled {
background-color: #e1e0ee;
color: #101020;
border-color: #e1e0ee;
}
#reset-button {
background: #fff;
color: #072ac8;
}
.footer {
margin: 20px;
text-align: center;
color: white;
}
@keyframes spin-tails {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(1980deg);
}
}
@keyframes spin-heads {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(2160deg);
}
}
登录后复制
JavaScript
script.js 文件包含翻转硬币并显示结果的逻辑。这是一个片段：
let tails = 0;
let heads = 0; // Added heads variable definition
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
let flipSound = document.querySelector("#flip-sound");
flipBtn.addEventListener("click", () => {
flipSound.currentTime = 0;
flipSound.play();
let i = Math.floor(Math.random() * 2);
coin.style.animation = "none";
if (i) {
setTimeout(() => {
coin.style.animation = "spin-heads 3s forwards";
}, 100);
heads++;
} else {
setTimeout(() => {
coin.style.animation = "spin-tails 3s forwards";
}, 100);
tails++;
}
setTimeout(updateStatus, 3000);
disableButton();
});
function updateStatus() {
document.querySelector("#heads-count").textContent = `建立一个翻转硬币网站: ${heads}`;
document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}
function disableButton() {
flipBtn.disabled = true;
setTimeout(() => {
flipBtn.disabled = false;
}, 3000);
}
resetBtn.addEventListener("click", () => {
coin.style.animation = "none"; // Fixed typo: "aniamtion" to "animation"
heads = 0;
tails = 0;
updateStatus();
});
登录后复制
现场演示
您可以在这里查看 Flip Coin 项目的现场演示。
结论
构建 Flip Coin 应用程序是一次有趣且具有教育意义的体验。这是一个简单的项目，演示如何使用 HTML、CSS 和 JavaScript 创建交互式 Web 元素。我希望您发现它很有用并喜欢尝试它。快乐编码！
制作人员
这个项目是我持续不断的旅程的一部分，旨在通过实用的交互式 Web 应用程序来增强我的前端开发技能。
作者
以上是建立一个翻转硬币网站的详细内容。更多信息请关注PHP中文网其他相关文章！
