高清设计网站推荐,网页设计作业 介绍家乡,网络规划设计师考试全程指导,wordpress折叠代码引入#xff1a;
制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务#xff0c;我们可以使用一些HTML、CSS和JavaScript来实现一个基本的界面。以下是一个简单的示例#xff0c;展示了如何创建一个基本的法拉利中控台模拟网页。 效果展示
制作一个模拟法拉利中控台的网页是一个有趣且富有挑战性的项目。为了简化这个任务我们可以使用一些HTML、CSS和JavaScript来实现一个基本的界面。以下是一个简单的示例展示了如何创建一个基本的法拉利中控台模拟网页。 效果展示 源码
HTML 部分 html!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
title法拉利中控台模拟/title
link relstylesheet hrefstyles.css
/head
body
div classdashboard
div classspeedometer
div classneedle/div
div classspeed-value0 km/h/div
/div
div classcontrols
button classbutton idstart-btn启动/button
button classbutton idstop-btn disabled停止/button
button classbutton idaccelerate-btn加速/button
button classbutton idbrake-btn刹车/button
/div
div classtachometer
div classtachometer-dial/div
/div
div classfuel-gauge
div classfuel-level/div
div classfuel-value100%/div
/div
/div
script srcscript.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();
});
