建立一个翻转硬币网站-css教程-PHP中文网

首页

web前端

css教程

建立一个翻转硬币网站

PHPz

Aug 25, 2024 pm 08:31 PM

Build a Flip Coin Website

介绍

开发者们大家好！我很高兴分享我的最新项目：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

打开项目目录:
```
cd Flip-Coin
```
运行项目:
- 在网络浏览器中打开index.html 文件以使用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="/static/imghwm/default1.png" data-src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg?x-oss-process=image/resize,p_40" class="lazy" alt="建立一个翻转硬币网站">
          </div>
          <div class="tails">
            <img src="/static/imghwm/default1.png" data-src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg?x-oss-process=image/resize,p_40" class="lazy" 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>

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();
});