当前位置： 首页 > news >正文

【项目分享】法拉利中控台模拟 html+css+js

news 2025/12/31 5:48:21

引入：

制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务，我们可以使用一些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




引入&#xff1a; 
制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务&#xff0c;我们可以使用一些HTML、CSS和JavaScript来实现一个基本的界面。以下是一个简单的示例&#xff0c;展示了如何创建一个基本的法拉利中控台模拟网页。 效果展示&…...






编程日记
2024/11/2 9:26:08



















Rust 力扣 - 2461. 长度为 K 子数组中的最大和




文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 
我们遍历长度为k的窗口&#xff0c;用一个哈希表记录窗口内的所有元素&#xff08;用来对窗口内元素去重&#xff09;&#xff0c;我们取哈希表中元素数量等于k的窗口总和的最大值 
题解代码 
use std::collecti…...






编程日记
2024/11/2 9:25:07



















stm32103c8t6 pwm驱动舵机（SG90）




本方法采用通用定时器&#xff08;TIM2、TIM3、TIM4、TIM5&#xff09;实现 
代码&#xff1a; 
PWM.h 
#ifndef __PWM_H           // 防止头文件重复包含
#define __PWM_H#include "stm32f10x.h"    // 包含STM32F10x系列的设备头文件// 函数声明
void TIM2_PWM_In…...






编程日记
2024/11/2 9:23:04



















Python For循环




Python 的 for 循环是自动化重复任务的强大工具&#xff0c;可以使代码更高效、更易于管理。本教程将解释 for 循环的工作原理&#xff0c;探讨不同的应用场景&#xff0c;并提供大量实用示例。无论你是初学者还是希望提升技能的开发者&#xff0c;这些示例都将帮助你更好地在 …...






编程日记
2024/11/2 9:22:03



















C++入门——“C++11-右值引用和移动语义”




C11相比于C98增加以许多新特性&#xff0c;让C语言更加灵活好用&#xff0c;但是貌似也增加了许多学习的难度&#xff0c;现在先看第一部分。 一、右值引用和移动语义 1.右值引用和左值引用 在C中&#xff0c;值可以大致分为右值和左值&#xff0c;左值大概是哪些已经被定义的变…...






编程日记
2024/11/2 9:21:03



















timm使用笔记




timm&#xff08;Timm is a model repository for PyTorch&#xff09;是一个 PyTorch 原生实现的计算机视觉模型库。它提供了预训练模型和各种网络组件&#xff0c;可以用于各种计算机视觉任务&#xff0c;例如图像分类、物体检测、语义分割等等。timm&#xff08;库提供了预训…...






编程日记
2024/11/2 9:17:57



















android浏览器源码 可输入地址或关键词搜索 android studio 2024 可开发可改地址




Android 浏览器是一种运行在Android操作系统上的应用程序&#xff0c;主要用于访问和查看互联网内容。以下是关于Android浏览器的详细介绍&#xff1a; 
1. 基本功能 
Android浏览器提供了用户浏览网页的基本功能&#xff0c;如&#xff1a; 
网页加载&#xff1a;支持加载静态…...






编程日记
2024/11/2 9:15:52



















贪心算法入门（一）




1.什么是贪心算法&#xff1f; 贪心算法是一种解决问题的策略&#xff0c;它将复杂的问题分解为若干个步骤&#xff0c;并在每一步都选择当前最优的解决方案&#xff0c;最终希望能得到全局最优解。这种策略的核心在于“最优”二字&#xff0c;意味着我们追求的是以最少的时间和…...






编程日记
2024/11/2 9:13:50



















C# ref和out 有什么区别，分别用在那种场景




在C#中&#xff0c;ref和out都是用于按引用传递参数的关键字&#xff0c;但它们有一些细微的差别和使用场景。 
ref 关键字 
ref 关键字用于按引用传递参数。这意味着当你将一个变量作为参数传递给一个方法时&#xff0c;你不是传递变量的值&#xff0c;而是传递变量的引用。因…...






编程日记
2024/11/2 9:12:50



















TikTok直播专线：提升直播效果和体验




作为当今全球最受欢迎的社交媒体平台之一&#xff0c;TikTok为商家提供了无限的商机和市场。然而&#xff0c;商家在使用TikTok时也面临着许多挑战&#xff0c;如网络延迟、直播中断以及账号被封等问题。TikTok直播专线旨在为商家提供高速稳定的网络连接&#xff0c;助力他们在…...






编程日记
2024/11/2 9:11:49



















由浅入深逐步理解spring boot中如何实现websocket




实现websocket的方式 
1.springboot中有两种方式实现websocket&#xff0c;一种是基于原生的基于注解的websocket&#xff0c;另一种是基于spring封装后的WebSocketHandler 
基于原生注解实现websocket 
1&#xff09;先引入websocket的starter坐标 <dependency><grou…...






编程日记
2024/11/2 9:10:48



















1-petalinux 问题记录-根文件系统分区问题




