【项目分享】法拉利中控台模拟 html+css+js
引入：
制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务，我们可以使用一些HTML、CSS和JavaScript来实现一个基本的界面。以下是一个简单的示例，展示了如何创建一个基本的法拉利中控台模拟网页。
效果展示：
源码：
HTML 部分
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>法拉利中控台模拟</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dashboard">
<div class="speedometer">
<div class="needle"></div>
<div class="speed-value">0 km/h</div>
</div>
<div class="controls">
<button class="button" id="start-btn">启动</button>
<button class="button" id="stop-btn" disabled>停止</button>
<button class="button" id="accelerate-btn">加速</button>
<button class="button" id="brake-btn">刹车</button>
</div>
<div class="tachometer">
<div class="tachometer-dial"></div>
</div>
<div class="fuel-gauge">
<div class="fuel-level"></div>
<div class="fuel-value">100%</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS 部分 (styles.css)
cssbody {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}.dashboard {
background-color: #f20;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
width: 80%;
max-width: 600px;
text-align: center;
}.speedometer, .tachometer, .fuel-gauge {
margin: 20px 0;
position: relative;
height: 150px;
width: 100%;
border-radius: 10px;
overflow: hidden;
background: #333;
}.needle, .tachometer-dial {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom;
transform: translateX(-50%) rotate(0deg);
transition: transform 0.2s ease-in-out;
}.needle {
width: 5px;
height: 75px;
background-color: #fff;
}.tachometer-dial {
width: 100px;
height: 100px;
background: conic-gradient(#333 0deg, #333 45deg, #f20 45deg, #f20 90deg, #333 90deg, #333 135deg, #f20 135deg, #f20 180deg, #333 180deg, #333 225deg, #f20 225deg, #f20 270deg, #333 270deg, #333 315deg, #f20 315deg, #f20 360deg);
border-radius: 50%;
}.speed-value, .fuel-value {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
}.fuel-gauge .fuel-level {
CSS 部分 (续 styles.css)
css.fuel-gauge .fuel-level {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f20;
border-radius: 10px 10px 0 0;
transform: scaleY(100%);
transition: transform 0.2s ease-in-out;
}.button {
display: block;
width: 80%;
margin: 10px auto;
padding: 10px;
font-size: 16px;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}.button:hover {
background-color: #555;
}.button:disabled {
background-color: #666;
cursor: not-allowed;
}JavaScript 部分 (script.js)
javascriptdocument.addEventListener('DOMContentLoaded', () => {
let speed = 0;
let fuel = 100;
const needle = document.querySelector('.needle');
const speedValue = document.querySelector('.speed-value');
const fuelLevel = document.querySelector('.fuel-level');
const fuelValue = document.querySelector('.fuel-value');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const accelerateBtn = document.getElementById('accelerate-btn');
const brakeBtn = document.getElementById('brake-btn');const maxSpeed = 200;
const fuelConsumptionPerKm = 0.5;function updateDisplay() {
speedValue.textContent = `${speed.toFixed(0)} km/h`;
fuelValue.textContent = `${fuel.toFixed(0)}%`;needle.style.transform = `translateX(-50%) rotate(${speed / maxSpeed * 90 + 90}deg)`;
fuelLevel.style.transform = `scaleY(${fuel / 100})`;
}startBtn.addEventListener('click', () => {
startBtn.disabled = true;
stopBtn.disabled = false;
accelerateBtn.disabled = false;
brakeBtn.disabled = false;
});stopBtn.addEventListener('click', () => {
speed = 0;
fuel = 100; // Reset fuel for simplicity, can add fuel consumption logic here
startBtn.disabled = false;
stopBtn.disabled = true;
accelerateBtn.disabled = true;
brakeBtn.disabled = true;
updateDisplay();
});accelerateBtn.addEventListener('click', () => {
if (speed < maxSpeed) {
speed += 10;
fuel -= fuelConsumptionPerKm * 10 / maxSpeed; // Simplifying fuel consumption calculation
if (fuel < 0) fuel = 0;
updateDisplay();
}
});brakeBtn.addEventListener('click', () => {
if (speed > 0) {
speed -= 10;
if (speed < 0) speed = 0;
updateDisplay();
}
});updateDisplay();
});相关文章：
【项目分享】法拉利中控台模拟 html+css+js
引入： 制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务，我们可以使用一些HTML、CSS和JavaScript来实现一个基本的界面。以下是一个简单的示例，展示了如何创建一个基本的法拉利中控台模拟网页。 效果展示&…...
Rust 力扣 - 2461. 长度为 K 子数组中的最大和
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口，用一个哈希表记录窗口内的所有元素（用来对窗口内元素去重），我们取哈希表中元素数量等于k的窗口总和的最大值 题解代码 use std::collecti…...
stm32103c8t6 pwm驱动舵机（SG90）
本方法采用通用定时器（TIM2、TIM3、TIM4、TIM5）实现 代码： PWM.h #ifndef __PWM_H // 防止头文件重复包含 #define __PWM_H#include "stm32f10x.h" // 包含STM32F10x系列的设备头文件// 函数声明 void TIM2_PWM_In…...
Python For循环
Python 的 for 循环是自动化重复任务的强大工具，可以使代码更高效、更易于管理。本教程将解释 for 循环的工作原理，探讨不同的应用场景，并提供大量实用示例。无论你是初学者还是希望提升技能的开发者，这些示例都将帮助你更好地在 …...
C++入门——“C++11-右值引用和移动语义”
C11相比于C98增加以许多新特性，让C语言更加灵活好用，但是貌似也增加了许多学习的难度，现在先看第一部分。 一、右值引用和移动语义 1.右值引用和左值引用 在C中，值可以大致分为右值和左值，左值大概是哪些已经被定义的变…...
timm使用笔记
timm（Timm is a model repository for PyTorch）是一个 PyTorch 原生实现的计算机视觉模型库。它提供了预训练模型和各种网络组件，可以用于各种计算机视觉任务，例如图像分类、物体检测、语义分割等等。timm（库提供了预训…...
android浏览器源码 可输入地址或关键词搜索 android studio 2024 可开发可改地址
Android 浏览器是一种运行在Android操作系统上的应用程序，主要用于访问和查看互联网内容。以下是关于Android浏览器的详细介绍： 1. 基本功能 Android浏览器提供了用户浏览网页的基本功能，如： 网页加载：支持加载静态…...
贪心算法入门（一）
1.什么是贪心算法？ 贪心算法是一种解决问题的策略，它将复杂的问题分解为若干个步骤，并在每一步都选择当前最优的解决方案，最终希望能得到全局最优解。这种策略的核心在于“最优”二字，意味着我们追求的是以最少的时间和…...
C# ref和out 有什么区别，分别用在那种场景
在C#中，ref和out都是用于按引用传递参数的关键字，但它们有一些细微的差别和使用场景。 ref 关键字 ref 关键字用于按引用传递参数。这意味着当你将一个变量作为参数传递给一个方法时，你不是传递变量的值，而是传递变量的引用。因…...
TikTok直播专线：提升直播效果和体验
作为当今全球最受欢迎的社交媒体平台之一，TikTok为商家提供了无限的商机和市场。然而，商家在使用TikTok时也面临着许多挑战，如网络延迟、直播中断以及账号被封等问题。TikTok直播专线旨在为商家提供高速稳定的网络连接，助力他们在…...
由浅入深逐步理解spring boot中如何实现websocket
实现websocket的方式 1.springboot中有两种方式实现websocket，一种是基于原生的基于注解的websocket，另一种是基于spring封装后的WebSocketHandler 基于原生注解实现websocket 1）先引入websocket的starter坐标 <dependency><grou…...
1-petalinux 问题记录-根文件系统分区问题
在MPSOC上使用SD第二分区配置根文件系统的时候，需要选择对应的bootargs，但是板子上有emmc和sd两个区域，至于配置哪一种mmcblk0就出现了问题，从vivado中的BlockDesign和MLK XCZU2CG原理图来看的话，我使用的SD卡应该属于…...
微信小程序的上拉刷新与下拉刷新
效果图如下： 上拉刷新 与 下拉刷新 代码如下： joked.wxml <scroll-view class"scroll" scroll-y refresher-enabled refresher-default-style"white" bindrefresherrefresh"onRefresh" refresher-triggered&qu…...
【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器
【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器 目录 文章目录 【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器目录摘要研究背…...
KPRCB结构之ReadySummary和DispatcherReadyListHead
ReadySummary: Uint4B DispatcherReadyListHead : [32] _LIST_ENTRY 请参考 _KTHREAD *__fastcall KiSelectReadyThread(ULONG LowPriority, _KPRCB *Prcb)...
批处理之for语句从入门到精通--呕血整理
文章目录 一、前言二、for语句的基本用法三、文本解析显神威：for /f 用法详解四、翻箱倒柜遍历文件夹：for /r五、仅仅为了匹配第一层目录而存在：for /d六、计数循环：for /l后记 for语句从入门到精通 一、前言 在批处理中&#…...
pycharm小游戏贪吃蛇及pygame模块学习（）
由于代码量大，会逐渐发布 一.pycharm学习 在PyCharm中使用Pygame插入音乐和图片时，有以下这些注意事项： 插入音乐： - 文件格式支持：Pygame常用的音乐格式如MP3、OGG等，但MP3可能需额外安装库…...
redis实战--黑马商城 记录
一、视频地址 黑马程序员Redis入门到实战教程，深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 二、笔记地址 Redis基础篇Redis实战篇...
机器人技术革新：人工智能的强力驱动
内容概要 在当今世界，机器人技术与人工智能的结合正如星星与大海，彼此辉映。随着科技的不断进步，人工智能不仅仅是为机器人赋予了“聪明的大脑”，更是推动了整个行业的快速发展。回顾机器人技术的发展历程，我们会发现…...
漫途焊机安全生产监管方案，提升安全生产管理水平！
随着智能制造时代的到来，企业安全生产管理的重要性日益凸显。特别是在现代工厂中，焊机的安全生产监管成为了一个不容忽视的重要环节。传统的焊机安全生产监管方式存在诸多不足，如人工巡检频率低、数据延迟、安全隐患发现不及时等问题。因此&a…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
JDK 17 序列化是怎么回事
如何序列化？其实很简单，就是根据每个类型，用工厂类调用。逐个完成。 没什么漂亮的代码，只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...
Appium下载安装配置保姆教程（图文详解）
目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...
【Redis】Redis从入门到实战：全面指南
Redis从入门到实战：全面指南 一、Redis简介 Redis（Remote Dictionary Server）是一个开源的、基于内存的键值存储系统，它可以用作数据库、缓存和消息代理。由Salvatore Sanfilippo于2009年开发，因其高性能、丰富的数据结构和广泛的语言支持而广受欢迎。 Redis核心特点：…...
GitHub 常见高频问题与解决方案（实用手册）
1.Push 提示权限错误（Permission denied） 问题： Bash Permission denied (publickey) fatal: Could not read from remote repository. 原因： 没有配置 SSH key 或使用了 HTTPS 而没有权限…...