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

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

news 2026/4/1 22:30:24

引入：

制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务，我们可以使用一些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来实现一个基本的界面。以下是一个简单的示例，展示了如何创建一个基本的法拉利中控台模拟网页。效果展示&…...

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

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

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

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

stm32103c8t6 pwm驱动舵机（SG90）

本方法采用通用定时器（TIM2、TIM3、TIM4、TIM5）实现代码： 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 循环是自动化重复任务的强大工具，可以使代码更高效、更易于管理。本教程将解释 for 循环的工作原理，探讨不同的应用场景，并提供大量实用示例。无论你是初学者还是希望提升技能的开发者，这些示例都将帮助你更好地在 …...

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

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

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

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

timm使用笔记

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

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

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

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

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

贪心算法入门（一）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

效果图如下： 上拉刷新与下拉刷新代码如下： 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语句的基本用法三、文本解析显神威：for /f 用法详解四、翻箱倒柜遍历文件夹：for /r五、仅仅为了匹配第一层目录而存在：for /d六、计数循环：for /l后记 for语句从入门到精通一、前言在批处理中&#…...

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

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

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

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

redis实战--黑马商城记录

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

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

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

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

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

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

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

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

请解释 Linux 系统中的内核模块管理，并描述如何加载和卸载模块。

在 Linux 系统中，内核模块（Kernel Modules） 是可以在不重新编译或重启内核的情况下，动态添加到运行中内核的代码片段。它们通常用于支持新的硬件设备、文件系统或网络协议。这种机制使得 Linux 内核保持精简（核心功能…...

编程新知 2026/4/1 22:11:12

RAG系统的需求分析

这个是一个基于私有知识库的智能对话平台，允许用户上传文档构建专属知识库，并通过自然语言交互的方式查询和获取知识。它结合了大语言模型和向量检索技术，让用户通过对话的形式与自己的知识库进行高效交互应用场景个人用户场景:学习助手&…...

编程新知 2026/4/1 22:09:07

设备管理系统是什么？如何建立设备管理体系？

在现代企业的运转中，生产设备无疑是核心资产。无论是制造业的数控机床，还是建筑工地的重型机械，甚至是医疗机构的精密仪器，设备的稳定运行直接决定了企业的生产效率、产品质量和成本控制。然而，许多企业在设备管理上仍…...

编程新知 2026/4/1 22:06:59

深度解析：数据仓库——定义、核心架构与企业核心价值

深度解析：数据仓库——定义、核心架构与企业核心价值一、引言二、定义：什么是数据仓库？2.1 标准定义2.2 核心四大特征（数据仓库基石）三、架构流程：数据仓库的标准工作流程（带流程图）…...

编程新知 2026/4/1 21:54:52

基于OpenCASCADE7.4+OSG3.6.3+Qt5.12.7的多文档初级CAD/CAE...

基于opencascade7.4osg3.6.3qt5.12.7的多文档初级Cad/cae平台，支持十几种格式文件，包括step,igs,stl,obj,3ds，osg等，支持视角切换，显示模式切换，仿Cad命令注册机制，装配体显示，模型高…...

编程新知 2026/4/1 21:50:49

seo规则中的内容创作有哪些注意事项

SEO规则中的内容创作有哪些注意事项在当今互联网时代，搜索引擎优化（SEO）已成为网站流量和曝光度提升的关键手段。其中，内容创作是SEO的核心要素之一。仅仅创作大量内容并不能保证网站的高排名和高流量。要想在百度等搜索引擎上取…...

编程新知 2026/4/1 21:46:37

别再只会用Arduino了！用ESP8266+MicroPython快速搭建你的第一个物联网小项目（附完整代码）

用MicroPython解锁ESP8266的物联网潜能：10分钟搭建温湿度监测系统当提到物联网开发时，大多数人的第一反应可能是Arduino和C。但今天，我要带你体验一种更高效、更友好的方式——MicroPython。这种基于Python的嵌入式编程语言，让物…...

编程新知 2026/4/1 20:52:04

DevOps实践：如何让开发、测试、运维不再“打架”？

质量不再是孤岛在追求快速迭代的现代软件开发中，开发、测试与运维团队之间的隔阂与摩擦，常常被戏称为“部门战争”。开发团队渴望快速交付新功能，测试团队需要足够的时间来保障质量，而运维团队则首要追求系统的稳定与可靠。当发布…...

编程新知 2026/4/1 20:03:37

Linux进程调度机制与性能优化实践

1. Linux进程调度概述在Linux操作系统中，进程调度是内核最核心的功能之一。作为一个多任务操作系统，Linux需要合理地分配有限的CPU资源给众多进程，使它们能够高效、公平地运行。理解Linux的调度机制，对于系统性能调优、应用开发以…...

编程新知 2026/4/1 19:09:01

ROS实战：UZH-FPV数据集下PL-EVIO与主流VIO算法的性能对比

1. UZH-FPV数据集与无人机视觉里程计的挑战 UZH-FPV数据集是苏黎世联邦理工学院发布的专门针对高速无人机场景的多模态数据集。这个数据集最大的特点在于它完整记录了无人机在高速机动飞行（最高速度超过10m/s）时的多传感器数据，包括双目事件相…...

编程新知 2026/4/1 16:51:12

引入：

效果展示：

源码：

HTML 部分

CSS 部分 (styles.css)

CSS 部分 (续 styles.css)

JavaScript 部分 (script.js)

相关文章：