在MPSOC上使用SD第二分区配置根文件系统的时候&#xff0c;需要选择对应的bootargs&#xff0c;但是板子上有emmc和sd两个区域&#xff0c;至于配置哪一种mmcblk0就出现了问题&#xff0c;从vivado中的BlockDesign和MLK XCZU2CG原理图来看的话&#xff0c;我使用的SD卡应该属于…...






编程日记
2024/11/2 9:09:46



















微信小程序的上拉刷新与下拉刷新




效果图如下&#xff1a; 上拉刷新   与   下拉刷新 代码如下&#xff1a; joked.wxml 
<scroll-view class"scroll" scroll-y  refresher-enabled  refresher-default-style"white" bindrefresherrefresh"onRefresh"  refresher-triggered&qu…...






编程日记
2024/11/2 9:07:44



















【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器




【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器 目录 文章目录 【大语言模型】ACL2024论文-05 GenTranslate: 大型语言模型是生成性多语种语音和机器翻译器目录摘要研究背…...






编程日记
2024/11/2 9:06:43



















KPRCB结构之ReadySummary和DispatcherReadyListHead




ReadySummary: Uint4B  DispatcherReadyListHead : [32] _LIST_ENTRY 请参考 _KTHREAD *__fastcall KiSelectReadyThread(ULONG LowPriority, _KPRCB *Prcb)...






编程日记
2024/11/2 9:04:38



















批处理之for语句从入门到精通--呕血整理




文章目录 一、前言二、for语句的基本用法三、文本解析显神威&#xff1a;for /f 用法详解四、翻箱倒柜遍历文件夹&#xff1a;for /r五、仅仅为了匹配第一层目录而存在&#xff1a;for /d六、计数循环&#xff1a;for /l后记 for语句从入门到精通  
一、前言 
在批处理中&#…...






编程日记
2024/11/2 9:03:37



















pycharm小游戏贪吃蛇及pygame模块学习（）




由于代码量大&#xff0c;会逐渐发布 
一.pycharm学习 
在PyCharm中使用Pygame插入音乐和图片时&#xff0c;有以下这些注意事项&#xff1a;   插入音乐&#xff1a;   - 文件格式支持&#xff1a;Pygame常用的音乐格式如MP3、OGG等&#xff0c;但MP3可能需额外安装库&#xf…...






编程日记
2024/11/2 9:02:36



















redis实战--黑马商城 记录




一、视频地址 
黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 
二、笔记地址 
Redis基础篇Redis实战篇...






编程日记
2024/11/2 9:01:35



















机器人技术革新：人工智能的强力驱动




内容概要 
在当今世界&#xff0c;机器人技术与人工智能的结合正如星星与大海&#xff0c;彼此辉映。随着科技的不断进步&#xff0c;人工智能不仅仅是为机器人赋予了“聪明的大脑”&#xff0c;更是推动了整个行业的快速发展。回顾机器人技术的发展历程&#xff0c;我们会发现…...






编程日记
2024/11/2 8:59:32



















漫途焊机安全生产监管方案，提升安全生产管理水平！




随着智能制造时代的到来&#xff0c;企业安全生产管理的重要性日益凸显。特别是在现代工厂中&#xff0c;焊机的安全生产监管成为了一个不容忽视的重要环节。传统的焊机安全生产监管方式存在诸多不足&#xff0c;如人工巡检频率低、数据延迟、安全隐患发现不及时等问题。因此&a…...






编程日记
2024/11/2 8:58:30





















19c补丁后oracle属主变化，导致不能识别磁盘组




补丁后服务器重启&#xff0c;数据库再次无法启动 
ORA01017: invalid username/password; logon denied 
Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...






编程新知
2025/12/30 4:22:51



















PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建




制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...






编程新知
2025/12/28 20:49:49



















UDP(Echoserver)




网络命令 
Ping 命令   
检测网络是否连通 
使用方法:    ping -c 次数  网址ping -c 3  www.baidu.comnetstat  命令 netstat 是一个用来查看网络状态的重要工具.  语法&#xff1a;netstat [选项]  功能&#xff1a;查看网络状态  常用选项&#xff1a; n 拒绝显示别名&#…...






编程新知
2025/12/24 16:48:44



















Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级




在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...






编程新知
2025/12/30 12:17:17



















Java 加密常用的各种算法及其选择




在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 
一、对称加密算法…...






编程新知
2025/11/22 20:41:02



















【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具




第2章 虚拟机性能监控&#xff0c;故障处理工具 
4.1 概述 
略 
4.2 基础故障处理工具 
4.2.1 jps:虚拟机进程状况工具 
命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...






编程新知
2025/12/5 18:12:58



















微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据




微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 
Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...






编程新知
2025/12/24 12:44:09



















【生成模型】视频生成论文调研




工作清单 
上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 
类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...






编程新知
2025/9/9 8:40:47



















Spring是如何解决Bean的循环依赖：三级缓存机制




1、什么是 Bean 的循环依赖 
在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 
多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...






编程新知
2025/7/25 1:21:53



















Linux 内存管理实战精讲：核心原理与面试常考点全解析




Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 
Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...






编程新知
2025/12/29 17:24:25