开发者们大家好!我很高兴分享我的最新项目:Flip Coin 应用程序。这个简单而有趣的项目可以让您模拟经典的硬币翻转,非常适合决策或只是为了好玩。这是如何使用 HTML、CSS 和 JavaScript 创建交互式 Web 应用程序的绝佳示例。
翻转硬币 是一个基于网络的应用程序,可以模拟翻转硬币。用户可以点击按钮来掷硬币,结果将显示在屏幕上。该项目演示了基本的 Web 开发技术,并提供了练习前端技能的实践方法。
以下是项目结构的概述:
Flip-Coin/ ├── index.html ├── style.css └── script.js
要开始该项目,请按照以下步骤操作:
克隆存储库:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
打开项目目录:
cd Flip-Coin
运行项目:
index.html 文件定义了 Flip Coin 应用程序的结构,包括按钮和显示结果的区域。这是一个片段:
<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> <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"></source> Your browser does not support the audio element. </audio> </div> </div> </div> <div class="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div>
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); } }
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中文网其他相关文章!