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

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

news 2025/6/15 19:15:46

引入：

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





















变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析




一、变量声明设计&#xff1a;let 与 mut 的哲学解析 
Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 
1.1 设计理念剖析 
安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 
let x  5;   …...






编程新知
2025/6/12 19:16:33



















生成xcframework




打包 XCFramework 的方法 
XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 
使用 Xcode 命令行工具打包 
通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...






编程新知
2025/6/15 0:07:10



















Oracle查询表空间大小




1 查询数据库中所有的表空间以及表空间所占空间的大小 
SELECTtablespace_name,sum( bytes ) / 1024 / 1024 
FROMdba_data_files 
GROUP BYtablespace_name; 
2 Oracle查询表空间大小及每个表所占空间的大小 
SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...






编程新知
2025/6/14 15:15:02



















Frozen-Flask ：将 Flask 应用“冻结”为静态文件




Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...






编程新知
2025/6/15 18:30:52



















unix/linux，sudo，其发展历程详细时间线、由来、历史背景




sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 
历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 
在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...






编程新知
2025/6/15 11:22:53



















让AI看见世界：MCP协议与服务器的工作原理




让AI看见世界&#xff1a;MCP协议与服务器的工作原理 
MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...






编程新知
2025/6/15 6:07:38



















高防服务器能够抵御哪些网络攻击呢？




高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...






编程新知
2025/6/12 17:07:48



















优选算法第十二讲：队列 + 宽搜  优先级队列




优选算法第十二讲&#xff1a;队列  宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...






编程新知
2025/6/14 0:52:30



















ip子接口配置及删除




配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 
永久的 [应用] 
vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 
TYPE"Ethernet"
BOOTPROTO"none"
NAME"eth0"
DEVICE"eth0"
ONBOOT&q…...






编程新知
2025/6/15 15:41:05



















LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》




这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 
该模块…...






编程新知
2025/6/15 6:58:06