【项目分享】法拉利中控台模拟 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…...
ChromaControl终极指南：如何用一个软件控制所有RGB设备？[特殊字符]
ChromaControl终极指南：如何用一个软件控制所有RGB设备？🎮 【免费下载链接】ChromaControl 3rd party device lighting support for Razer Synapse. 项目地址: https://gitcode.com/gh_mirrors/ch/ChromaControl 你是否厌倦了桌面上堆…...
前端开发从入门到精通：Vue3+TypeScript实战教程
一、为什么软件测试从业者要学Vue3TypeScript在软件测试领域，尤其是自动化测试和性能测试方向，懂前端开发技术早已不是加分项，而是必备技能。作为测试从业者，掌握Vue3TypeScript能为你的职业发展带来多重优势：…...
告别GUI框架：在嵌入式Linux上用framebuffer手撸一个简易绘图库（附完整代码）
告别GUI框架：在嵌入式Linux上用framebuffer手撸一个简易绘图库 在资源受限的嵌入式Linux环境中，图形界面开发往往面临两难选择：要么使用Qt、SDL等重型框架消耗宝贵的内存和CPU资源，要么放弃图形功能转向纯命令行交互。本文将为开发…...
OpenWrt自动化神器：用luci-app-nettask插件，把物理按键和断网都变成触发器
OpenWrt自动化神器：用luci-app-nettask插件解锁硬件触发潜能 你是否曾想过，家里那台默默工作的路由器，除了提供Wi-Fi信号外，还能成为智能家居的中枢神经？当网络突然中断时，它能自动重连并发送通知ÿ…...
TensorFlow GPU内存分配失败怎么办？教你一招避坑
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 TensorFlow GPU内存分配失败的终极解决方案：一招避坑指南 目录 TensorFlow GPU内存分配失败的终极解决方案࿱…...
Chrome 90+ 跨域请求突然失败？手把手教你排查 strict-origin-when-cross-origin 这个‘新’策略
Chrome 90 跨域请求突然失败？从原理到实战的完整解决方案 最近不少开发者反馈，Chrome浏览器升级到90版本后，原本正常运行的前端项目突然出现跨域请求失败的问题。控制台只显示一个模糊的strict-origin-when-cross-origin错误，让人…...
为ubuntu上的自动化脚本寻找稳定大模型api源taotoken的接入方案
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 为 Ubuntu 上的自动化脚本寻找稳定大模型 API 源：Taotoken 的接入方案 在 Ubuntu 环境中运行自动化脚本或智能体时&…...
别再乱接线了！12V手电钻保护板（B+/B-/B1/B2）保姆级接线图解，附万用表检测电池坏点技巧
12V手电钻保护板接线全攻略：从原理到实战的安全操作指南 面对手电钻保护板上密密麻麻的接线端子，即使是经验丰富的DIY爱好者也难免感到困惑。B、B-、B1、B2这些看似简单的标记背后，实际上隐藏着锂电池组安全工作的关键机制。本文将带您深入理…...
Seraphine：你的英雄联盟智能助手，3步实现高效战绩查询与游戏辅助
Seraphine：你的英雄联盟智能助手，3步实现高效战绩查询与游戏辅助 【免费下载链接】Seraphine 英雄联盟战绩查询工具 项目地址: https://gitcode.com/gh_mirrors/se/Seraphine 还在为英雄联盟对局中信息不足而困扰吗？想要在BP阶段就占据…...
突发外交事件3分钟响应！Perplexity国际新闻搜索应急配置清单，含12条预设Prompt与可信度评分模型
更多请点击： https://kaifayun.com 第一章：突发外交事件3分钟响应！Perplexity国际新闻搜索应急配置清单，含12条预设Prompt与可信度评分模型 面对突发外交事件（如边境冲突升级、高层会谈临时取消、制裁公告突袭发布&am…...