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

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

news 2025/9/19 10:09:17

引入：

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





















wordpress后台更新后 前端没变化的解决方法




使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 
不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...






编程新知
2025/9/19 4:07:35



















解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八




现象1 打开VMware失败 
Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 
解决方法 
内核升级导致&#xff0c;需要在新内核下重新下载编译安装 
查看版本 
$ vmware -v
VMware Workstation 17.5.1 build-23298084$ lsb_release…...






编程新知
2025/9/11 8:06:49



















【第二十一章 SDIO接口(SDIO)】




第二十一章 SDIO接口 目录 
第二十一章 SDIO接口(SDIO) 
1 SDIO 主要功能 
2 SDIO 总线拓扑 
3 SDIO 功能描述 
3.1 SDIO 适配器 
3.2 SDIOAHB 接口 
4 卡功能描述 
4.1 卡识别模式 
4.2 卡复位 
4.3 操作电压范围确认 
4.4 卡识别过程 
4.5 写数据块 
4.6 读数据块 
4.7 数据流…...






编程新知
2025/9/10 3:41:08



















JVM垃圾回收机制全解析




Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...






编程新知
2025/9/11 12:54:42



















Golang dig框架与GraphQL的完美结合




将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 
Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...






编程新知
2025/9/5 21:48:13



















测试markdown--肇兴




day1&#xff1a; 
1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...






编程新知
2025/8/8 2:13:29



















linux 下常用变更-8




1、删除普通用户 
查询用户初始UID和GIDls -l /home/     ###家目录中查看UID cat /etc/group       ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...






编程新知
2025/9/5 15:11:07



















PL0语法，分析器实现！




简介 
PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 
PL/0 语法规范 
PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...






编程新知
2025/8/19 16:14:29



















GitHub 趋势日报 (2025年06月08日)




&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ 
&#x1f310; 本日报中的项目描述已自动翻译为中文 
&#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...






编程新知
2025/9/15 5:01:55



















AI编程--插件对比分析：CodeRider、GitHub Copilot及其他




AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 
随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...






编程新知
2025/7/6 18:33:10